uniapp小程序和h5如何使用three.js详解

const  THREE=require('@/static/js/three.js');
import {
OrbitControls
} from '@/static/js/lib/controls/OrbitCon

yarn add three-platformize

var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
let t = document.getElementById('content');
t.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement)
function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
}
animate();

import * as THREE from 'three-platformize';
//轨道控制器
import { OrbitControls } from 'three-platformize/examples/jsm/controls/OrbitControls'

uni.createSelectorQuery()
.in(this)
.select('#webgl')
.fields({ node: true })
.exec(res => {
        console.log(res[0].node);
});

const canvas = res[0].node;
const platform = new WechatPlatform(canvas); // webgl canvas
platform.enableDeviceOrientation('game'); // 开启DeviceOrientation
THREE.PLATFORM.set(platform);
this.platform = platform;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
//注意,这里必须要添加一个{ canvas: canvas },不然会报createElementNS错误
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(canvas.width, canvas.height);
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
    //这里不再是requestAnimationFrame而是canvas.requestAnimationFrame
    canvas.requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();