微信小程序使用ThreeX开发3d

注意：本代码是用uniapp开发微信小程序，模型使用.glb格式，以下出现（glb模型压缩）代表改代码是使用压缩时需要使用的，不压缩可以不写

Demo:gitee地址焦明玉/vue2_threex_demo

1.微信小程序后台添加Threex插件

2.manifest.json

/* 小程序特有相关 */"mp-weixin": {"appid": "wx3402c0e00773fc5a","setting": {"urlCheck": false,"es6": true, // glb模型压缩"minified": false},"usingComponents": true,"workers": { // glb模型压缩"path": "workers","isSubpackage": true},"plugins": {"ThreeX": {"version": "3.1.0","provider": "wx5d6376b4fc730db9","export": "threex.js"}}},

3.threex.js

module.exports = {getApp() {return getApp()},getCurrentPages() {return getCurrentPages()},wx_downloadFile() {return wx.downloadFile},wx_request() {return wx.request}
}

4.vue.config.js.js (glb模型压缩)


const path = require('path');module.exports = {configureWebpack: {devServer: {disableHostCheck: true},resolve: {alias: {'@workers': path.resolve(__dirname, 'workers')}}},chainWebpack: config => {config.module.rule('js').include.add(path.resolve(__dirname, 'workers')).end().use('babel-loader').loader('babel-loader').tap(options => {// modify the options...return options;});}
};

5.workers目录放置在根目录与pages同级(glb模型压缩)

6.jsm_weixin目录放置在pages下

7.页面使用

<template><view id="page"><canvas id="canvas_webgl2" type="webgl2" @touchstart="webgl_touch" @touchmove="webgl_touch"@touchend="webgl_touch" @touchcancel="webgl_touch"></canvas></view>
</template><script>const THREE = requirePlugin("ThreeX")const {document,window,HTMLCanvasElement,requestAnimationFrame,cancelAnimationFrame,core,Event,Event0} = THREE.DHTMLimport {OrbitControls} from '../jsm_weixin/controls/OrbitControls.js';import {OrbitControls0} from '../jsm_weixin/controls/OrbitControls0.js';import {GLTFLoader} from '../jsm_weixin/loaders/GLTFLoader.js';import {DRACOLoader} from '../jsm_weixin/loaders/DRACOLoader.js'; // glb模型压缩let requestId;export default {data() {return {canvas: {},renderer: {},}},onUnload() {cancelAnimationFrame(requestId, this.canvas)this.worker && this.worker.terminate()if (this.canvas) this.canvas = nullsetTimeout(() => {if (this.renderer instanceof THREE.WebGLRenderer) {this.renderer.dispose()this.renderer.forceContextLoss()this.renderer.context = nullthis.renderer.domElement = nullthis.renderer = null}}, 10)},onLoad() {uni.showLoading({title: '模型加载中...',mask: true})document.createElementAsync("canvas", 'webgl2', this).then(canvas => {this.canvas = canvasthis.run(canvas).then()})},methods: {// 手指事件webgl_touch(e) {const web_e = (window.platform == "devtools" ? Event : Event0).fix(e)this.canvas.dispatchEvent(web_e)},// 初始化渲染模型async run(canvas) {// 渲染器this.renderer = new THREE.WebGLRenderer({antialias: true,canvas});this.renderer.setPixelRatio(window.devicePixelRatio);this.renderer.setSize(window.innerWidth, window.innerHeight);this.renderer.outputEncoding = THREE.sRGBEncoding;// 场景let scene = new THREE.Scene();scene.background = new THREE.Color(0xe7e5e0);// 相机let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);camera.position.set(7, 7, 7);camera.lookAt(scene.position);// 控制器const controls = new(window.platform == "devtools" ? OrbitControls : OrbitControls0)(camera, this.renderer.domElement);controls.enablePan = true;controls.enableZoom = true;controls.update();// 坐标系	x轴:红色;Y轴:绿色;Z轴:蓝色// let axes = new THREE.AxesHelper(5);// scene.add(axes);// 环境光const light0 = new THREE.AmbientLight(0xf7f7dd, 1);scene.add(light0);// 平行光// 平行光源1	头，右const dLight1 = new THREE.DirectionalLight(0xFFFFFF, 0.5);dLight1.position.set(5, 0, 10);scene.add(dLight1);// 平行光源2	顶，左，后(补充光)const dLight2 = new THREE.DirectionalLight(0xFFFFFF, 0.5);dLight2.position.set(-3, 5, 10);scene.add(dLight2);// 平行光源3	后，左const dLight3 = new THREE.DirectionalLight(0xFFFFFF, 0.5);dLight3.position.set(-5, 0, -10);scene.add(dLight3);// 加载模型// let dracoLoader = new DRACOLoader(); // glb模型压缩// dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');  // glb模型压缩let loader = new GLTFLoader();// loader.setDRACOLoader(dracoLoader);  // glb模型压缩// 压缩：https://zxgj.sxgokit.com:8443/profile/static/3d/3dmodel/3dmodel/DRACO_Car.glb// 贴图处理：https://zxgj.sxgokit.com:8443/profile/static/3d/3dmodel/3dmodel/car1.glbloader.load('https://zxgj.sxgokit.com:8443/profile/static/3d/3dmodel/3dmodel/car1.glb',function(gltf) {gltf.scene.position.set(0, 1.5, -0.5);gltf.scene.scale.set(1.5, 1.5, 1.5);scene.add(gltf.scene);uni.hideLoading()},null,function(e) {uni.hideLoading();uni.showToast({title: '模型加载失败!',icon: 'none'})console.error(e);});// 动画及渲染const animate = () => {requestAnimationFrame(() => {animate();});this.renderer.render(scene, camera);};animate();},}}
</script>
<style scoped>page,canvas {overflow: hidden;width: 100%;height: 100vh;background-color: #caeeef;}
</style>

接下来说一下我遇到的问题：

1.模型加载贴图丢失，贴图太大了最好每张图不超过2kb,1kb最好。使用压缩可以正常显示，但是压缩会引进来约500kbjs代码

2.千万记得模板不要动，不要动，不要动。(模板有问题canvas会报错)下面的js可以修改

3.使用了压缩没有开启es6转es5会报错$gwx啥

4.这玩意儿很耗模拟器内存，模型体积越小越好，太大可能会加载不出来或者出现贴图丢失，模型渲染出来就是黑色