手把手教你在微信小程序中使用three.js(保姆級教程)
1.首先引入下載材料,最后有完整源碼
默認(rèn)你很熟悉小程序開發(fā)
直接搜索three.weapp.js官網(wǎng)下載,具體那里下載的我也忘記了
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) //燈光 黃光環(huán)境 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 // 設(shè)置阻尼,需要在 update 調(diào)用 },
4.到這一步 你已經(jīng)完成了初始化了接下來就是對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) //燈光 黃光環(huán)境 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 // 設(shè)置阻尼,需要在 update 調(diào)用 }, // 添加測試模型 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) }) }, // 動畫幀函數(shù) 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) }, // 初始化函數(shù) init() { this.initScene() this.initCamera() this.initRenderer() this.initControls() this.addGuangzhouta() this.onWindowResize() this.animate() }, // 頁面自適應(yīng) 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) }, // 生命周期函數(shù):小程序初始化完成時觸發(fā),全局只觸發(fā)一次 onLoad: function () { this.bindThree() }, onUnload: function () { //清理global中的canvas對象 THREE.global.clearCanvas() THREE.global.unregisterCanvas(this.data.canvasId) }, })
6.注意事項
到這一步之后你就可以自己寫模型丟里面了,gltf加載器和pc的用法是一樣的,目前我這里就提供一個測試用的模型吧
目前代碼里沒有提供滑動的方法,也沒有提供適配任意gltf模型的辦法,需要注意的是小程序中沒辦法加載本地模型,只能通過https的方式加載線上的模型。
7.效果查看
總結(jié)
到此這篇關(guān)于在微信小程序中使用three.js的文章就介紹到這了,更多相關(guān)微信小程序使用three.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理
本文主要介紹了小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07簡單的兩種Extjs formpanel加載數(shù)據(jù)的方式
這篇文章介紹了兩種Extjs formpanel加載數(shù)據(jù)的方式,有需要的朋友可以參考一下2013-11-11javascript實現(xiàn)時間日期的格式化的方法匯總
這篇文章主要介紹了javascript實現(xiàn)時間日期的格式化的方法匯總,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08layui實現(xiàn)tab的添加拒絕重復(fù)的方法
今天小編就為大家分享一篇layui實現(xiàn)tab的添加拒絕重復(fù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js 將圖片連接轉(zhuǎn)換成base64格式的簡單實例
下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JavaScript高級程序設(shè)計 讀書筆記之九 本地對象Array
本地對象Array,數(shù)組等操作函數(shù)2012-02-02