Question

我试图只显示面向相机的立方体网格的单面，并且已经将一个非常不优雅的工作版本混在一起，但我无法想象这是正确的方法。

相机和立方体将始终彼此成直角，因此我认为我可以推断出相机的方向向量，并采用相反的方向来获得立方体的正确面。面部确定后，我将所有其他材料设置为透明材料。

我创建了一个简单的（ish）场景，其中摄像机的位置是固定的，我只是旋转立方体：

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 2, 5000);
    camera.eulerOrder = "YXZ";
    camera.position.set(0, 0, 0);
    scene.add(camera);

    cubeGeometry = new THREE.CubeGeometry(10, 5, 10);
    var cubeGeometryMaterials = [
        new THREE.MeshBasicMaterial({color:0xff0000, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0x00ff00, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0xffffff, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0x000000, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0x0000ff, transparent: true, opacity: 0.75, side: THREE.DoubleSide}),
        new THREE.MeshBasicMaterial({color:0xff00ff, transparent: true, opacity: 0.75, side: THREE.DoubleSide})
    ];

    mesh = new THREE.Mesh( cubeGeometry, new THREE.MeshFaceMaterial(cubeGeometryMaterials) );
    mesh.originalMaterials = cubeGeometryMaterials.slice(0);
    mesh.position.set(camera.position.x, -5, camera.position.z - 25);
    scene.add(mesh);

    cubeQuaternion = new THREE.Quaternion();
    cubeQuaternion.setFromRotationMatrix(mesh.matrix);
    cubeVector = (new THREE.Vector3( 0, 0, 1 )).applyQuaternion(cubeQuaternion);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    $('#three').append(renderer.domElement);
    animate();
}

这是我拼凑在一起渲染的内容：

function render() {
    // rotate cube
    mesh.rotation.y += (rotateAngle - mesh.rotation.y)/10;
    if(Math.abs(mesh.rotation.y - rotateAngle) < 0.001){
        cancelAnimationFrame(rafID);
    }

    // update cubeVector
    // via: https://stackoverflow.com/questions/15696963/three-js-set-and-read-camera-look-vector
    // &    https://stackoverflow.com/questions/18058776/how-to-tell-if-the-camera-is-looking-at-the-face-of-a-plane
    cubeQuaternion.setFromRotationMatrix(mesh.matrix);
    cubeVector = (new THREE.Vector3( 0, 0, 1 )).applyQuaternion(cubeQuaternion).negate();

    // vector.round() doesn't seem to work?
    var roundedVector = {
        x: Math.round(cubeVector.x),
        y: Math.round(cubeVector.y),
        z: Math.round(cubeVector.z)
    }
    var faceName = roundedVector.x+"x"+roundedVector.y+"x"+roundedVector.z;
    var faceIndex = faces.indexOf(faceName);
    var newMaterial;

    for(var i = 0, len = mesh.material.materials.length; i < len; i ++){
        if(showOneSide == true){
            // only side facing camera has original material
            if(i == faceIndex){
                newMaterial = mesh.originalMaterials[i];
            }else{
                newMaterial = transparentMaterial;
            }
        }else{
            // show original material
            newMaterial = mesh.originalMaterials[i];
        }

        // change material if not already set
        if(mesh.material.materials[i] != newMaterial){
            mesh.material.materials[i] = newMaterial;
            mesh.material.materials[i].needsUpdate = true;

            if(showOneSide){
                $('#face-index').text('faceIndex: '+i);
            }
        }
    }



    renderer.render(scene, camera);
}

关于最好的方法的指导将是惊人的！

目前的小提琴：http://jsfiddle.net/majman/6vrH8/

引用了这些问题 - three.js set and read camera look vector - How to tell if the camera is looking at the face of a plane

仅显示垂直于相机的立方体的最近侧

0 个答案: