Question

在Three.js的第53版中，我可以使用着色器材料伪造一个具有另一个几何体的几何体中的孔

vertex:void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

和

fragment:void main() {
    gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0); //alpha is zero
}

我可以偷看“洞”＆＃39;并看到后面的物体。从版本54开始，我只看到内部物体是白色的，我不能再窥视了。我怎样才能让它再次运作？

我的完整样本：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #DDFFDD;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="../build/old/three_53.js"></script>
    <script src="../build/old/controls/TrackballControls_53.js"></script>

    <script>

        var camera, scene, renderer, controls, pointLight;

        init();
        animate();

        function init() {

            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            //renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.sortObjects = false;
            document.body.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;


            controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            scene = new THREE.Scene();

            scene.add( new THREE.AmbientLight( 0x505050 ) );

            pointLight = new THREE.PointLight(0xFFFFFF, 0.9);
            scene.add(pointLight);


            var mainGroup = new THREE.Object3D();

            var geometry = new THREE.CubeGeometry( 100, 100, 10 );
            var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xaaaaaa } ) );
            //mesh.renderOrder = 2;

            var geometry2 = new THREE.CubeGeometry( 50, 50, 11 );

            var material2 = new THREE.ShaderMaterial({vertexShader:'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}', fragmentShader:'void main() { gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0);}'});

            var innerGroup = new THREE.Object3D();
            var mesh2 = new THREE.Mesh( geometry2, material2 );
            //mesh2.renderOrder = 1;
            mainGroup.add( mesh );

            innerGroup.add(mesh2);
            mainGroup.add( innerGroup );
            //

            var geometry3 = new THREE.SphereGeometry( 50);
            var mesh3 = new THREE.Mesh( geometry3, new THREE.MeshLambertMaterial( { color: 0x00ff00 } ) );
            mesh3.position.z = -200;
            //mesh2.renderOrder = 3;
            mainGroup.add( mesh3 );

            scene.add(mainGroup);

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            controls.update();
            pointLight.position.set(camera.position.x, camera.position.y, camera.position.z);

            renderer.render( scene, camera );

        }

    </script>

</body>

只有“洞穴”对象“才有效”。与着色器材料在一组。

Answer 1

如果这只是偶然发生的话。但是，如果你使用renderOrder，你可以在71中使它工作：

holeObj.renderOrder = 1;
bgObj.renderOrder = 2;

现在，如果holeObj位于bgObj之前，那么在正常情况下，您将看到bgObj。这是因为当它绘制透明像素时，holeObj仍将写入Z缓冲区。 bgObj将从该位置屏蔽。但这只适用于特定的视图方向，而无需仔细管理排序。

Threejs，使用ShaderMaterial伪造几何形状的洞

1 个答案: