最令人興奮的項目之一是在 Three js 中添加HDRI背景。 HDRI圖像是從房間內(nèi)部或花園、叢林或山脈等開放環(huán)境等場景中以 360 度捕獲的。 你可以自己創(chuàng)建任何這些圖像，但這不是本教程的主題。 相反，我們將從網(wǎng)站獲取這些圖像之一，并使用軌道控件，讓用戶能夠轉(zhuǎn)動物體并以 360 度查看所有內(nèi)容。 我們還可以將物體添加到場景中并賦予它們顏色或增加它們的金屬度并降低它們的粗糙度以成為球形鏡子。
推薦：用 NSDT編輯器 快速搭建可編程3D場景
1、在Three.js中添加背景
可能性是無限的，你可以做很多事情。 例如，可以通過添加不同家具、地毯、墊子等的 3D 模型來創(chuàng)建空房間的室內(nèi)設(shè)計。 本教程是創(chuàng)建虛擬世界的開始，你可以虛擬地建造自己的夢想之家，并從各個不同的方面觀看它。 正如我們在其他 Three js 教程中所說，一旦開始使用 Three js，天空才是極限。
我們將從three.js 場景的簡單元素開始，包括相機、渲染器、場景、對象和光源（如果需要）。 在此之前，我們使用 Vite 插件來輕松創(chuàng)建運行 Three.js 代碼所需的所有文件夾和文件。 首先，使用以下命令在項目目錄中創(chuàng)建一個文件夾：
mkdir BackgroundScene
cd BackgroundScene
然后，在文件夾中，運行 Vite 插件命令即可創(chuàng)建必要的文件和文件夾：
npm create vite@latest
然后，輸入項目名稱。 可以用glowingSphere作為名字。 但是，該名稱是任意的，你可以選擇任何想要的名稱。 然后，選擇 vanilla 作為框架和變體。 之后，在終端中輸入以下命令：
cd BackgroundScene
npm install
接下來，你可以在 main.js 文件中輸入要編寫的 JavaScript 代碼。 因此，我們將輸入基本或模板代碼，用于運行帶有動畫對象（例如球體）的每個項目。 另外，每次創(chuàng)建項目時不要忘記安裝three.js包：
npm install three
在 main.js 文件中輸入以下代碼：
import * as THREE from 'three';
import { Mesh } from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight , 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
antialias : true
})
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
//creating a sphere
const geometry = new THREE.SphereGeometry(5, 50, 50);
const material = new THREE.MeshBasicMaterial({
color:0x3268F8
})
const sphere = new THREE.Mesh(geometry,material);
scene.add(sphere);
camera.position.z = 15;
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
sphere.rotation.y += 0.003;
}
animate();
上面的代碼可以作為后續(xù)項目的樣板。 此代碼的輸出將是藍色球體，如下圖所示。 但是，為了能夠顯示這一點，你應(yīng)該在終端中編寫以下命令：
pm run dev
2、在Three.js 中使用軌道控件設(shè)置背景
現(xiàn)在，我們想要創(chuàng)建一個要添加的背景場景，但在此之前，我們需要將渲染從動畫更改為軌道控件，這樣我們就可以控制從動畫更改場景，而不是旋轉(zhuǎn)對象。 相機視角。 這樣做使我們能夠從各個角度查看 HDRI 圖像。 首先，我們需要導(dǎo)入以下 2 個庫：
import {OrbitControls} from "/node_modules/three/examples/jsm/controls/OrbitControls.js";
import Stats from "/node_modules/three/examples/jsm/libs/stats.module.js";
然后，我們要做的就是修改下面的渲染代碼：
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
sphere.rotation.y += 0.003;
}
Animate();
修改后的代碼如下所示：
const controls = new OrbitControls(camera, renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
const stats = Stats();
document.body.appendChild(stats.dom);
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
animate();
現(xiàn)在我們應(yīng)該能夠圍繞該物體運行。 接下來我們應(yīng)該做的是將基礎(chǔ)材質(zhì)更改為標準材質(zhì)并創(chuàng)建鏡面效果：
const geometry = new THREE.SphereGeometry();
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
})
material.roughness = 0;
material.metalness = 1;
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
3、添加HDRI環(huán)境貼圖
最后，我們到達最令人興奮的部分，即將 HDRI 圖像添加到背景中。
為此，我們需要首先從BimAnt HDRI等網(wǎng)站找到這些圖像，BimAnt HDRI提供超過600張HDRI環(huán)境貼圖，優(yōu)點是無需登錄即可直接預(yù)覽和下載：
http://hdri.bimant.com
之后，我們應(yīng)該創(chuàng)建一個名為 images 的文件夾并將 HDRI 圖像粘貼到其中。 最后，添加以下代碼以便能夠渲染場景中的背景：
import {RGBELoader} from "/node_modules/three/examples/jsm/loaders/RGBELoader.js";
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.6;
renderer.outputEncoding = THREE.sRGBEncoding;
new RGBELoader().load("/images/solitude_4k.hdr", function(texture){
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
})
現(xiàn)在，如果我們保存代碼，結(jié)果將如下所示：
用鼠標左鍵單擊頁面并將其向左、向右、向上或向下移動時，你會發(fā)現(xiàn)可以從所有不同的角度看到場景。 另外，由于我們將球體材質(zhì)的金屬度定義為 1，粗糙度定義為 0，我們可以看到球體上的鏡面效果，以真實的方式反映背景場景。
可以說我們不需要任何光源，但請注意，如果物體靠近地面或在任何其他需要看到球的陰影的情況下，那么必須向場景添加光源并將其放置在光源光線與太陽光線方向相同的位置。
4、結(jié)束語
在本教程中，我們已成功將HDRI環(huán)境貼圖添加到場景中。
我們首先使用 Vite 插件和我們在大多數(shù) Three js 項目中使用的樣板代碼。 然后，我們刪除旋轉(zhuǎn)動畫，取而代之的是軌道控件，以便用戶能夠使用鼠標查看他們想要的場景的任何角度。
接下來我們要做的是將物體的材質(zhì)從基本材質(zhì)更改為標準材質(zhì)，以便我們可以在球體表面添加鏡面效果。為了實現(xiàn)這一點，我們將金屬度設(shè)置為 1，粗糙度設(shè)置為 0
然后我們從BimAnt HDRI下載 HDRI 圖像并將其添加到我們的目錄中。 最終，我們編寫了與添加背景場景相關(guān)的腳本，結(jié)果令人驚訝！
當(dāng)然，你可以對房間的室內(nèi)設(shè)計進行相同的過程，并在房間背景場景中添加一些逼真的家具和其他元素，并創(chuàng)建自己的虛擬現(xiàn)實版本。文章來源：http://www.zghlxwxcb.cn/news/detail-739014.html
原文鏈接：Three.js添加HDRI背景 — BimAnt文章來源地址http://www.zghlxwxcb.cn/news/detail-739014.html
到了這里，關(guān)于HDRI貼圖下載及Three.js利用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
