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: {// 初始化threeinitThree(data) {const that = this// 获取模型地址后缀const suffix = this.getFilePathSuffix(data.modelUrl)this.$nextTick(() => {this.initThreeWeb(data)})},// H5方法 Start// 加载初始化initThreeWeb(data) {const that = thislet 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 = objthat.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.ycamera.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 = scenethis.renderer = rendererthis.camera = camerathis.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 = nullconst last_len = name.lastIndexOf('.')const len = name.lengthsuffix = 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 defaultconst 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 blueconst groundColor = 0xB97A20; // brownish orangeconst 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);}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！