javascript - 如何去除此处的透明度

Question

如何删除已变得透明的剪裁对象或阻止其下方的对象显示。 如果它看起来像真实世界的实心立方体就更好了。 这是用 three.js 用 javascript 编写的。 HTML 和 CSS 没有缺点。此处仅渲染显示问题。

var scene, camera, renderer, cube;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.001;

function init() {
    scene = new THREE.Scene();
    initLight();
    drawScene();
    initCamera();
    initRenderer();
    document.body.appendChild(renderer.domElement);
}

function initLight() {
    const light = new THREE.PointLight(0xFFFFFF);
    light.position.x = 50;
    light.position.y = 50;
    light.position.z = 130;
    scene.add(light);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
    camera.position.set(1, 3, 5);
    camera.lookAt(scene.position);
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.sortObjects = false;
}

function drawScene() {
    var material = new THREE.MeshLambertMaterial({ color: 0xFF6600 });
    var shape = new THREE.CubeGeometry(1, 1, 1);
    cube = new THREE.Group();
    for (var a = -10; a <= 10; a = a + 2) {
        for (var b = -10; b <= 10; b = b + 2) {
            for (var c = -10; c <= 10; c = c + 2) {
                var part = new THREE.Mesh(shape, material);
                part.position.set(a, b, c);
                cube.add(part);
            }
        }
    }
    scene.add(cube);
}
function rotateCube() {
    cube.rotation.x -= SPEED;
    cube.rotation.y -= SPEED;
    cube.rotation.z -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateCube();
    renderer.render(scene, camera);
}

init();
render();

<script src="https://threejs.org/build/three.js"></script>

Answer 1

我将 PerspectiveCamera 近平面更改为 0.01 而不是 1，并添加了包含以使您的代码段运行。

您看到的“透明度”是立方体在靠近平面的相机上剪裁。通过将平面拉近相机，您可以缩小世界中的视口(viewport)，因此它更容易适合立方体之间。

另一件事是背面剔除......如果从内部查看立方体，它会使立方体不可见。您可以通过 material.side = THREE.DoubleSide 禁用背面剔除，代价是渲染两倍的几何体。

var scene, camera, renderer, cube;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.001;

function init() {
    scene = new THREE.Scene();
    initLight();
    drawScene();
    initCamera();
    initRenderer();
    document.body.appendChild(renderer.domElement);
}

function initLight() {
    const light = new THREE.PointLight(0xFFFFFF);
    light.position.x = 50;
    light.position.y = 50;
    light.position.z = 130;
    scene.add(light);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 0.01, 10);
    camera.position.set(1, 3, 5);
    camera.lookAt(scene.position);
}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.sortObjects = false;
}

function drawScene() {
    var material = new THREE.MeshLambertMaterial({ color: 0xFF6600, side: THREE.DoubleSide});
    var shape = new THREE.CubeGeometry(1, 1, 1);
    cube = new THREE.Group();
    for (var a = -10; a <= 10; a = a + 2) {
        for (var b = -10; b <= 10; b = b + 2) {
            for (var c = -10; c <= 10; c = c + 2) {
                var part = new THREE.Mesh(shape, material);
                part.position.set(a, b, c);
                cube.add(part);
            }
        }
    }
    scene.add(cube);
}
function rotateCube() {
    cube.rotation.x -= SPEED;
    cube.rotation.y -= SPEED;
    cube.rotation.z -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateCube();
    renderer.render(scene, camera);
}

init();
render();

<script src="https://threejs.org/build/three.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>