手把手教你在微信小程序中使用three.js(保姆级教程)
1.首先引入下载材料,最后有完整源码
默认你很熟悉小程序开发
直接搜索three.weapp.js官网下载,具体那里下载的我也忘记了
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使用
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() }) },
3.初始化场景这些
// 场景,相机,渲染器,控制器 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模型的渲染了
渲染模型的代码如下:
// 添加测试模型 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. 话不多少,可能还有一些人看的云里雾里的,直接上源码
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的文章就介绍到这了,更多相关微信小程序使用three.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
微信小程序事件对象中e.target和e.currentTarget的区别详解
这篇文章主要介绍了微信小程序事件对象中e.target和e.currentTarget的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05JavaScript实现清空(重置)文件类型INPUT元素值的方法
这篇文章主要介绍了JavaScript实现清空(重置)文件类型INPUT元素值的方法,结合实例形式分析了javascript清空input文本框的常用方法与实现技巧,需要的朋友可以参考下2016-11-11Javascript 实现广告后加载 可加载百度谷歌联盟广告
本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。2016-05-05wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
本文给大家带来的是一款非常不错的富文本编辑器WangEditor,他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片,而且代码量很少,下面我们就来分析下他是如何实现的呢2015-05-05js判断样式className同时增加class或删除class
用正则表达式判断多个class之间是否存在真正的class(前后空格的处理)然后增加class删除class,本文给予实现方法,感兴趣的朋友可以了解下,或许对你有所帮助2013-01-01
最新评论