在微信小程序中怎么使用three.js

本篇內容主要講解“在微信小程序中怎么使用three.js”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“在微信小程序中怎么使用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的方式加載線上的模型。

到此，相信大家對“在微信小程序中怎么使用three.js”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！