创建一个场景

由于本项目并没有改变 three.js 的源码，所以在使用上和官方文档所描述的基本没有差异，不过由于小程序环境不支持动态添加 dom 元素和只能异步获取元素的特性，所以在初始化 WebGLRenderer 的时候必须传递 canvas 对象。

我们在 @minisheep/three-platform-adapter 提供了 useCanvas api 用于返回基本标准（至少满足 three.js 用例）的 HTMLCanvasElement 以供 Renderer 使用。

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

main.vuetemplatecss

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>

vue

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

vue

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

创建一个场景 ​

创建一个场景