1、安装 Three.js

将 Three.js 库引入到你的 UniApp 项目中。可以通过 npm 进行安装：

npm install three

2、编写代码

在 UniApp 的页面中编写代码来加载和渲染 OBJ 和 MTL 文件。以下是一个示例代码：

<template>
  <view>
    <!-- 用于渲染 Three.js 场景的 canvas -->
    <canvas id="threeCanvas" style="width: 100%; height: 500px;"></canvas>
  </view>
</template>

<script>
import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';

export default {
  onReady() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      const canvas = document.getElementById('threeCanvas');
      const renderer = new THREE.WebGLRenderer({ canvas: canvas });
      renderer.setSize(canvas.clientWidth, canvas.clientHeight);

      // 创建灯光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);

      // 加载 MTL 文件
      const mtlLoader = new MTLLoader();
      mtlLoader.load(
        // MTL 文件的路径
        'your-model.mtl',
        (materials) => {
          materials.preload();

          // 加载 OBJ 文件
          const objLoader = new OBJLoader();
          objLoader.setMaterials(materials);
          objLoader.load(
            // OBJ 文件的路径
            'your-model.obj',
            (object) => {
              scene.add(object);
            },
            (xhr) => {
              console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
            },
            (error) => {
              console.log('An error happened: ', error);
            }
          );
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
        },
        (error) => {
          console.log('An error happened: ', error);
        }
      );

      // 渲染循环
      const animate = () => {
        requestAnimationFrame(animate);

        // 可以在这里添加物体的动画效果
        // object.rotation.x += 0.01;
        // object.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    },
  },
};
</script>

3、小程序注意事项

document.getElementById 在小程序环境下不可用。
在小程序里，不能使用document.getElementById来获取 DOM 元素。你需要借助uni.createSelectorQuery来获取canvas元素。