uni-app 加载 threejs 支持 h5 和 APP

在 uni-app 中加载 Three.js 以支持 H5 和 APP 平台，可以通过以下步骤实现。以下是一个基本的代码案例，展示如何在 uni-app 项目中集成 Three.js 并创建一个简单的 3D 场景。

1. 安装 Three.js

首先，你需要安装 Three.js。由于 uni-app 支持使用 npm 包，你可以直接在项目的根目录下运行以下命令来安装：

npm install three

2. 创建 Three.js 场景

接下来，在你的 uni-app 项目中创建一个页面（例如 pages/index/index.vue），并在其中编写代码来加载和渲染 Three.js 场景。

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

<script>
import * as THREE from 'three';

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
    };
  },
  mounted() {
    this.initThree();
    this.animate();
  },
  methods: {
    initThree() {
      // 创建场景
      this.scene = new THREE.Scene();

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

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas });
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      // 创建一个立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);

      window.addEventListener('resize', this.onWindowResize, false);
    },
    animate() {
      requestAnimationFrame(this.animate);

      // 旋转立方体
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
  },
};
</script>

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

3. 注意事项

• 确保在 manifest.json 中配置了正确的 app-plus 和 h5 相关设置。
• 由于 uni-app 在不同平台上的行为可能有所不同，特别是关于 canvas 的处理，你可能需要根据具体平台进行微调。
• 在 APP 端，你可能需要处理更多的生命周期事件和资源管理，以确保应用的性能和稳定性。

以上代码展示了如何在 uni-app 中集成 Three.js 并创建一个简单的 3D 场景。你可以根据需求进一步扩展和定制这个基础示例。