微信小程序 加载3D模型

技术栈：Three.js 

插件：ThreeX

要求：模型格式GLB   需要挂载在服务器或者是个链接都可以

文件目录：

jsm是本地依赖包

代码：

wxml

js

// webgl_nodes/webgl_nodes_loader_gltf_sheen.js
import {
  document,
  window,
  requestAnimationFrame,
  cancelAnimationFrame,
  Event,
  core
} from 'dhtml-weixin';
import * as THREE from '../../three/Three.js';

import {
  NodeMaterial,
  color,
  uv,
  mix,
  mul,
  checker,
  float
} from '../jsm/nodes/Nodes.js';

import {
  nodeFrame
} from '../jsm/renderers/webgl/nodes/WebGLNodes.js';

import {
  OrbitControls
} from '../jsm/controls/OrbitControls.js';
import {
  GLTFLoader
} from '../jsm/loaders/GLTFLoader.js';
import {
  RoomEnvironment
} from '../jsm/environments/RoomEnvironment.js';
import {
  GUI
} from '../jsm/libs/lil-gui.module.min.js';
// TODO: 找对应的位置
// var result = "";
var requestId
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
  },
  // Three.js
  onUnload() {
    cancelAnimationFrame(requestId, this.canvas)
    this.worker && this.worker.terminate()
    setTimeout(() => {
      if (this.renderer instanceof THREE.WebGLRenderer) {
        this.renderer.dispose()
        this.renderer.forceContextLoss()
        this.renderer.context = null
        this.renderer.domElement = null
        this.renderer = null
      }
    }, 0)
  },
  webgl_touch(e) {
    const web_e = Event.fix(e)
    //window.dispatchEvent(web_e)
    //document.dispatchEvent(web_e)
    this.canvas.dispatchEvent(web_e)
  },
  async onLoad() {
    const canvas3d = this.canvas = await document.createElementAsync("canvas", "webgl")
    var that = this

    let camera, scene, renderer, controls;

    init();
    animate();

    function init() {

      const container = document.createElement('div');
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
      camera.position.set(1, 0.4, 0);
      scene = new THREE.Scene();
      // 添加坐标轴
      const axesHelper = new THREE.AxesHelper(5);
      scene.add(axesHelper);
      // model

      new GLTFLoader()
        .load('https://obs.51jianmo.com/jmyd/user/20230421/1b70dea5-52ec-42f0-bb9d-276cdb609227.glb', function (gltf) {
          gltf.scene.scale.set(0.5, 1, 0.5);
          gltf.scene.position.set(0, 0, 0);
          scene.add(gltf.scene);

          const object = gltf.scene.getObjectByName('SheenChair_fabric');

          // Convert to NodeMaterial
          const material = NodeMaterial.fromMaterial(object.material);

          const checkerNode = checker(mul(uv(), 5));

          material.sheenNode = mix(color(0x00ffff), color(0xffff00), checkerNode);
          material.sheenRoughnessNode = checkerNode;

          object.material = material;

        });

      renderer = that.renderer = new THREE.WebGLRenderer({
        canvas: canvas3d,
        antialias: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      renderer.toneMappingExposure = 1;
      renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild(renderer.domElement);

      const environment = new RoomEnvironment();
      const pmremGenerator = new THREE.PMREMGenerator(renderer);

      scene.background = new THREE.Color("#a9988c");
      scene.environment = pmremGenerator.fromScene(environment).texture;

      controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.minDistance = 1;
      controls.maxDistance = 10;
      controls.target.set(0, 0.35, 0);
      controls.update();

      window.addEventListener('resize', onWindowResize);

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

    }

    //

    function animate() {

      requestId = requestAnimationFrame(animate);

      nodeFrame.update();

      controls.update(); // required if damping enabled

      render();

    }

    function render() {
      renderer.render(scene, camera);
    }
  }
})

演示效果：