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

Posted 智商不够_熬夜来凑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序使用three.js开发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.registerCanvas(canvasId, res[0].node)
        this.setData({ canvasId })
        camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000);
        //camera.position.z = 560;//100
        camera.position.set(0,500,600)
        scene = new THREE.Scene();
        scene.background = new THREE.Color('#F0FFFF');
        renderer = new THREE.WebGLRenderer({ antialias: true });
        controls = new OrbitControls(camera, renderer.domElement);
        controls.autoRotateSpeed = 1.0 
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;
        controls.maxZoom = 2.0
        controls.update();
        geometry = new THREE.SphereGeometry( 200,30,50);
        geometry.scale(-1,1,1)
        texture = new THREE.TextureLoader().load(picture);
        material = new THREE.MeshBasicMaterial({ map: texture });
      
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        
        function onWindowResize() {
          camera.aspect = wx.getSystemInfoSync().screenWidth / wx.getSystemInfoSync().screenHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(canvas.width, canvas.height);
        }
        function render() {
          canvas.requestAnimationFrame(render);
          //  mesh.rotation.x += 0.01;
          controls.autoRotate = isRotate
          if(isRotate){
            //mesh.rotation.y += 0.001;
            //controls.autoRotate = true // 是否自动旋转
          }
          controls.update()
          TWEEN.update()
          //that.updateTags() //更新标记
          renderer.render(scene, camera);
        }

        render()
        that.init2d()//初始化2d-canvas画板
        //初始动画
        setTimeout(function(){
          that.startAnimation()
        },1000)
        //监听窗口变化
        wx.onWindowResize((result) => {
          onWindowResize()
        })
      })
  }

初始化光源

nitLight() {
      let ambientLight;
      let directionalLight;
      ambientLight = new THREE.AmbientLight(0xffffff);
      scene.add(ambientLight);
      directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);
      directionalLight.position.set(-50, 50, 10);
      directionalLight.castShadow = true;
      directionalLight.shadow.mapSize.width = 1024;
      directionalLight.shadow.mapSize.height = 1024;
      // 为光线设置阴影属性
      directionalLight.shadow.camera.left = -50;
      directionalLight.shadow.camera.right = 50;
      directionalLight.shadow.camera.top = 50;
      directionalLight.shadow.camera.bottom = -50;
      directionalLight.shadow.camera.far = 3500;
      // 偏差率
      directionalLight.shadow.bias = -0.001;
      scene.add(directionalLight);

        // let directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10);
        // scene.add(directionalLightHelper);

    }

以上是关于小程序使用three.js开发VR场景漫游的主要内容,如果未能解决你的问题,请参考以下文章

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

Three.js 进阶之旅:全景漫游-高阶版在线看房 🏡

怎么制作vr全景漫游?

Three.js 实现VR看房

Three.js 进阶之旅:全景漫游-初阶移动相机版

Oculus + Node.js + Three.js 打造VR世界