3d看房(three.js如何實現3d全景看房)

認識threejs

three.js就是使用 javascript 來寫的,基于原生 WebGL 封裝運行的三維引擎,運行在瀏覽器上的3D程序。WebGL 是在瀏覽器中實現三維效果的一套規范。與我們而言,three.js 相當于簡化了 WebGL 的操作,讓我們在不懂計算機圖形學,只理解 three.js 的一些基本概念的條件下也能夠輕松進行web 3D開發。在所有WebGL引擎中,Three.js 是國內文資料最多、使用最廣泛的三維引擎。通過 can i use 查詢可知,現在的主流瀏覽器都已支持webGL

安裝與使用

//cod引用<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>//npm安裝使用npminstallthree//引用import*asTHREEfrom'three'

3D世界的三劍客

在threejs中,渲染一個3d世界的必要因素是場景(scene)、相機(camera)、渲染器(renderer), 我將他們稱之為 threejs 3D世界的三劍客。有了這三樣東西,才能將物體渲染到網頁中去。

場景(scene)

場景是一個三維空間, 所有物品的容器。相當于世界, 我們所創造的所有物體光源等都必須添加到場景中才能生效或可見。

在threejs中,場景是右手坐標系, 把右手放在原點的位置,使大拇指,食指和中指互成直角,把大拇指指向x軸的正方向,食指指向y軸的正方向時,中指所指的方向就是z軸的正方向。

創建場景

constscene=newTHREE.Scene()

相機(camera)

相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛一樣,人站在不同位置,抬頭或者低頭都能夠看到不同的景色。

值得注意的是場景只有一種,但是相機卻有很多種。和現實中一樣,不同的相機確定了呈相的各個方面。比如有的相機適合人像,有的相機適合風景,專業的攝影師根據實際用途不一樣,選擇不同的相機。對程序員來說,只要設置不同的相機參數,就能夠讓相機產生不一樣的效果。

常用的是正交投影相機和透視相機。

透視相機

透視相機是模擬人眼的視覺,近大遠小(透視)

創建透視相機

constcamera=newTHREE.PerspectiveCamera(45,width/height,1,1000);

相機參數
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov — 攝像機視錐體垂直視野角度 aspect — 攝像機視錐體長寬比 near — 攝像機視錐體近端面 far — 攝像機視錐體遠端面 只有離相機的距離大于near值,小于far值,且在相機的可視角度之內,才能被相機投影到。

正交投影相機

無論物體距離相機距離遠或者近,在最終渲染的圖片中物體的大小都保持不變。我們所所熟知的三視圖就是很典型的正交投影模式,多運用與工程制圖

創建正交投影相機

constcamera=newTHREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);

相機參數

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left — 攝像機視錐體左側面。

right — 攝像機視錐體右側面。

top — 攝像機視錐體上側面。

bottom — 攝像機視錐體下側面。

near — 攝像機視錐體近端面。

far — 攝像機視錐體遠端面。

渲染器(renderer)

渲染器決定了渲染的結果應該畫在頁面的什么元素上面,并且以怎樣的方式來繪制

varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);

渲染器renderer的domElement元素,表示渲染器中的畫布,所有的渲染都是畫在domElement上的,所以這里的appendChild表示將這個domElement掛接在body下面,這樣渲染的結果就能夠在頁面中顯示了。

世界雛形

//初始化場景constscene=newTHREE.Scene()//初始化透視相機constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)//設置相機位置camera.position.z=5//初始化渲染器,并將畫布添加到頁面元素中constrenderer=newTHREE.WebGLRenderer()renderer.setSize(window.innerWidth,window.innerHeight)document.body.appendChild(renderer.domElement);//渲染場景和相機renderer.render(scene,camera)

造物

在計算機世界里,3D世界是由點組成,兩個點能夠組成一條直線,三個不在一條直線上的點就能夠組成一個三角形面,無數三角形面就能夠組成各種形狀的物體。我們通常把這種網格模型叫做Mesh模型。給物體貼上皮膚,或者專業點就叫做紋理,那么這個物體就活靈活現了。最后無數的物體就組成了我們的3D世界。

而網格(mesh)又是由幾何體(geometry)和材質(material)構成的

幾何體(geometry)

幾何體就像物體的血肉,決定了物體長什么樣子。

//添加立方體constgeometry=newTHREE.BoxGeometry(10,10,10)//創建物體varmesh=newTHREE.Mesh(geometry)//將物體添加到場景中scene.add(mesh)

材質(material)

材質就像物體的皮膚,決定了幾何體的外表, 不同的材質渲染出不同的效果, 比如一個幾何體看起來是否像金屬、透明與否、或者顯示為線框。

部分材質受光源影響,僅在光源下可見

//添加立方體constgeometry=newTHREE.BoxGeometry(10,10,10)//創建材質material=newTHREE.MeshBasicMaterial({color:0xFF0000})//創建物體varmesh=newTHREE.Mesh(geometry,material)//將物體添加到場景中scene.add(mesh)

渲染循環

調用requestAnimationFrame方法對整個場景進行實時渲染

//渲染constrender=()=>{renderer.render(scene,camera)requestAnimationFrame(render)}render()

軌道控制器(OrbitControls)

使用控制器實現移動、改變視角等效果

import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'constcontainer=renderer.domElement//添加控制器constcontrols=newOrbitControls(camera,container)//啟用慣性controls.enableDamping=true//相機向外移動極限controls.maxDistance=4.5

在加入渲染循環和軌道控制器之后,為了展示效果更明顯,我們將6個面涂上不同的顏色

constgeometry=newTHREE.BoxGeometry(10,10,10)constcolors=[{color:0xff0000},{color:0x00ff00},{color:0x0000ff},{color:0xff00ff},{color:0xffff00},{color:0x00ffff}]constmaterial=[]//將6個面涂上不同的顏色for(leti=0,len=colors.length;i<len;i++){material.push(newTHREE.MeshBasicMaterial(colors[i]))}//創建物體varmesh=newTHREE.Mesh(geometry,material)//將物體添加到場景中scene.add(mesh)

3D全景房

根據我的了解目前常用于實現全景看房效果的有兩種,分別紋理貼圖和3D建模。

紋理貼圖類全景看房又分為 天空盒貼圖 和 全景圖片貼圖

天空盒貼圖

天空盒的原理是將我們所處的場景看成是有前后、左右、上下6個面組成的,將我們所看到的這6個面的視覺鏡像處理成圖片,將其分別以紋理的形式添加到立方體中,這時,我們如果立身于這個立方體中,即可還原當時場景。

使用.TextureLoader()加載圖片,轉化為紋理,通過屬性map設置材質紋理。就實現了簡單的紋理加載。

//添加立方體constgeometry=newTHREE.BoxGeometry(10,10,10)//左右、上下、后前consturls=['https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg?proportion=1','https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg?proportion=1','https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg?proportion=1','https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg?proportion=1','https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg?proportion=1','https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg?proportion=1']constboxMaterial=[]urls.forEach((item)=>{//紋理加載consttexture=newTHREE.TextureLoader().load(item)//通過旋轉修復天花板和地板if(item=='4_u'||item=='4_d'){texture.rotation=Math.PItexture.center=newTHREE.Vector2(0.5,0.5)}//創建材質boxMaterial.push(newTHREE.MeshBasicMaterial({map:texture}))})consthouse=newTHREE.Mesh(geometry,boxMaterial)house.geometry.scale(1,1,-1)scene.add(house)

全景圖片貼圖

全景圖貼圖就是使用一張魚眼全景圖片以紋理的形式添加到球體上,如地球儀。

consturl='https://cdn.huodao.hk/upload_img/20220621/6bd594e62ea5654c03d7b82718443751.png?proportion=1.99'constgeometry=newTHREE.SphereGeometry(5,32,32)consttexture=newTHREE.TextureLoader().load(url)constmaterial=newTHREE.MeshBasicMaterial({map:texture})constsphere=newTHREE.Mesh(geometry,material)sphere.geometry.scale(1,1,-1)scene.add(sphere)

房屋模型

相對于貼圖的使用,模型的使用相對簡單,只需引入相應的模型加載器,就能得到模型對象,直接添加到場景中就可以了。然而建模的成本相對較高,本次使用的模型是使用blender軟件簡單制作而成。

//引入FBX模型解析器import{FBXLoader}from'three/examples/jsm/loaders/FBXLoader'//加載模型并添加到場景中loadRoomModel(){constloader=newFBXLoader()loader.load('/assets/untitled.fbx',(fbx)=>{console.log('fbx---',fbx)//縮放倍數fbx.scale.set(0.01,0.01,0.01)scene.add(fbx)})}

我們已經想場景中添加了房屋模型,然而此時卻看不到房屋,因為創建房屋模型所選用的材質是 MeshPhongMaterial 材質(一種用于具有鏡面高光的光澤表面的材質),僅在光源條件下可見,所以我們需要添加光源。

燈光

THREE.Light只是其他所有光源的基類,要讓光源除了具有顏色的特性之外,我們需要其他光源。

本次使用 HemisphereLight(半球光)HemisphereLight,能更好的創建出更加貼切?然的戶外光照效果

addLight(){//添加半球光源--戶外效果constlight=newTHREE.HemisphereLight(0xffffff,0x444444)light.position.set(0,200,0)scene.add(light)}

在添加光源后,我們的房屋模型就可見了,斯是陋室,惟吾德馨

串門

要實現串門的功能,我們需要添加可以實現交互的元素。這里我們使用Sprite(精靈模型)

Sprite(精靈模型)

Sprite的特點是無論旋轉到什么角度,sprite所制作的元素都是正對著相機,可以理解為像向日葵始終正面朝向相機。

createSprite(){consturl='https://cdn.huodao.hk/upload_img/20220621/1eca2b6efe7aab01d42ca45345f46a90.png?proportion=0.98'consttexture=newTHREE.TextureLoader().load(url)constmaterial=newTHREE.SpriteMaterial({map:texture})constsprite=newTHREE.Sprite(material)//設置大小、位置、內容sprite.scale.set(0.5,0.5,0.5)sprite.position.set(0.4,0,-4.5)//加入場景中scene.add(sprite)}

Raycaster(光線投射)

在3D空間要想點擊我們上面創建的精靈模型, 要用到Raycaster(光線投射), 原理就是在你鼠標點擊的位置發射一根射線,被這根射線射中的物體都被記錄下來。然后在根據被記錄下來的物體去判斷點中的物體。

在光線投射之前,我們要做以下幾步

• 獲取鼠標在屏幕的坐標

• 屏幕坐標轉標準設備坐標

• 標準設備坐標轉世界坐標

根據世界坐標和相機生成:射線投射方向單位向量,再根據射線投射方向單位向量創建射線投射器對象

GoToRoom(e){e.preventDefault()const{clientX,clientY}=econstdom=renderer.domElement//拿到canvas畫布到屏幕的距離constdomRect=dom.getBoundingClientRect()//計算標準設備坐標-歸一化設備坐標constx=((clientX-domRect.left)/dom.clientWidth)*2-1consty=-((clientY-domRect.top)/dom.clientHeight)*2+1constvector=newTHREE.Vector3(x,y)//轉世界坐標constworldVector=vector.unproject(camera)console.log('世界坐標',worldVector)//向量相減,并獲取單位向量constray=worldVector.sub(camera.position).normalize()//射線投射對象,第一個參數是射線原點第二個參數是射線方向constraycaster=newTHREE.Raycaster(camera.position,ray)raycaster.camera=camera//返回射線選中的對象//第一個參數是檢測的目標對象第二個參數是目標對象的子元素constintersects=raycaster.intersectObjects(scene.children)if(intersects.length>0){console.log("捕獲到對象",intersects);constintersect=intersects[0]if(intersect.object?.type=="Sprite"&&intersect.object?.content?.isComeAround){//清除當前房間和精靈模型scene.remove(sphere)scene.remove(sprite)if(intersect.object?.content?.to=='小明家'){cube=cube||this.createCube()scene.add(cube)}}}else{console.log("沒捕獲到對象");}},initEvent(){window.addEventListener('click',this.GoToRoom)}

遇到問題

• 在vue2中,定義三劍客全局變量時,不建議放到data中,會產生如下問題

眾所周知,vue3是通過Proxy實現的數據雙向綁定,vue2是通過defindeProperty實現的數據雙向綁定,代理目標上的只讀且不可配置的數據屬性