three.js - 如何在网格之前渲染 scene.background？

Question

我是 Javascript 和 ThreeJS 的新手。 我有一个 3D 旋转立方体，它出现在 static 背景之上，但一个令人沮丧的属性是立方体通常首先出现，然后出现背景图像。 如何确保首先渲染背景？ 具体来说，我总是希望背景图像出现在立方体之前。

我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
<script src="js/three.js"></script>
<script>

    function resize() {

        var aspect = window.innerWidth / window.innerHeight;
        let texAspect = bgWidth / bgHeight;
        let relAspect = aspect / texAspect;

        bgTexture.repeat = new THREE.Vector2( Math.max(relAspect, 1), Math.max(1/relAspect,1) );
        bgTexture.offset = new THREE.Vector2( -Math.max(relAspect-1, 0)/2, -Math.max(1/relAspect-1, 0)/2 );

        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = aspect;
        camera.updateProjectionMatrix();
    }

    const scene = new THREE.Scene();

    // Arguments:
    //      1) Field of Value (degrees)
    //      2) Aspect ratio
    //      3) Near clipping plane
    //      4) Far clipping plane
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    const renderer = new THREE.WebGLRenderer();
    // Need to set size of renderer. For performance, may want to reduce size.
    // Can also reduce resolution by passing false as third arg to .setSize
    renderer.setSize( window.innerWidth, window.innerHeight );

    // Add the rendered to the HTML
    document.body.appendChild( renderer.domElement );

    // A BoxGeometry is an object that contains all points (vertices) and fill (faces)
    // of the cube
    const geometry = new THREE.BoxGeometry();

    // Determines surface color (maybe texture?)
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

    // Mesh takes a geometry and applies the material to it
    const cube = new THREE.Mesh( geometry, material );

    // Add background image
    const loader = new THREE.TextureLoader();
    bgTexture = loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' ,
        function(texture) {
            // Resize image to fit in window
            // Code from https://stackoverflow.com/a/48126806/4570472
            var img = texture.image;
            var bgWidth = img.width;
            var bgHeight = img.height;
            resize();
    });

    scene.background = bgTexture;

    // By default, whatever we add to the scene will be at coordinates (0, 0, 0)
    scene.add( cube );

    camera.position.z = 5;



    // This somehow creates a loop that causes the rendered to draw the scene
    // every time the screen is refreshed (typically 60fps)
    function animate() {
        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scene, camera );
    }
    animate();
</script>
</body>
</html>

Answer 1

发生这种情况是因为加载纹理所需的时间比 Three.js 设置场景的 rest 所需的时间长。 您已经有了TextureLoader.load()的onLoad回调的处理程序，因此我们可以使用它来调整行为。

在scene.add( cube ); ，添加一个新行：

cube.visible = false;

现在立方体仍将添加到场景中，但它不可见。 现在在function(texture)末尾的resize()调用之后，添加

cube.visible = true;

在本地测试问题和解决方案时，我遇到了其他一些不太重要的代码问题。 您可以在此 Gist中看到我必须进行的所有更改才能使其正常运行。

three.js - 如何在网格之前渲染 scene.background？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-01-25 21:00:35

three.js - 如何在网格之前渲染 scene.background？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-01-25 21:00:35

解决方案1
1 已采纳 2022-01-25 21:00:35