Question

我试图添加一个垂直于我点击的脸部的框（称为＆＃34;标记＆＃34;）。

要做到这一点，点击后，我投射一条光线，如果它碰到了某些东西，我会得到正常的相交点值并将它们转移到＆＃34;标记＆＃34;作为其旋转值。在提出这个问题之前，我已经阅读了这个答案（How do I make an object perpendicular to a face with Three.js?），但无法使其发挥作用......

现在，它会在需要的位置添加标记，但在立方体的顶部会有一个稍微错误的方向。

Wrong orientation on cube and uncontroled Y rotation

我不明白两件事： 1.为什么faceNormalsHelper的方向之间存在差异并且与[0] .face.normal相交。 2.如何控制Y旋转？

我的错误是什么？为了帮助你，我做了一个小提琴（https://jsfiddle.net/jpyncf62/1/），这里是我用来做的代码：

function clickDown(e) {
    e.preventDefault();

    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
        var intersect = intersects[0];
        console.log(intersects[0]);
        console.log(console.log(intersects[0].object.name));

        var markerGeo = new THREE.BoxGeometry(1, 6, 1, 1, 1, 1);
        var markerMat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
        var marker = new THREE.Mesh(markerGeo, markerMat);
        marker.name = "marker";
        marker.position.copy(intersect.point);

        marker.lookAt(intersect.face.normal);

        scene.add(marker);
    }
}

谢谢你的帮助！

Answer 1

您正在添加立方体和平面。给他们位置和轮换。但是为了正确地交叉它们的法线，你应该应用矩阵。

    var container, stats;
    var camera, scene, renderer;
    var objects = [];
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    init();
    animate();

    function init() {
        container = document.getElementById("webgl-output")
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set(20, 50,50);
        camera.lookAt( scene.position );

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

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 1, 0 );
        scene.add( light );

        var material = new THREE.MeshLambertMaterial( { color: 0x4fc2c9 } );
        var cube = new THREE.Mesh( new THREE.BoxGeometry( 10, 10, 10, 1, 1, 1 ), material );
        cube.name = "I'm a cube";
        objects.push( cube );
        scene.add( cube );


        cube.position.set( 0, 5, 0 );
        cube.rotation.set( 0, 0, Math.PI / 4);

        applyMatrixOfMesh(cube); // Apply matrix of cube

        // Add helpers after applied matrix
        var faceNormalsHelper = new THREE.FaceNormalsHelper( cube, 1 );
        cube.add( faceNormalsHelper );

        var vertexNormalsHelper = new THREE.VertexNormalsHelper( cube, 1 );
        cube.add( vertexNormalsHelper );

        var planeGeo = new THREE.PlaneGeometry( 60, 20, 1, 1 );
        var planeMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
        var plane = new THREE.Mesh( planeGeo, planeMat );
        plane.position.set(0, 0, 0);
        plane.rotation.x = -0.5 * Math.PI;
        plane.name = "plane01";

        applyMatrixOfMesh(plane); // Apply matrix of plane

                    scene.add( plane );
        objects.push( plane );

        var axes = new THREE.AxisHelper( 20 );
        scene.add( axes );

        renderer = new THREE.WebGLRenderer( { antialias: true });
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setClearColor( 0xeeeeee );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        document.addEventListener('mousemove', mouseMoving, false);
        document.addEventListener('mousedown', clickDown, false);
    }

    function mouseMoving(e) {
        mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;            
        raycaster.setFromCamera( mouse, camera );

        var intersects = raycaster.intersectObjects( scene.children );

        for ( var i = 0; i < intersects.length; i++ ) {
            var posY = intersects[ 0 ].point.y.toFixed(2);
        }
    }

    function clickDown(e) {
        e.preventDefault();

        raycaster.setFromCamera( mouse, camera );
        var intersects = raycaster.intersectObjects( objects );            

        if( intersects.length > 0 ) {
            var intersect = intersects[ 0 ];
            console.log( intersects[ 0 ]);
            console.log( console.log( intersects[ 0 ].face.normal ) );

            var markerGeo = new THREE.BoxGeometry( 1, 1, 6, 1, 1, 1 ); // I changed BoxGeometry
            var markerMat = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
            var marker = new THREE.Mesh( markerGeo, markerMat );
            marker.name = "marker";



            marker.lookAt( intersect.face.normal );  // First look At to normal
            marker.position.copy( intersect.point )  // After give position to marker

            scene.add( marker );
        }
    }

    function applyMatrixOfMesh(mesh) { // You should apply Matrix of cube and plane
        mesh.updateMatrix();
        mesh.geometry.applyMatrix(mesh.matrix);

        mesh.position.set(0, 0, 0);
        mesh.rotation.set(0, 0, 0);
        mesh.updateMatrix();
    }


    function animate() {
        requestAnimationFrame( animate );
        render();
    }

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

代码中有一个名为'applyMatrixOfMesh'的函数。你需要在每个“THREE.Mesh”中使用它来用于交叉。

Three.js：如何垂直添加一个物体（正常）？

1 个答案: