Question

我想使用鼠标在3d环境中绘制2D平面。我对3.js经验不足，可能会犯一些非常简单的错误，但

为此，我需要 1-在屏幕上单击鼠标以获取坐标，并将其转换为3d坐标。两次单击即可获得左上角和右下角。

2-使用给定的点定义平面中心的长度，宽度和位置。在运行时创建飞机。

3-后来的计划将这些平面挤压成3d长方体，但现在我只关注前两件事。

1- 我有一些变量来保存鼠标单击的坐标，还有一个用于监听鼠标移动和单击事件的侦听器。

    function onMouseMove( event ) { 
    // calculate mouse position in normalized device coordinates 
    // (-1 to +1) for both components 
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
    }

我在场景中设置了一个大水平面。我当时想我可以使用射线投射与平面相交，并使用该相交处的坐标作为要绘制的平面的一个角。

var firstClick = new Vector3();
var secondClick = new Vector3();

function onMouseDown(e) {
        if(mouseMode==2)
            {
                raycaster.setFromCamera( mouse, camera ); 
                // calculate objects intersecting the picking ray va intersects =     
                var intersection = raycaster.intersectObjects( scene.children ); 

                for ( var i = 0; i < intersection.length; i++ ) { 
                    var vector = new THREE.Vector3().copy( intersection[ 0 ].point );

                    console.log( 'local point: ', vector );
                    secondClick = vector;
                    console.log( 'Click point: ', firstClick );
                }
                mouseMode =3;
            }

        if (mouseMode == 1){ //Same as above but changes the mouseMode to 2}
}

我遇到的问题是，我得到的关于交点的坐标似乎不正确。沿一个轴移动时，其他两个值不应更改。我想知道这种方法是否会因为相机而失真，以及是否有必要获取相交点的坐标。

2-

在我的更新循环中，我有这个

        if (mouseMode == 3)
        {
            var tempPlane = new THREE.PlaneGeometry( Math.abs(firstClick.x-secondClick.x), Math.abs(firstClick.z-secondClick.z), 64 );
            var materialPlane1 = new THREE.MeshBasicMaterial( {color: 0x808080, side: THREE.DoubleSide} );
            var roomPlane = new THREE.Mesh( tempPlane, materialPlane1 );
            scene.add( roomPlane );
            mouseMode = 1;

        }

现在应该只在渲染器中绘制一个平面。在重置mouseMode之前，可以绘制更多平面。当代码到达这一点时，将显示以下错误消息。

THREE.DirectGeometry：不支持匿名几何

从现在开始，我不确定如何解决此问题或怎么做。最终目标是能够绘制任意数量的平面。

如何在运行时绘制飞机

0 个答案: