uni-app里如何集成three.js并实现3D模型展示的例子

在uni-app中集成Three.js并实现3D模型展示，可以通过以下步骤完成。以下是一个基本的代码示例，展示了如何在uni-app项目中集成Three.js并加载一个GLTF格式的3D模型。

步骤一：安装Three.js

首先，需要在uni-app项目中安装Three.js。可以使用npm或yarn进行安装：

npm install three
npm install @react-three/drei --save  # 可选，用于加载GLTF模型

注意：uni-app默认支持npm包管理，但可能需要配置webpack或vite来正确解析依赖。

步骤二：创建Three.js场景

在pages/index/index.vue文件中，添加以下代码来创建Three.js场景并加载3D模型：

<template>
  <view class="container">
    <canvas canvas-id="threeCanvas" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const canvas = document.getElementById('threeCanvas');
      const renderer = new THREE.WebGLRenderer({ canvas });
      renderer.setSize(window.innerWidth, window.innerHeight);

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      const ambientLight = new THREE.AmbientLight(0x404040);
      scene.add(ambientLight);

      const loader = new GLTFLoader();
      loader.load('path/to/your/model.glb', (gltf) => {
        scene.add(gltf.scene);
        render();
      }, undefined, (error) => {
        console.error(error);
      });

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

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

      animate();

      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>

注意事项

1. 路径配置：确保path/to/your/model.glb是正确的模型路径。
2. 依赖管理：uni-app可能需要额外配置webpack或vite来处理Three.js的依赖，特别是examples目录下的文件。
3. 性能优化：在移动设备或低性能设备上展示3D模型时，可能需要进行性能优化，如减少模型复杂度、降低渲染频率等。

以上代码展示了如何在uni-app中集成Three.js并加载一个简单的3D模型。根据实际需求，可以进一步扩展和优化代码。