我的建议是使用这个库
https://github.com/deepkolos/three-platformize
为什么？我试了uniapp推荐的和threejs-miniprogram这个小程序官方库，都加载不出来我的obj模型。所有我推荐不要用obj模型最好，挺多都支持GLTF模型的，但是我不能改。
安装，使用pnpm比较快
pnpm install three-platformize以下是完整代码
<template><view class="content"><canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh;" @touchstart="touchStart"@touchmove="touchMove" @touchend="touchEnd" /></view>
</template><script>import {WechatPlatform} from 'three-platformize/src/WechatPlatform';import * as THREE from 'three-platformize';//轨道控制器import {OrbitControls} from 'three-platformize/examples/jsm/controls/OrbitControls'export default {data() {return {platform: ''};},mounted() {uni.createSelectorQuery().in(this).select('#webgl').fields({node: true}).exec(res => {console.log('res', res[0].node);const canvas = res[0].node;console.log('canvas', canvas);const platform = new WechatPlatform(canvas); // webgl canvasconsole.log('1111', platform);platform.enableDeviceOrientation('game'); // 开启DeviceOrientationTHREE.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.requestAnimationFramecanvas.requestAnimationFrame(animate);renderer.render(scene, camera);}animate();});},methods: {touchStart(e) {this.platform.dispatchTouchEvent(e);},touchMove(e) {this.platform.dispatchTouchEvent(e);},touchEnd(e) {this.platform.dispatchTouchEvent(e);}}}
</script><style></style>
)
