第三课threejs全景预览房间案例

已于 2022-03-05 10:35:34 修改
阅读量1.3k 收藏 9
点赞数 1
分类专栏： threejs 文章标签： javascript html5 node.js
于 2022-03-05 10:33:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37030315/article/details/123290852
版权

背景： 如何在网页中预览房间每个角度? 如全景看房

功能实现思路

  1. 创建threejs场景
  2. 创建球体
  3. 创建鱼眼全景图片
  4. 翻转球体将鱼眼图贴在球体内部
  5. 相机设置在球体中心，循环更好相机拍摄目标位置

第一步

创建盛放场景盒子div

<template>
  <div class="three-box-one">
    <div id="three" />
  </div>
</template>

第二步

引入vue, threejs


import Vue from 'vue';
import * as THREE from 'three';

第三步

创建基础Data数据

data (): DataType {
    return {
      id: null,
      domW: 0,
      domH: 0,
      scene: THREE.Scene,
      camera: THREE.PerspectiveCamera,
      renderer: THREE.WebGLRenderer,
      mesh: THREE.Mesh,
      material: new THREE.MeshBasicMaterial(),
      // controls: OrbitControls,
      onMouseDownMouseX: 0,
      onMouseDownMouseY: 0,
      lon: 0,
      lat: 0,
      onMouseDownLon: 0,
      onMouseDownLat: 0,
      phi: 0,
      theta: 0,
      isUserInteracting: false
    }
  },

第四步

初始运行创建场景，获取场景宽度高度

mounted () {
    this.id = document.getElementById('three')
    this.domW = this.id.offsetWidth
    this.domH = this.id.offsetHeight
    this.init()
  },

第五步

init 函数讲解


init () {
    // 创建场景
    this.scene = new THREE.Scene()
    // 创建近大远小（透视投影）相机
    this.camera = new THREE.PerspectiveCamera(75, this.domW / this.domH, 0.01, 1100)
    // 返回一个能够表示当前摄像机所正视(拍摄)的世界空间方向的Vector3对象
    this.camera.target = new THREE.Vector3(0, 0, 0)
    // 创建渲染函数
    this.renderer = new THREE.WebGLRenderer({
    antialias: true, // 模型抗锯齿
    alpha: true // 开启背景透明
    })
    // 设置渲染场景大小
    this.renderer.setSize(this.domW, this.domH)
    // 将场景添加到div标签
    this.id.appendChild(this.renderer.domElement)
    // 添加灯光
    this.addLight()
    // 添加场景辅助线
    this.axisHelper()
    // 添加球体设置材质
    this.initSphereGeometry()
    // 添加事件监听器，配合鼠标做不同的位置变换
    this.addEventListenFn()
    // 刷帧渲染动画
    this.animate()
    // 响应屏幕改变大小函数
    this.onWindowResize()
},

第五步

添加灯光

addLight () {
      // 设置环境光
      const ambientLight = new THREE.AmbientLight('#ffffff')
      this.scene.add(ambientLight)
      // 设置平行光
      const light = new THREE.DirectionalLight('#ffffff')
      this.scene.add(light)
      // 设置点光源
      const pointLight = new THREE.PointLight('#ffffff', 0.1, 1000)
      pointLight.position.set(300, 300, 300)
      this.scene.add(pointLight)
    },

第六步

添加空间辅助线

axisHelper () {
      const axes:THREE.AxesHelper = new THREE.AxesHelper(800)
      this.scene.add(axes)
    },

第七步

创建圆球盛放鱼眼材质图

知识点：

`SphereBufferGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)`

* radius — 球体半径，默认为1。
* widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。
* heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。
* phiStart — 指定水平（经线）起始角度，默认值为0。。
* phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
* thetaStart — 指定垂直（纬线）起始角度，默认值为0。
* thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
* 该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。 因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建， 以定义我们开始（或结束）计算这些顶点的起点（或终点）。
*
*


initSphereGeometry () {
      // 创建半径500的球体 （球缓冲几何体）
      const geometry = new THREE.SphereBufferGeometry(500, 60, 40)
      geometry.scale(-1, 1, 1)
      // 创建材质获取材质图片鱼眼图
      this.material = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.douchuanwei.com/api/files/img/a.jpg')
      })
      this.mesh = new THREE.Mesh(geometry, this.material)
      // 将球体添加到场景
      this.scene.add(this.mesh)
    },

第八步

添加document 事件监听

addEventListenFn () {
      const _this:any = this
      // 鼠标按下获取鼠标xy坐标转换成球体经纬度
      document.addEventListener('mousedown', this.onPointerStart, false)
      // 鼠标移动计算变化后的球体经纬度
      document.addEventListener('mousemove', this.onPointerMove, false)
      // 鼠标抬起停止跟随
      document.addEventListener('mouseup', this.onPointerUp, false)
      // 鼠标滚轮放大缩小摄像机目标距离
      document.addEventListener('wheel', this.onDocumentMouseWheel, false)
      // 移动端手指移上获取鼠标xy坐标转换成球体经纬度
      document.addEventListener('touchstart', this.onPointerStart, false)
      // 移动端手指移动计算变化后的球体经纬度
      document.addEventListener('touchmove', this.onPointerMove, false)
      // 移动端手指抬起停止跟随
      document.addEventListener('touchend', this.onPointerUp, false)
      // 拖拽
      document.addEventListener('dragover', (e:any) => {
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
      }, false)
      // 拓拽停止设置body 半透明
      document.addEventListener('dragenter', () => {
        document.body.style.opacity = '0.5'
      }, false)
      // 拖拽离开回归透明度
      document.addEventListener('dragleave', () => {
        document.body.style.opacity = '1'
      }, false)
      document.addEventListener('drop', (e:any) => {
        e.preventDefault()
        // 读取图片为二进制码
        const reader = new FileReader()
        reader.addEventListener('load', (es:any) => {
          // 更新材质
          _this.material.map.image.src = es.target.result
          _this.material.needsUpdate = true
        }, false)
        reader.readAsDataURL(e.dataTransfer.files[0])
        document.body.style.opacity = '1'
      }, false)
    },

第九步

获取鼠标 x y 坐标，设置经纬度

onPointerStart (e) {
      this.isUserInteracting = true
      // 获取鼠标x y 坐标
      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY
      this.onMouseDownMouseX = clientX
      this.onMouseDownMouseY = clientY
      // 设置经纬度
      this.onMouseDownLon = this.lon
      this.onMouseDownLat = this.lat
    },

第十步

鼠标移动转换移动坐标到经纬度

onPointerMove (e) {
      if (this.isUserInteracting) {
        const clientX = e.clientX || e.touches[0].clientX
        const clientY = e.clientY || e.touches[0].clientY
        this.lon = (this.onMouseDownMouseX - clientX) * 0.1 + this.onMouseDownLon
        this.lat = (clientY - this.onMouseDownMouseY) * 0.1 + this.onMouseDownLat
      }
    },

第十一步

鼠标离开停止经纬度转换

onPointerUp () {
      this.isUserInteracting = false
    },

第十二步

鼠标滚轮放大缩小场景，设置相机拍摄目标位置

onDocumentMouseWheel (e) {
    const fov = this.camera.fov + e.deltaY * 0.05
    this.camera.fov = THREE.MathUtils.clamp(fov, 10, 75)
    this.camera.updateProjectionMatrix()
},

第十二步

刷帧函数讲解

animate () {
    window.requestAnimationFrame(this.animate)
    // 更新相机 旋转场景空间
    this.updateFn()
}

第十三步

更新场景函数

 updateFn () {
      if (!this.isUserInteracting) {
          // 经度每帧更新0.1 场景自动旋转起来
        this.lon += 0.1
      }
      this.lat = Math.max(-85, Math.min(85, this.lat))
      this.phi = THREE.MathUtils.degToRad(90 - this.lat)
      this.theta = THREE.MathUtils.degToRad(this.lon)
      // 更新相机 目标 x y z 位置
      this.camera.target.x = 500 * Math.sin(this.phi) * Math.cos(this.theta)
      this.camera.target.y = 500 * Math.cos(this.phi)
      this.camera.target.z = 500 * Math.sin(this.phi) * Math.sin(this.theta)
      // 相机拍摄目标（始终拍摄这里）
      this.camera.lookAt(this.camera.target)
      this.renderer.render(this.scene, this.camera)
    },

第十四步

防止浏览器窗口变化随时响应场景大小


onWindowResize () {
      window.onresize = () => {
        this.domH = this.id.offsetHeight
        this.domW = this.id.offsetWidth
        this.camera.aspect = this.domW / this.domH
        this.camera.updateProjectionMatrix()
        this.renderer.setSize(this.domW, this.domH)
      }
    },

完整示例：

<template>
  <div class="three-box-one">
    <div id="three" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import * as THREE from 'three';
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
interface DataType {
    id: HTMLElement | any;
    domW: Number | any;
    domH: Number | any;
    scene: THREE.Scene | any;
    camera: THREE.PerspectiveCamera | any;
    renderer: THREE.WebGLRenderer | any;
    mesh: THREE.Mesh | any;
    material: THREE.MeshBasicMaterial;
    // controls?: OrbitControls | any;
    onMouseDownMouseX: number;
    onMouseDownMouseY: number;
    lon: number;
    lat: number;
    onMouseDownLon: number;
    onMouseDownLat: number;
    phi: number;
    theta: number;
    isUserInteracting: Boolean;
}
export default Vue.extend({
  data (): DataType {
    return {
      id: null,
      domW: 0,
      domH: 0,
      scene: THREE.Scene,
      camera: THREE.PerspectiveCamera,
      renderer: THREE.WebGLRenderer,
      mesh: THREE.Mesh,
      material: new THREE.MeshBasicMaterial(),
      // controls: OrbitControls,
      onMouseDownMouseX: 0,
      onMouseDownMouseY: 0,
      lon: 0,
      lat: 0,
      onMouseDownLon: 0,
      onMouseDownLat: 0,
      phi: 0,
      theta: 0,
      isUserInteracting: false
    }
  },
  mounted () {
    this.id = document.getElementById('three')
    this.domW = this.id.offsetWidth
    this.domH = this.id.offsetHeight
    this.init()
  },
  methods: {
    init () {
      this.scene = new THREE.Scene()
      this.camera = new THREE.PerspectiveCamera(75, this.domW / this.domH, 0.01, 1100)
      this.camera.target = new THREE.Vector3(0, 0, 0)
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      })
      this.renderer.setSize(this.domW, this.domH)
      this.id.appendChild(this.renderer.domElement)
      this.addLight()
      this.axisHelper()
      this.initSphereGeometry()
      this.addEventListenFn()
      this.animate()
      this.onWindowResize()
    },
    controlsFn () {
      // this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    },
    initSphereGeometry () {
      const geometry = new THREE.SphereBufferGeometry(500, 60, 40)
      geometry.scale(-1, 1, 1)
      this.material = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.douchuanwei.com/api/files/img/a.jpg')
      })
      this.mesh = new THREE.Mesh(geometry, this.material)
      this.scene.add(this.mesh)
    },
    addEventListenFn () {
      const _this:any = this
      document.addEventListener('mousedown', this.onPointerStart, false)
      document.addEventListener('mousemove', this.onPointerMove, false)
      document.addEventListener('mouseup', this.onPointerUp, false)
      document.addEventListener('wheel', this.onDocumentMouseWheel, false)
      document.addEventListener('touchstart', this.onPointerStart, false)
      document.addEventListener('touchmove', this.onPointerMove, false)
      document.addEventListener('touchend', this.onPointerUp, false)
      document.addEventListener('dragover', (e:any) => {
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
      }, false)
      document.addEventListener('dragenter', () => {
        document.body.style.opacity = '0.5'
      }, false)
      document.addEventListener('dragleave', () => {
        document.body.style.opacity = '1'
      }, false)
      document.addEventListener('drop', (e:any) => {
        e.preventDefault()
        const reader = new FileReader()
        reader.addEventListener('load', (es:any) => {
          _this.material.map.image.src = es.target.result
          _this.material.needsUpdate = true
        }, false)
        reader.readAsDataURL(e.dataTransfer.files[0])
        document.body.style.opacity = '1'
      }, false)
    },
    onPointerStart (e) {
      this.isUserInteracting = true
      const clientX = e.clientX || e.touches[0].clientX
      const clientY = e.clientY || e.touches[0].clientY
      this.onMouseDownMouseX = clientX
      this.onMouseDownMouseY = clientY
      this.onMouseDownLon = this.lon
      this.onMouseDownLat = this.lat
    },
    onPointerMove (e) {
      if (this.isUserInteracting) {
        const clientX = e.clientX || e.touches[0].clientX
        const clientY = e.clientY || e.touches[0].clientY
        this.lon = (this.onMouseDownMouseX - clientX) * 0.1 + this.onMouseDownLon
        this.lat = (clientY - this.onMouseDownMouseY) * 0.1 + this.onMouseDownLat
      }
    },
    onPointerUp () {
      this.isUserInteracting = false
    },
    onDocumentMouseWheel (e) {
      const fov = this.camera.fov + e.deltaY * 0.05
      this.camera.fov = THREE.MathUtils.clamp(fov, 10, 75)
      this.camera.updateProjectionMatrix()
    },
    addLight () {
      const ambientLight = new THREE.AmbientLight('#ffffff')
      this.scene.add(ambientLight)
      const light = new THREE.DirectionalLight('#ffffff')
      this.scene.add(light)
      const pointLight = new THREE.PointLight('#ffffff', 0.1, 1000)
      pointLight.position.set(300, 300, 300)
      this.scene.add(pointLight)
    },
    axisHelper () {
      const axes:THREE.AxesHelper = new THREE.AxesHelper(800)
      this.scene.add(axes)
    },
    onWindowResize () {
      window.onresize = () => {
        this.domH = this.id.offsetHeight
        this.domW = this.id.offsetWidth
        this.camera.aspect = this.domW / this.domH
        this.camera.updateProjectionMatrix()
        this.renderer.setSize(this.domW, this.domH)
      }
    },
    updateFn () {
      if (!this.isUserInteracting) {
        this.lon += 0.1
      }
      this.lat = Math.max(-85, Math.min(85, this.lat))
      this.phi = THREE.MathUtils.degToRad(90 - this.lat)
      this.theta = THREE.MathUtils.degToRad(this.lon)
      this.camera.target.x = 500 * Math.sin(this.phi) * Math.cos(this.theta)
      this.camera.target.y = 500 * Math.cos(this.phi)
      this.camera.target.z = 500 * Math.sin(this.phi) * Math.sin(this.theta)
      this.camera.lookAt(this.camera.target)
      this.renderer.render(this.scene, this.camera)
    },
    animate () {
      window.requestAnimationFrame(this.animate)
      this.updateFn()
      // this.mesh.rotation.y += 0.02
      // this.mesh.rotation.x += 0.01
      // this.renderer.render(this.scene, this.camera)
    }
  },
});
</script>

更多内容请到小豆包》

扫码访问小豆包

23_34de43370a343405db1b00359bb895cd.png

扫码关注小豆包公众号

小豆包公众号.jpg

小豆包3D世界
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js 画的3D房间布局，可用Enter件控制开门，关门。
09-20
在支持webgl的浏览器上打开room.html,即可看到效果图。如果加载不出来，打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式， 选择“属性”，在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格，重启Chrome浏览器便可。three.js 画的3D房间布局，可用Enter件控制开门，关门。
three.js实现3D全景看房
10-23
three.js实现3D全景看房（移动端）。 three.js的基本使用（入门阶段），全景自动展示，以及手动拖拽滑动控制房屋方向角度。
3D沉浸式旅游网站开发案例复盘【Three.js】
新缸中之脑
08-15 1246
显然我必须为这个网站从头开始编写一些自定义着色器。以下是最有趣的一些细分。
【Three.js】第七章 Cameras 相机
m0_68324632的博客
05-25 1515
我们已经创建过了一个`PerspectiveCamera`，但还有其他类型的相机，如您在文档中所见。
ThreeJS 官方案例学习（webgl_animation_multiple）
最新发布
qq_59315646的博客
05-24 311
【代码】ThreeJS 官方案例学习（webgl_animation_multiple）
一步步带你实现web全景看房——three.js
09-03 6485
1. 基本概念在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界：场景:右手坐标系,一切要素都在场景里面，相当于“世界”，包括各种物质和物理变化//创建场景constscene=newTHREE.Scene(); 复制代码照...
html 全景图three,室内房间全景图(基于three.js)
weixin_39546501的博客
06-07 848
房间布局content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">// 设置全局变量var scene, camera, renderer, controls,tween,door;var keyboard = new THREEx.KeyboardState();//保持键盘的当...
three.js 全景看房
weixin_38946164的博客
07-13 1601
代码参考了官方的 https://threejs.org 天空盒是一个包含了整个场景的立方体，它包含周围环境的6个图像。 所有图片的尺寸是 2048X2048 图片来自 ：https://juejin.cn/post/7112696052884439070
threeJs播放全景视频Demo
04-21
在这个"threeJs播放全景视频Demo"中，我们将探讨如何使用Three.js库来实现全景视频的播放。 首先，了解Three.js的基础是必要的。Three.js是一个基于WebGL的库，WebGL是一种JavaScript API，可让开发者在浏览器中...
720带热点的全景房间(three.js).rar
12-23
在这个场景中，"720带热点的全景房间"是一个使用Three.js库实现的项目，Three.js是JavaScript的一个库，专门用于在Web浏览器中创建和展示3D图形。下面我们将详细讨论与这个项目相关的知识点。 首先，我们来看Three....
three.js+photo-sphere-viewer.js 全景场景切换，全景家居，全景图效果预览
09-01
在"全景场景切换，全景家居，全景图效果预览"的项目中，开发者可能会使用three.js创建不同的3D场景，每个场景代表一个家居空间的不同部分，如客厅、卧室或厨房。photo-sphere-viewer.js可以帮助在这些场景间平滑过渡...
Three.js实现简单3D房间布局
10-17
主要为大家详细介绍了Three.js实现简单3D房间布局的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VR看房threejs.rar
07-06
VR看房
three.js搭建室内场景教程
12-11
公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。 1.创建地板 地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的BoxGeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过Earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接
基于three.js实现全景.zip
02-18
使用了three.js和photo-sphere-viewer实现网页全景预览，可以随意移植使用，嵌入到你的网页中，实现全景效果
元宇宙初探React+Three.js制作3D全景漫游.zip
12-10
元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...
three.js使用正方体加图片实现全景看房效果
yunbabac的博客
01-04 459
【代码】three.js使用正方体加图片实现全景看房效果。
threejs完成一个初步的3D看房！
今昭昭昭的博客
07-13 893
const renderer = new THREE.WebGL1Renderer()//渲染器 const scene = new THREE.Scene()//场景 renderer.setPixelRatio(window.devicePixelRatio);//像素 const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 60)//相机 const cameracontro
three.js实现VR看房自由
weixin_44604262的博客
01-11 1573
万字详解-three.js实现VR看房自由
threejs全景图转换为六面图
05-31
将Three.js全景图转换为六面图需要将全景图投影到一个正方体的六个面上。这个过程涉及到Three.js中的`CubeCamera`和`CubeTexture`对象。 首先，创建一个`CubeCamera`对象和一个`CubeTexture`对象： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值