记录--uniapp微信小程序引入threeJs并导入模型

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

1
2
3
我的需求是使用uniapp写微信小程序,在小程序中使用threeJs就行了,目前暂不考虑兼容app什么的。
1.引入小程序版的threejs库实现
2.使用webview实现(推荐)

重点

我的建议是使用这个库
https://github.com/deepkolos/three-platformize
为什么?我试了uniapp推荐的和threejs-miniprogram这个小程序官方库,都加载不出来我的obj模型。所有我推荐不要用obj模型最好,挺多都支持GLTF模型的,但是我不能改。

使用three-platformize加载obj模型的案例:

 核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
html:
<canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh;"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
/>
script:
<script>
    import * as THREE from 'three-platformize';
    import { WechatPlatform } from 'three-platformize/src/WechatPlatform';
    import { OBJLoader } from 'three-platformize/examples/jsm/loaders/OBJLoader';
    import { GLTFLoader } from 'three-platformize/examples/jsm/loaders/GLTFLoader';
    import {OrbitControls} from 'three-platformize/examples/jsm/controls/OrbitControls';
    export default {
        data() {
            return {
                canvas:null,
                camera:null,
                scene:null,
                renderer:null,
                model:null,
                controls:null,
                loopIndex:null
            }
        },
        onLoad() {
 
        },
        methods: {
            async init() {
                const { canvas }= await this.getCanvas();
                this.canvas = canvas;
                const platform = new WechatPlatform(canvas); // webgl canvas
                platform.enableDeviceOrientation('game'); // 开启DeviceOrientation
                THREE.PLATFORM.set(platform);
                this.platform = platform;
                this.renderModel();
            },
            //获取画布
            async getCanvas(delay = 200) {
              return new Promise((resolve, reject) => {
                const t = setTimeout(() => {
                  clearTimeout(t);
                  uni.createSelectorQuery().in(this)
                    .select('#webgl')
                    .fields({ node: true })
                    .exec((res) => {
                        console.log('res',res)
                      if (res && res[0] && res[0].node) {
                        const canvas = res[0].node;
                        resolve({ canvas });
                      } else {
                        reject("获取canvas失败");
                      }
                    });
                }, delay);
              });
            },
            renderModel () {
                this.camera = new THREE.PerspectiveCamera(45, this.canvas.width / this.canvas.height, 0.25, 100);
                this.camera.position.set(- 5, 3, 10);
                this.camera.lookAt(new THREE.Vector3(0, 2, 0));
                this.scene = new THREE.Scene();
                this.scene.background = new THREE.Color(0xe0e0e0);
                this.scene.fog = new THREE.Fog(0xe0e0e0, 20, 100);
                this.clock = new THREE.Clock();
                // lights
                var light = new THREE.HemisphereLight(0xffffff, 0x444444);
                light.position.set(0, 20, 0);
                this.scene.add(light);
                // 改变外壳颜色
                var AmbientLight = new THREE.AmbientLight(0x815800); // 环境光
                this.scene.add(AmbientLight);
                // 平行光
                light = new THREE.DirectionalLight(0xffffff);
                light.position.set(0, 20, 10);
                this.scene.add(light);
                // // ground
                // var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
                // mesh.rotation.x = - Math.PI / 2;
                // this.scene.add(mesh);
                // var grid = new THREE.GridHelper(200, 40, 0x000000, 0x000000);
                // grid.material.opacity = 0.6;
                // grid.material.transparent = true;
                // this.scene.add(grid);
                // model
                var loader = new OBJLoader();
                loader.load('http://localhost:8888/obj3/file.obj', (obj) => {
                    console.log("obj+=")
                    console.log(obj)
                    // console.log(this.model)
                    obj.position.set(0, -2, 0);//模型摆放的位置
                    obj.scale.set(0.2, 0.2, 0.2);
                    // this.model = obj;
                    this.scene.add(obj);
                }, undefined, function (e) {
                    console.log("模型加载错误")
                    console.error(e);
                });
                // var loader = new GLTFLoader();
                //  loader.load('https://dtmall-tel.alicdn.com/edgeComputingConfig/upload_models/1591673169101/RobotExpressive.glb', (gltf) => {
                //      this.model = gltf.scene;
                //      this.scene.add(this.model);
                //  }, undefined, function (e) {
                //      console.error(e);
          //       });
                // var geometry = new THREE.BoxGeometry( 5, 5, 5 );
                // var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
                // var mesh = new THREE.Mesh( geometry, material );
                // this.scene.add(mesh);
         
                this.renderer = new THREE.WebGLRenderer({antialias: true });
                this.renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
                this.renderer.setSize(this.canvas.width, this.canvas.height);
                //this.renderer.outputEncoding = true;
                this.renderer.gammaFactor = 2.2;
         
                this.controls = new OrbitControls(this.camera, this.renderer.domElement );
                this.camera.position.set( 5, 5, 10 );
                this.animate();
            },
        animate() {
                this.loopIndex = this.canvas.requestAnimationFrame(this.animate);
                this.renderer.render(this.scene, this.camera);
                this.controls.update();
            },
         
            touchStart(e) {
                this.platform.dispatchTouchEvent(e);
            },
            touchMove(e) {
                this.platform.dispatchTouchEvent(e);
            },
            touchEnd(e) {
                this.platform.dispatchTouchEvent(e);
            }
        },
        mounted() {
            this.$nextTick(()=>  {
                  this.init();
                });
        }
    }
</script>

上面的案例中使用了两个模型,一个obj模型,obj模型的地址是自己写的本地服务器地址,需要自己配置,GLTF模型地址是网络地址,可以把注释解开查看。

注意点

1.加载外部模型与threeJs官网api是一致的
2.使用此方法加载外部模型,可能在真机调试时遇到模型不展示,或者微信闪退的情况(原因未知)

webview实现引入threejs库

效果图

实现:
1.使用vue实现threejs导入obj模型(pc端可完美实现),
2.在webview中引入相应的模型展示地址,

完结,就这两步即可,但是我是动态加载,所以在加载模型的时候,你需要在小程序端传值给pc端,让pc端加载相应的模型,这里就只需要用get在地址栏中传参就行了。

以下两个方法可能会用到:
1.模型大小自适应

1
2
3
4
5
6
7
8
9
10
setScaleToFitSize (obj) {
      const boxHelper = new THREE.BoxHelper(obj);
      boxHelper.geometry.computeBoundingBox();
      const box = boxHelper.geometry.boundingBox;
      const maxDiameter = Math.max((box.max.x - box.min.x), (box.max.y - box.min.y), (box.max.z - box.min.z));
      const scaleValue = camera.position.z / maxDiameter;
      obj.position.set(0, -10, 0);//模型摆放的位置
      obj.scale.set(scaleValue, scaleValue, scaleValue);
      scene.add(obj);
    },

2.禁止小程序展示webview时候向下拉动:
mounted中添加:

1
2
3
document.body.addEventListener('touchmove', function (e) {
        e.preventDefault();
      }, { passive: false });

本文转载于:

https://blog.csdn.net/hzqzzz/article/details/126428029

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

posted @   林恒  阅读(2036)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
欢迎阅读『记录--uniapp微信小程序引入threeJs并导入模型』
点击右上角即可分享
微信分享提示