快捷導(dǎo)航

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

更新時(shí)間：2023年03月02日 09:11:10 作者：小周不會(huì)three.js哇

Three.js是一款運(yùn)行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場(chǎng)景,包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用three.js的保姆級(jí)教程,需要的朋友可以參考下

1.首先引入下載材料，最后有完整源碼
2.將three.js和canvas綁定
3.初始化場(chǎng)景這些
4.到這一步你已經(jīng)完成了初始化了接下來(lái)就是對(duì)gltf模型的渲染了
5. 話不多少，可能還有一些人看的云里霧里的，直接上源碼
6.注意事項(xiàng)
7.效果查看
總結(jié)

1.首先引入下載材料，最后有完整源碼

默認(rèn)你很熟悉小程序開(kāi)發(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.初始化場(chǎng)景這些

// 場(chǎng)景，相機(jī)，渲染器，控制器
let scene, camera, renderer, controls, canvas,
 
  // 初始化場(chǎng)景
  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)
  },
 
  // 初始化相機(jī)
  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)完成了初始化了接下來(lái)就是對(duì)gltf模型的渲染了

渲染模型的代碼如下：

 // 添加測(cè)試模型
  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'
 
// 場(chǎng)景，相機(jī)，渲染器，控制器
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()
      })
  },
 
  // 初始化場(chǎng)景
  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)
  },
 
  // 初始化相機(jī)
  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)用
  },
 
 
 
  // 添加測(cè)試模型
  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)
    })
  },
 
 
 
  // 動(dòng)畫幀函數(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è)面自適應(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ù)：小程序初始化完成時(shí)觸發(fā)，全局只觸發(fā)一次
  onLoad: function () {
    this.bindThree()
  },
  onUnload: function () {
    //清理global中的canvas對(duì)象
    THREE.global.clearCanvas()
 
    THREE.global.unregisterCanvas(this.data.canvasId)
  },
 
})