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

更新时间：2023年03月02日 09:11:10 作者：小周不会three.js哇

Three.js是一款运行在浏览器中的3D引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,下面这篇文章主要给大家介绍了关于如何在微信小程序中使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp小程序和h5如何使用three.js详解

数据库管理工具PHPMyAdmin
这篇文章主要为大家介绍了数据库管理工具PHPMyAdmin使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
js判断文件格式及大小的简单实例(必看)
下面小编就为大家带来一篇js判断文件格式及大小的简单实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
HTML中Select不用Disabled实现ReadOnly的效果
Disabled ReadOnly之家的联系
2008-04-04
表单切换，用回车键替换Tab健(不支持IE)
表单切换，用回车键替换Tab健。input的属性tab的值表示切换的顺序，这个值必须是连续的，并且不能重复。目前不支持IE
2011-07-07
浅谈JS原型对象和原型链
这篇文章主要为大家详细介绍了JS原型对象和原型链，感兴趣的小伙伴们可以参考一下
2016-03-03
再次谈论Javascript中的this
javascript中的this应用非常广泛，对js中this总是似是而非的感觉，今天小编豁然开朗，然后再次给大家谈论js中的this关键，感兴趣的朋友跟着小编一起看看吧
2016-06-06
js简单实现根据身份证号码识别性别年龄生日
根据身份证号码识别性别年龄生日，目前就有一个这样的需求，那么接下来为大家介绍下使用js是如何实现的，感兴趣的朋友不要错过
2013-11-11
JavaScript第一篇之实现按钮全选、功能
这篇文章主要介绍了JavaScript第一篇之实现按钮全选、功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
JS技巧Canvas性能优化脏矩形渲染实例详解
这篇文章主要为大家介绍了JS技巧Canvas 性能优化脏矩形渲染实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
深入浅析knockout源码分析之订阅
Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。这篇文章主要介绍了knockout源码分析之订阅的相关资料,需要的朋友可以参考下
2016-07-07