公用js 文件在我 账号下载里 有可以去下载一下
下在地址

 <canvas id="webgl" canvas-id="webgl"  type="webgl" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" style="width: 750rpx;height: 720rpx"></canvas>

这里也加了手势滑动，自动旋转 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.global
let 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.width 和canvas.style都需要设置，否则无法显示渲染
            canvas.width = canvas._width;
            canvas.height = canvas._height;
    
            //开启帧渲染
            requestAnimationFrame = 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.width, canvas.height);
    renderer.gammaOutput = true;
    //设置相机
    camera = new THREE.PerspectiveCamera(45, canvas._width/ canvas._height, 0.1, 100);
    const controls = 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._width/ canvas._height, near, far);
    // camera.position.set(-5, 0, 5);
    // // camera.position.set(0, 10, 20);
    // camera.lookAt(new THREE.Vector3(0, 2, 0));

    scene = 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)
      //this.data.productList[this.data.productListIndex].modelUrl这是我的模型地址从后端拿的 你要改成自己的地址
      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)
  },