我的建议是使用这个库
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 canvas
console.log('1111', platform);
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();
});
},
methods: {
touchStart(e) {
this.platform.dispatchTouchEvent(e);
},
touchMove(e) {
this.platform.dispatchTouchEvent(e);
},
touchEnd(e) {
this.platform.dispatchTouchEvent(e);
}
}
}
</script>
<style>
</style>