Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡
Posted dragonir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡相关的知识，希望对你有一定的参考价值。
本文使用Three.js实现一个可以应用到实际项目中的3D在线看房案例。通过阅读本文和实践案例，你将学到的知识包括：使用 Three.js 实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展示、房间标注等多种类型的交互热点等。
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
专栏上篇文章《Three.js 进阶之旅：全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这种方式的缺点也是显而易见的，随着全景场景的增加来创建对应数量的球体，使得空间关系计算难度提升，并且大幅降低浏览器渲染行性能。在上一篇文章的基础上，本文通过以下几点对全景功能加以优化，最后实现一个可以应用到实际项目中的在线看房案例。通过阅读本文和实践案例，你将学到的知识包括：使用 Three.js 用新的技术思路实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展示、房间标注等多种类型的交互热点等。
效果
我们先来看看本文在线看房案例的最终实现效果，页面主体由代表多个房间的全景图 小程序使用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 进阶之旅：全景漫游-高阶版在线看房 🏡的主要内容，如果未能解决你的问题，请参考以下文章