uniapp H5使用three加载模型

跨域问题

在manifest.json源码试图中

"h5" : {
        "title" : "",
        "router" : {
            "base" : "./",
            "mode" : "hash"
        },
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/uploads" : {
                    "target" : "https://域名",
                    "changeOrigin" : true,
                    "secure" : false
                }
            }
        }
    }

下载

yarn add three
yarn add three-obj-mtl-loader
yarn addl three-orbit-controls

<view style="width:100%;height:100%;" id="container"></view>

import * as THREE from 'three';
import OrbitControls from 'three-orbit-controls'
import {OBJLoader} from '@/common/OBJLoader.js'
import {MTLLoader} from '@/common/MTLLoader.js'
data() {
		return {
			scene: null,
			camera: null,
			renderer: null,
			object:null
		}
	},
	onHide() {
		try {
			THREE.global.clearCanvas()
		} catch (e) {
			//TODO handle the exception
		}
	},
	onUnload() {
		try {
			THREE.global.clearCanvas()
		} catch (e) {
			//TODO handle the exception
		}
	},
	onShow() {
		this.initThree()
	},
	methods: {
		// 初始化three
		initThree(data) {
			const that = this
			// 获取模型地址后缀
			const suffix = this.getFilePathSuffix(data.modelUrl)
			this.$nextTick(() => {
				this.initThreeWeb(data)
			})
		},
		// H5方法 Start
		// 加载初始化
		initThreeWeb(data) {
			const that = this
			let container = document.getElementById("container")
			/**
			 * 创建场景对象Scene
			 */
			var scene = new THREE.Scene();
			/**
			 * 创建网格模型
			 */
			let mtlLoader = new MTLLoader();
			let objloader = new OBJLoader();
			mtlLoader.load(data.mtlUrl, function(materials) {
				objloader.setMaterials(materials)
				materials.preload();
				objloader.load(data.modelUrl, function(obj) {
					that.object = obj
					that.scene.add(obj);
				});
			});
			/**
			 * 光源设置
			 */
			//环境光
			var ambient = new THREE.AmbientLight(0xffffff, 0.8);
			scene.add(ambient);
			/**
			 * 相机设置
			 */
			var width = container.offsetWidth; //窗口宽度
			var height = container.offsetHeight; //窗口高度
			//创建相机对象
			var camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
			camera.position.z = data.cameraPosition.z//1400; //设置相机位置
			camera.position.y = data.cameraPosition.y
			camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
			let pointLight = new THREE.PointLight(0xffffff, 0.1);
			camera.add(pointLight);
			scene.add(camera);
			/**
			 * 创建渲染器对象
			 */
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height); //设置渲染区域尺寸
			renderer.setClearColor(0xb9d3ff, 0); //设置背景颜色
			container.appendChild(renderer.domElement); //body元素中插入canvas对象
			//执行渲染操作   指定场景、相机作为参数
			renderer.render(scene, camera);
			this.scene = scene
			this.renderer = renderer
			this.camera = camera
			this.animation()
		},
		animation() {
			try {
				this.object.rotation.y -= 0.005;
			} catch (e) {
				//TODO handle the exception
			}
			this.camera.lookAt(this.scene.position);
			this.renderer.render(this.scene, this.camera);
			requestAnimationFrame(this.animation);
		},
		// H5方法 End
		// 获取文件后缀名
		getFilePathSuffix(name) {
			let suffix = null
			const last_len = name.lastIndexOf('.')
			const len = name.length
			suffix = name.substring(last_len + 1, len)
			return suffix
		},
		render(canvas, THREE, modelUrl) {
			let window = THREE.global;
			let GLTFLoader = gLTF(THREE);
			const renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			// renderer.setSize(canvas.width, canvas.height);
			renderer.gammaOutput = true;

			const fov = 45;
			const aspect = 2; // the canvas default
			const near = 0.1;
			const far = 100;
			const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
			camera.position.set(0, 10, 20);


			const scene = new THREE.Scene();
			scene.background = new THREE.Color('black');


			{
				const skyColor = 0xB1E1FF; // light blue
				const groundColor = 0xB97A20; // brownish orange
				const intensity = 1;
				const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
				scene.add(light);
			}

			{
				const color = 0xFFFFFF;
				const intensity = 1;
				const light = new THREE.DirectionalLight(color, intensity);
				light.position.set(5, 10, 2);
				scene.add(light);
				scene.add(light.target);
			}



			{
				const gltfLoader = new GLTFLoader();
				gltfLoader.load(modelUrl, (gltf) => {
					const root = gltf.scene;
					scene.add(root);
				});
			}



			function render() {

				camera.aspect = canvas.clientWidth / canvas.clientHeight;
				camera.updateProjectionMatrix();

				renderer.render(scene, camera);
				canvas.requestAnimationFrame(render);
			}

			canvas.requestAnimationFrame(render);
		}
	}