上文 WEB 3D技術(shù) three.js 3D賀卡(1) 搭建基本項(xiàng)目環(huán)境 我們簡(jiǎn)單搭了一個(gè)賀卡雛形

然后 我們要引入一個(gè)hdr的一個(gè)天空的效果 所以 我們需要在代碼中導(dǎo)入 RGBELoader

//導(dǎo)入 RGBELoader hdr工具
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

這里 大家可以選擇下載我的hdr資源
WEB 3D技術(shù) three.js 3D賀卡 天空 hdr資源
下載好之后呢 我們?cè)谕饷嫣滓粋€(gè) xhdr 文件夾 然后 放進(jìn)public靜態(tài)資源目錄下

然后 我們找個(gè)位置 加入一下這段代碼

//添加背景貼圖
let rgbeloader = new RGBELoader();
rgbeloader.load("/xhdr/xidis.hdr",(texture) =>{
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
})

導(dǎo)入一下 hdr 資源

運(yùn)行結(jié)果如下

我們外面的背景就出來(lái)了

然后 我們?cè)阡秩酒?下面加入代碼

//設(shè)置背景映射
renderer.toneMapping = THREE.ACESFilmicToneMapping;
//調(diào)整亮度
renderer.toneMappingExposure = 0.5;

toneMappingExposure 調(diào)整亮度 它默認(rèn)是 1 值是 0到1
這里 我們給 0.5 明顯就會(huì)稍微暗一點(diǎn)

接下來(lái) 我們來(lái)設(shè)置一下水文

然后 這里 我們?cè)?glb 加載的位置 將 traverse 每次遍歷的 對(duì)象 子元素 輸出出來(lái)

運(yùn)行代碼然后看控制臺(tái)

控制臺(tái)輸出的就是這個(gè)對(duì)象中全部的內(nèi)容

然后 我們這個(gè)模型中 地面的name 叫 Plane 這個(gè)每個(gè)模型人家設(shè)計(jì)的可能都不一樣
我們編寫

gltfLoader.load(
    // 模型路徑
    "/model/scene.glb",
    // 加較完成同調(diào)
    (gltf) =>{
        gltf.scene.traverse((child) => {
            if (child.name === "Plane"){
              child.visible = false;
            }
            if (child.isMesh) {
                child.frustumCulled = false;
                child.castShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
        });
        scene.add(gltf.scene);
    }
)

將name 等于 Plane 的 給他隱藏掉 visible 給false

然后 我們模型中 白色的一片地面就沒(méi)有了

這里 我們要引入一下依賴

import{ Water } from "three/examples/jsm/objects/Water2";

我們加入如下代碼

//添加水文
const waterGeometry = new THREE.CircleGeometry(300, 32);
const water = new Water(waterGeometry,{
  textureWidth: 1024,
  textureHeight: 1024,
  color: 0x00ffff,
  flowDirection: new THREE.Vector2(1, 1),
  scale: 100
})
scene.add(water);

但是運(yùn)行之后 我們會(huì)驚奇的發(fā)現(xiàn) 這個(gè)水 跑到我們整個(gè)場(chǎng)景的 中間去了

我們把他角度旋轉(zhuǎn)過(guò)來(lái)
設(shè)置rotation屬性 旋轉(zhuǎn) 90度

water.rotation.x = -Math .PI / 2;

我們這個(gè)水就躺下去了

然后 我們?cè)阡秩酒骱竺?加上

renderer.outputEncoding = THREE.sRGBEncoding;

紋理映射

整個(gè)水的顏色 也會(huì)自然很多
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-801030.html

到了這里，關(guān)于WEB 3D技術(shù) three.js 3D賀卡(2) 加入天空與水面效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！