创建一个场景

由于本项目并未修改 three.js 的源码，因此其使用方式与 官方文档 基本一致。唯一的区别主要体现在获取 canvas 对象的方式上。

获取 canvas 对象

由于小程序环境不支持动态添加 dom 元素和只能异步获取元素的特性，所以在初始化 WebGLRenderer 的时候必须显式传递 canvas 对象。

我们可以通过 @minisheep/three-platform-adapter 提供的 adapter 对象的 useCanvas 函数，获取一个满足 three.js 最低要求的 HTMLCanvasElement 实例, 以供 Renderer 使用

实现场景

例如 creating-a-scene 里的例子只需进行以下修改就可以完美运行，以在 uni-app 中运行为例：

main.vue

<script setup>
  import * as THREE from 'three';
  import { adapter } from '@minisheep/three-platform-adapter'; 

  adapter.useCanvas('#canvas').then(({ canvas, requestAnimationFrame }) => {  
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
    const renderer = new THREE.WebGLRenderer({ canvas }); 
    renderer.setSize(canvas.clientWidth, canvas.clientHeight); 

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  }); 
</script>

template

<template>
  <canvas type="webgl2" id="canvas"/>
</template>

css

<style>
  canvas {
    width: 100vw;
    height: 100vh;
  }
</style>