Some transparent textures in three.js.

huangapple go评论56阅读模式
英文:

Some transparent textures in three.js

问题

渲染到浏览器时,一些纹理是透明的。有办法解决这个问题吗?我刚开始学习Three.js。

问题的图像

loader.load(model, (object) => {
    object.position.set(-0.8, -0.5, -0.2);
    scene.add(object);
    scene.add(pointLight);
    renderer.render(scene, camera);
    document.body.appendChild(renderer.domElement);
    const controls = new OrbitControls(camera, renderer.domElement);
    camera.position.z = 2;
    camera.position.y = 1;
    camera.position.x = 2.8;

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();
}

尝试了多个模型,但结果始终相同。

英文:

> Some textures are transparent when I render them out in the browser. Is there a way to solve this issue? Im just started learing Three.js.

image of the issue

loader.load(model, (object) =\>
{
object.position.set(-0.8,-0.5,-0.2)
scene.add(object)
scene.add(pointLight)
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 2;
camera.position.y = 1;
camera.position.x = 2.8;

    function animate(){
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene,camera);
    }
    animate();

}

Tried with multiple models but always same result.

答案1

得分: 0

那些区域是透明的,因为你正在查看几何体的背面。默认情况下禁用了渲染背面,但你可以在材质上启用它:

object.material.side = THREE.DoubleSide;

你可以在文档中了解更多关于 Material.side 的信息。

英文:

Those areas are transparent because you're looking at the back-face of your geometry. Rendering the back-face is disabled by default, but you can enable it on your material:

object.material.side = THREE.DoubleSide;

You can read more about Material.side in the docs.

huangapple
  • 本文由 发表于 2023年2月9日 01:59:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75389917.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定