HDRI贴图下载及Three.js利用

news2024/9/23 5:33:26

最令人兴奋的项目之一是在 Three js 中添加HDRI背景。 HDRI图像是从房间内部或花园、丛林或山脉等开放环境等场景中以 360 度捕获的。你可以自己创建任何这些图像，但这不是本教程的主题。相反，我们将从网站获取这些图像之一，并使用轨道控件，让用户能够转动物体并以 360 度查看所有内容。我们还可以将物体添加到场景中并赋予它们颜色或增加它们的金属度并降低它们的粗糙度以成为球形镜子。

在这里插入图片描述

推荐：用 NSDT编辑器快速搭建可编程3D场景

1、在Three.js中添加背景

可能性是无限的，你可以做很多事情。例如，可以通过添加不同家具、地毯、垫子等的 3D 模型来创建空房间的室内设计。本教程是创建虚拟世界的开始，你可以虚拟地建造自己的梦想之家，并从各个不同的方面观看它。正如我们在其他 Three js 教程中所说，一旦开始使用 Three js，天空才是极限。

我们将从three.js 场景的简单元素开始，包括相机、渲染器、场景、对象和光源（如果需要）。在此之前，我们使用 Vite 插件来轻松创建运行 Three.js 代码所需的所有文件夹和文件。首先，使用以下命令在项目目录中创建一个文件夹：

mkdir BackgroundScene
cd BackgroundScene

然后，在文件夹中，运行 Vite 插件命令即可创建必要的文件和文件夹：

npm create vite@latest

然后，输入项目名称。可以用glowingSphere作为名字。但是，该名称是任意的，你可以选择任何想要的名称。然后，选择 vanilla 作为框架和变体。之后，在终端中输入以下命令：

cd BackgroundScene
npm install

接下来，你可以在 main.js 文件中输入要编写的 JavaScript 代码。因此，我们将输入基本或模板代码，用于运行带有动画对象（例如球体）的每个项目。另外，每次创建项目时不要忘记安装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();

上面的代码可以作为后续项目的样板。此代码的输出将是蓝色球体，如下图所示。但是，为了能够显示这一点，你应该在终端中编写以下命令：

pm run dev

在这里插入图片描述

2、在Three.js 中使用轨道控件设置背景

现在，我们想要创建一个要添加的背景场景，但在此之前，我们需要将渲染从动画更改为轨道控件，这样我们就可以控制从动画更改场景，而不是旋转对象。相机视角。这样做使我们能够从各个角度查看 HDRI 图像。首先，我们需要导入以下 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();

现在我们应该能够围绕该物体运行。接下来我们应该做的是将基础材质更改为标准材质并创建镜面效果：

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环境贴图

最后，我们到达最令人兴奋的部分，即将 HDRI 图像添加到背景中。

为此，我们需要首先从BimAnt HDRI等网站找到这些图像，BimAnt HDRI提供超过600张HDRI环境贴图，优点是无需登录即可直接预览和下载：

在这里插入图片描述

http://hdri.bimant.com

之后，我们应该创建一个名为 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;
})

现在，如果我们保存代码，结果将如下所示：
在这里插入图片描述