three.js實(shí)現(xiàn)3d全景看房示例

更新時(shí)間：2022年07月09日 14:04:23 作者：hide_in_code

這篇文章主要為大家介紹了three.js實(shí)現(xiàn)3d全景看房示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

隨著電商時(shí)代的發(fā)展，網(wǎng)上購物的方式已經(jīng)成為主流，良好的購物體驗(yàn)已經(jīng)顯得極為重要。展示給用戶的視覺效果便不能僅僅局限于2D視覺效果，全方位的3D立體展示效果能讓用戶對(duì)商品進(jìn)行 360度無死角的認(rèn)識(shí)了解。豐富多彩的三維世界大門早已敞開，一起進(jìn)去看看吧！

認(rèn)識(shí)threejs

three.js就是使用 javascript 來寫的，基于原生 WebGL 封裝運(yùn)行的三維引擎，運(yùn)行在瀏覽器上的3D程序。WebGL 是在瀏覽器中實(shí)現(xiàn)三維效果的一套規(guī)范。與我們而言，three.js 相當(dāng)于簡化了 WebGL 的操作，讓我們?cè)诓欢?jì)算機(jī)圖形學(xué)，只理解 three.js 的一些基本概念的條件下也能夠輕松進(jìn)行web 3D開發(fā)。在所有WebGL引擎中，Three.js 是國內(nèi)文資料最多、使用最廣泛的三維引擎。

通過 can i use 查詢可知，現(xiàn)在的主流瀏覽器都已支持webGL

安裝與使用

    // cod引用
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
    // npm 安裝使用
    npm install three
    // 引用
    import * as THREE from 'three'

3D世界的三劍客

在threejs中，渲染一個(gè)3d世界的必要因素是場景（scene）、相機(jī)（camera）、渲染器（renderer）, 我將他們稱之為 threejs 3D世界的三劍客。有了這三樣?xùn)|西，才能將物體渲染到網(wǎng)頁中去。

場景（scene）

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

在threejs中,場景是右手坐標(biāo)系, 把右手放在原點(diǎn)的位置，使大拇指，食指和中指互成直角，把大拇指指向x軸的正方向，食指指向y軸的正方向時(shí)，中指所指的方向就是z軸的正方向。

創(chuàng)建場景

    const scene = new THREE.Scene()

相機(jī)（camera）

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

值得注意的是場景只有一種，但是相機(jī)卻有很多種。和現(xiàn)實(shí)中一樣，不同的相機(jī)確定了呈相的各個(gè)方面。比如有的相機(jī)適合人像，有的相機(jī)適合風(fēng)景，專業(yè)的攝影師根據(jù)實(shí)際用途不一樣，選擇不同的相機(jī)。對(duì)程序員來說，只要設(shè)置不同的相機(jī)參數(shù)，就能夠讓相機(jī)產(chǎn)生不一樣的效果。

常用的是正交投影相機(jī)和透視相機(jī)。

透視相機(jī)

透視相機(jī)是模擬人眼的視覺，近大遠(yuǎn)?。ㄍ敢暎?/p>

創(chuàng)建透視相機(jī)

    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

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

正交投影相機(jī)

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

創(chuàng)建正交投影相機(jī)

    const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

相機(jī)參數(shù)

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

left — 攝像機(jī)視錐體左側(cè)面。

right — 攝像機(jī)視錐體右側(cè)面。

top — 攝像機(jī)視錐體上側(cè)面。

bottom — 攝像機(jī)視錐體下側(cè)面。

near — 攝像機(jī)視錐體近端面。

far — 攝像機(jī)視錐體遠(yuǎn)端面。

渲染器（renderer）

渲染器決定了渲染的結(jié)果應(yīng)該畫在頁面的什么元素上面，并且以怎樣的方式來繪制

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

世界雛形

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

造物

在計(jì)算機(jī)世界里，3D世界是由點(diǎn)組成，兩個(gè)點(diǎn)能夠組成一條直線，三個(gè)不在一條直線上的點(diǎn)就能夠組成一個(gè)三角形面，無數(shù)三角形面就能夠組成各種形狀的物體。我們通常把這種網(wǎng)格模型叫做Mesh模型。給物體貼上皮膚，或者專業(yè)點(diǎn)就叫做紋理，那么這個(gè)物體就活靈活現(xiàn)了。最后無數(shù)的物體就組成了我們的3D世界。

而網(wǎng)格（mesh）又是由幾何體（geometry）和材質(zhì)（material）構(gòu)成的

幾何體（geometry）

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

    // 添加立方體
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 創(chuàng)建物體
    var mesh = new THREE.Mesh( geometry)
    // 將物體添加到場景中
    scene.add(mesh)

材質(zhì)（material）

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

部分材質(zhì)受光源影響，僅在光源下可見

    // 添加立方體
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 創(chuàng)建材質(zhì)
    material = new THREE.MeshBasicMaterial({ color: 0xFF0000 })
    // 創(chuàng)建物體
    var mesh = new THREE.Mesh( geometry, material)
    // 將物體添加到場景中
    scene.add(mesh)

渲染循環(huán)

調(diào)用requestAnimationFrame方法對(duì)整個(gè)場景進(jìn)行實(shí)時(shí)渲染

    // 渲染
    const render = () =&gt; {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
    }
    render()

軌道控制器（OrbitControls）

使用控制器實(shí)現(xiàn)移動(dòng)、改變視角等效果

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

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

    const geometry = new THREE.BoxGeometry(10, 10, 10)
    const colors = [
        { color: 0xff0000 },
        { color: 0x00ff00 },
        { color: 0x0000ff },
        { color: 0xff00ff },
        { color: 0xffff00 },
        { color: 0x00ffff }
    ]
    const material = []
    // 將6個(gè)面涂上不同的顏色
    for(let i=0, len=colors.length; i&lt;len; i++) {
        material.push(new THREE.MeshBasicMaterial(colors[i]))
    }
    // 創(chuàng)建物體
    var mesh = new THREE.Mesh( geometry, material)
    // 將物體添加到場景中
    scene.add(mesh)

3D全景房

根據(jù)我的了解目前常用于實(shí)現(xiàn)全景看房效果的有兩種，分別紋理貼圖和3D建模。

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

天空盒貼圖

天空盒的原理是將我們所處的場景看成是有前后、左右、上下6個(gè)面組成的，將我們所看到的這6個(gè)面的視覺鏡像處理成圖片，將其分別以紋理的形式添加到立方體中，這時(shí)，我們?nèi)绻⑸碛谶@個(gè)立方體中，即可還原當(dāng)時(shí)場景。

使用.TextureLoader()加載圖片，轉(zhuǎn)化為紋理，通過屬性map設(shè)置材質(zhì)紋理。就實(shí)現(xiàn)了簡單的紋理加載。

    // 添加立方體
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 左右、上下、后前
    const urls = [
        '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'
    ]
    const boxMaterial = []
    urls.forEach((item) => {
        // 紋理加載
        const texture = new THREE.TextureLoader().load(item)
        // 通過旋轉(zhuǎn)修復(fù)天花板和地板
        if (item == '4_u' || item == '4_d') {
        texture.rotation = Math.PI
        texture.center = new THREE.Vector2(0.5, 0.5)
        }
        // 創(chuàng)建材質(zhì)
        boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture }))
    })
    const house = new THREE.Mesh(geometry, boxMaterial)
    house.geometry.scale(1, 1, -1)
    scene.add(house)

效果如下

全景圖片貼圖

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

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

效果如下

房屋模型

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

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

我們已經(jīng)想場景中添加了房屋模型，然而此時(shí)卻看不到房屋，因?yàn)閯?chuàng)建房屋模型所選用的材質(zhì)是 MeshPhongMaterial 材質(zhì)（一種用于具有鏡面高光的光澤表面的材質(zhì)），僅在光源條件下可見，所以我們需要添加光源。

燈光

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

本次使用 HemisphereLight（半球光）HemisphereLight，能更好的創(chuàng)建出更加貼切?然的戶外光照效果

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

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

串門

要實(shí)現(xiàn)串門的功能，我們需要添加可以實(shí)現(xiàn)交互的元素。這里我們使用Sprite（精靈模型）

Sprite（精靈模型）

Sprite的特點(diǎn)是無論旋轉(zhuǎn)到什么角度，sprite所制作的元素都是正對(duì)著相機(jī)，可以理解為像向日葵始終正面朝向相機(jī)。

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

加入sprite之后效果如下

Raycaster（光線投射）

在3D空間要想點(diǎn)擊我們上面創(chuàng)建的精靈模型, 要用到Raycaster（光線投射）, 原理就是在你鼠標(biāo)點(diǎn)擊的位置發(fā)射一根射線，被這根射線射中的物體都被記錄下來。然后在根據(jù)被記錄下來的物體去判斷點(diǎn)中的物體。

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

獲取鼠標(biāo)在屏幕的坐標(biāo)
屏幕坐標(biāo)轉(zhuǎn)標(biāo)準(zhǔn)設(shè)備坐標(biāo)
標(biāo)準(zhǔn)設(shè)備坐標(biāo)轉(zhuǎn)世界坐標(biāo)

根據(jù)世界坐標(biāo)和相機(jī)生成：射線投射方向單位向量，再根據(jù)射線投射方向單位向量創(chuàng)建射線投射器對(duì)象

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

效果如下

遇到問題

在vue2中，定義三劍客全局變量時(shí)，不建議放到data中，會(huì)產(chǎn)生如下問題

眾所周知，vue3是通過Proxy實(shí)現(xiàn)的數(shù)據(jù)雙向綁定，vue2是通過defindeProperty實(shí)現(xiàn)的數(shù)據(jù)雙向綁定，代理目標(biāo)上的只讀且不可配置的數(shù)據(jù)屬性

總結(jié)

作為一個(gè)threejs的初學(xué)者，針對(duì)threejs的講解和使用較為淺顯，在不斷學(xué)習(xí) threejs 的過程中，感覺還是挺有趣，看著別人炫酷的3D效果感覺好強(qiáng)，也感到自己的不足。我的學(xué)習(xí)方法，首先入門是在b站看了threejs journey的視頻，了解threejs的運(yùn)用，接下來就是多練，加深對(duì)光、材質(zhì)、相機(jī)等等的理解，另外就是去模仿別人的效果。之后就是在b站上學(xué)習(xí)blender建模課程，了解模型的創(chuàng)建和運(yùn)用，更多關(guān)于threejs 3d全景看房的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: