小程序展示3D模型

 <canvas id="webgl" canvas-id="webgl"  type="webgl" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" >" data-report-click="{"spm":"1001.2101.3001.4259"}">

• 1

这里也加了手势滑动，自动旋转 3d的类型是gltf

import * as THREE from '../../../libs/three.weapp.js'import gLTF from '../../../jsm/loaders/GLTFLoader'import { OrbitControls } from '../../../jsm/controls/OrbitControls'let window = THREE.globallet GLTFLoader = gLTF(THREE)var camera, scene, renderer, model,canvas;canvas3D(){    let that = this    var query = wx.createSelectorQuery();        query.select('#webgl').node().exec((res) => {          let tempCanvas  = res[0].node;          // 设置背景透明          console.log(res)          that.setData({            canvasId:res[0].node._canvasId          })            // // 设置背景透明            // console.log(res)          tempCanvas.getContext('webgl', {            alpha: true          }),          canvas = new THREE.global.registerCanvas(tempCanvas)                    // if (canvas != undefined) {            //  canvas.> canvas._> canvas.requestAnimationFrame(that.animate);            //加载动画            that.createSceneAndAnimation(canvas);                      // }                        });  },  emptyScene:function() {    console.log('emptyScene.......')    if(this.requestAnimationFrame){      cancelAnimationFrame(this.requestAnimationFrame);    }        if(scene){      //清理场景对象      var allChildren = scene.children;      var lastObject = allChildren[allChildren.length-1];      while(lastObject){        console.log(lastObject)        scene.remove(lastObject);        lastObject = allChildren[allChildren.length-1];      }      this.scene = null;      this.camera = null;    }},    createSceneAndAnimation: function(canvas){    console.log('createSceneAndAnimation..........')    let that = this;    renderer = new THREE.WebGLRenderer({ antialias: true });		renderer.setPixelRatio(window.devicePixelRatio);		// renderer.setSize(canvas.> true;    //设置相机    camera = new THREE.PerspectiveCamera(45, canvas._> new OrbitControls(camera, renderer.domElement);    camera.position.set(0, 3, 12);    controls.update();    camera.lookAt(new THREE.Vector3(0,0,0));        // camera.lookAt(0, 1, 0);    const fov = 45;		const aspect = 2;  // the canvas default		const near = 0.1;		const far = 100;    // camera = new THREE.PerspectiveCamera(fov, canvas._> new THREE.Scene();    // scene.background = new THREE.Color('');    //设置光线    var light = new THREE.HemisphereLight(0xffffff, 0x444444);    light.position.set(0, 20, 0);    scene.add(light);    light = new THREE.DirectionalLight(0xffffff);    light.position.set(0, 20, 10);    scene.add(light);        //加载外部模型		{      const gltfLoader = new GLTFLoader();       // console.log(res)      gltfLoader.load(this.data.productList[this.data.productListIndex].modelUrl, (gltf) => {        console.log('load ok ..........')        model = gltf.scene;        scene.add(model);      });					}    function render() {      canvas.requestAnimationFrame(render);      // mesh.rotation.x += 0.005;      // mesh.rotation.y += 0.01;      controls.update();      renderer.render(scene, camera);    }    render()    //调用动画    that.animate();  },   animate:function(time){    // console.log('animate..........')    let that = this;    // 转换为秒    time *= 0.001;     if(model) {      // 沿着Y轴旋转      model.rotation.y = time;    }    camera.aspect = canvas.clientWidth / canvas.clientHeight;    camera.updateProjectionMatrix();          renderer.render(scene, camera);    canvas.requestAnimationFrame(that.animate);  },  onUnload: function () {    this.emptyScene()    THREE.global.clearCanvas()    THREE.global.unregisterCanvas(this.data.canvasId)  },  touchStart(e) {    console.log('canvas', e)    THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)  },  touchMove(e) {    console.log('canvas', e)    THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)  },  touchEnd(e) {    console.log('canvas', e)    THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
特别声明：本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有，并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利，请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。