手把手教你在微信小程序中使用three.js(保姆级教程)

网友投稿 584 2023-11-12

−目录1.首先引入-材料，最后有完整源码2.将three.js和canvas绑定3.初始化场景这些4.到这一步 你已经完成了初始化了接下来就是对gltf模型的渲染了5. 话不多少，可能还有一些人看的云里雾里的，直接上源码 6.注意事项7.效果查看总结

1.首先引入-材料，最后有完整源码

默认你很熟悉小程序开发

手把手教你在微信小程序中使用three.js(保姆级教程)

直接搜索three.weapp.js官网-，具体那里-的我也忘记了

?
1
2
3
import * as THREE from ../../libs/three.weapp.js
import { OrbitControls } from ../../libs/OrbitControls.js
import GLTF from ../../libs/GLTFLoader.js

2.将three.js和canvas绑定

在小程序的生命周期中onLoad使用

3.初始化场景这些

?
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
// 场景，相机，渲染器，控制器
let scene, camera, renderer, controls, canvas,
// 初始化场景
initScene() {
scene = new THREE.Scene()
// scene.background = new THREE.Color(0xffffff)
//灯光 黄光环境
scene.add(new THREE.AmbientLight(0xffffff))
scene.background = new THREE.Color(0xaa000000)
},
// 初始化相机
initCamera() {
camera = new THREE.PerspectiveCamera(
75,
canvas.width / canvas.height,
0.1,
4000
)
camera.position.set(0, 70, 1200)
// camera.lookAt(0, 0, 0)
},
// 初始化渲染器
initRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(
wx.getSystemInfoSync().windowWidth,
wx.getSystemInfoSync().windowHeight
)
},
// 初始化控制器
initControls() {
controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 设置阻尼，需要在 update 调用
},

4.到这一步 你已经完成了初始化了接下来就是对gltf模型的渲染了

渲染模型的代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
// 添加测试模型
addGuangzhouta() {
loader.load(this.data.testUrl, (gltf) => {
// 位置更正
gltf.scene.position.set(200, 580, -700)
gltf.scene.scale.set(2, 2, 2)
scene.add(gltf.scene)
})
},

5. 话不多少，可能还有一些人看的云里雾里的，直接上源码 

?
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
import * as THREE from ../../libs/three.weapp.js
import { OrbitControls } from ../../libs/OrbitControls.js
import GLTF from ../../libs/GLTFLoader.js
// 场景，相机，渲染器，控制器
let scene, camera, renderer, controls, canvas, textureGuangzhouta
// gltf加载器
let GLTFloader = GLTF(THREE)
const loader = new GLTFloader()
Page({
data: {
canvasId: null,
testUrl: https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf
},
// 将微信dom和three.js绑定
bindThree() {
wx.createSelectorQuery()
.select(#c)
.node()
.exec((res) => {
let canvasId = res[0].node._canvasId
canvas = THREE.global.registerCanvas(canvasId, res[0].node)
this.setData({ canvasId })
this.init()
})
},
// 初始化场景
initScene() {
scene = new THREE.Scene()
// scene.background = new THREE.Color(0xffffff)
//灯光 黄光环境
scene.add(new THREE.AmbientLight(0xffffff))
scene.background = new THREE.Color(0xaa000000)
},
// 初始化相机
initCamera() {
camera = new THREE.PerspectiveCamera(
75,
canvas.width / canvas.height,
0.1,
4000
)
camera.position.set(0, 700, 1700)
// camera.lookAt(0, 0, 0)
},
// 初始化渲染器
initRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(
wx.getSystemInfoSync().windowWidth,
wx.getSystemInfoSync().windowHeight
)
},
// 初始化控制器
initControls() {
controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 设置阻尼，需要在 update 调用
},
// 添加测试模型
addGuangzhouta() {
loader.load(this.data.testUrl, (gltf) => {
// 位置更正
gltf.scene.position.set(200, 580, -700)
gltf.scene.scale.set(2, 2, 2)
scene.add(gltf.scene)
})
},
// 动画帧函数
animate() {
canvas.requestAnimationFrame(this.animate)
if (textureGuangzhouta) {
textureGuangzhouta.offset.y -= 0.009
// console.log(textureGuangzhouta.offset.y)
if (textureGuangzhouta.offset.y < -0.5) {
textureGuangzhouta.offset.y = 0
}
}
controls.update()
renderer.render(scene, camera)
},
// 初始化函数
init() {
this.initScene()
this.initCamera()
this.initRenderer()
this.initControls()
this.addGuangzhouta()
this.onWindowResize()
this.animate()
},
// 页面自适应
onWindowResize() {
console.log(canvas.width)
// camera.aspect = window.innerWidth / window.innerHeight
camera.aspect =
wx.getSystemInfoSync().windowWidth / wx.getSystemInfoSync().windowHeight
camera.updateProjectionMatrix()
renderer.setSize(canvas.width, canvas.height)
},
// 生命周期函数：小程序初始化完成时触发，全局只触发一次
onLoad: function () {
this.bindThree()
},
onUnload: function () {
//清理global中的canvas对象
THREE.global.clearCanvas()
THREE.global.unregisterCanvas(this.data.canvasId)
},
})

6.注意事项

到这一步之后你就可以自己写模型丢里面了，gltf加载器和pc的用法是一样的，目前我这里就提供一个测试用的模型吧

目前代码里没有提供滑动的方法，也没有提供适配任意gltf模型的办法，需要注意的是小程序中没办法加载本地模型，只能通过https的方式加载线上的模型。

7.效果查看

总结

到此这篇关于在微信小程序中使用three.js的文章

您可能感兴趣的文章:uniapp小程序和h5如何使用three.js详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 js 微信小程序 小程序
上一篇:小程序获取用户信息的两种方法详解(getUserProfile和头像昵称填写)
下一篇:微信小程序实现手势解锁的示例详解
相关文章

 发表评论

暂时没有评论，来抢沙发吧~