在threejs中渲染透明瓶子

Question

我在搅拌机中创建了瓶子。如果我在 Threejs 编辑器上测试它会给出正确的结果。

但是当我在我的网站上呈现它时，它给出了

这是输出。我只是对 Threejs 的新手

import './style.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'



const updateAllMaterials = () =>
{
    scene.traverse((child) =>
    {
        if(child instanceof THREE.Mesh)
        {
            child.material.envMap = environmentMap
            child.material.transparent = true
            child.material.opacity = 0.1
            child.material.envMapIntensity = 5

            const material = new THREE.MeshPhysicalMaterial( {
                transmission: 1, // use material.transmission for glass materials
                opacity: 0.2,
                color:"blue",
                transparent: true
            } );
            child.material = material
        }
    })
}

// Canvas
const canvas = document.querySelector('canvas.webgl')

const gltfLoader = new GLTFLoader()
gltfLoader.load('/models/wine5.glb',(bottle)=>{
    bottle.scene.scale.set(0.5,0.45,0.5)
    bottle.scene.rotation.set(-0.5,1,0.3)
    bottle.scene.position.set(-1,-1.5,2)
    updateAllMaterials()
    scene.add(bottle.scene)

})

// Scene
const scene = new THREE.Scene()
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

const directionalLights = new THREE.PointLight('#fff',4)
directionalLights.position.set(-0.4,2,5)
scene.add(directionalLights)



/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
scene.add(camera)

// ENV MAPS

const  singleTextureLoader = new THREE.TextureLoader()

singleTextureLoader.load('/BG/tree.jpg',(img)=>{
    scene.background = img
})



/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1
renderer.depth = false

Answer 1

您的 updateAllMaterials() 正在遍历一个空场景，因此未将材料应用于任何内容。只需像这样交换调用：

scene.add(bottle.scene)
updateAllMaterials()

此外，在 updateAllMaterials() 函数中，您正在更改子材质的一些参数，然后您覆盖材质本身，从而丢失所有更改。

应该是这样的：

const material = new THREE.MeshPhysicalMaterial({
    transmission: 1,
    opacity: 0.2,
    color:"blue",
    transparent: true,
    envMap: environmentMap,
    transparent: true,
    opacity: 0.1,
    envMapIntensity: 5
});
child.material = material