小程序使用three.js开发VR场景漫游

最新推荐文章于 2025-11-14 09:46:02 发布

原创

最新推荐文章于 2025-11-14 09:46:02 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vr #微信 #小程序

下载所需要文件，参考：GitHub - yannliao/threejs-example-for-miniprogram: 这是一个 three.js 在微信小程序里的使用示例

引入js文件

import * as THREE from '../../libs/three.weapp.js'
import * as TWEEN from '../../libs/tween.umd.js'
import { OrbitControls } from '../../jsm/controls/OrbitControls'
var isRotate = true //自动旋转
var canvas,camera,renderer,controls,scene,new_scene,geometry,texture,material,mesh //3d参数
var canvas_2d,ctx_2d //平面画板参数
var tagMeshs=[],currentTag=0 //标记参数

初始化3d场景

initThreeD(){
    let that = this
    let picture = this.data.images[this.data.current].thumb_src
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        let canvasId = res[0].node._canvasId
        canvas = THREE.global.regi