如何在three.js中可视化Vector3？答案

【问题标题】：How to visualize Vector3 in three.js?如何在three.js中可视化Vector3？
【发布时间】：2022-08-02 16:04:45
【问题描述】：

我正在阅读有关如何在 three.js 文档中绘制线条的教程，使用的代码如下所示：

代码很好，没有问题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=\"utf-8\">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src=\"///C:/Users/pc/Desktop/threejs_tutorial/build_threejs.html\"></script>
        <script>
        
        const scene = new THREE.Scene();
        
        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
        camera.position.set( 0, 0, 100 );
        camera.lookAt( 0, 0, 0 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        //create a blue LineBasicMaterial
        const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

        const points = [];
        points.push( new THREE.Vector3( - 10, 0, 0 ) );
        points.push( new THREE.Vector3( 0, 10, 0 ) );
        points.push( new THREE.Vector3( 10, 0, 0 ) );

        const geometry = new THREE.BufferGeometry().setFromPoints( points );

        const line = new THREE.Line( geometry, material );


        scene.add( line );
        renderer.render( scene, camera );


        </script>
    </body>
</html>

但引起我注意的是常量点 = [],点数.push和矢量3部分代码。

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );

我不明白的功能常量点 = [];以及为什么使用它。

我不明白的功能点数.push以及为什么使用它。

Three.Vector3 命令看起来像是在 3D 平面中定位点。对于这种情况，它看起来像这样：

我们如何在 three.js 中可视化 Vector3，为什么输出看起来像这样？

标签： three.js 3d

【解决方案1】：

const points = []; 创建一个空的Array^[MDN] 对象，即一个没有元素的数组，它的.length 为零。

points.push( new THREE.Vector3( - 10, 0, 0 ) ); 将新的 Vector3 添加到数组的末尾。由于数组从零元素开始，第一次调用添加了第一个元素；第二个添加了第二个元素；等等

关于为什么用线段显示几何图形，比较Line 和Points。

【讨论】：

谢谢你的回答，同志！但是为什么我们需要数组呢？
您如何为几何图形提供多个 Vector3？
哦……我明白了……数组的目的是使 Vector3 创建的点“真实”，因为单独调用 Vector3 仅说明点的位置。调用数组并将 Vector3 放入数组中会创建一个真实的指定点，因为数组是一个对象，所以数组中 Vector3 指定的点也成为一个对象。
我希望threejs.org 网站不再关闭，因为目前它在我的位置上。
我根据对您答案的理解写了一个答案。我的解释正确吗？

【解决方案2】：

啊，是的……这实际上是对这些sn-ps代码目的的解释。

的目的

常量点 = [];

是使 Vector3 创建的点“真实”，因为单独调用 Vector3 仅说明点的位置。调用数组并将 Vector3 放入数组中会创建一个真实的指定点，因为数组是一个对象，所以数组中 Vector3 指定的点也成为一个对象。

的目的

points.push(new THREE.Vector3(- 10, 0, 0));

points.push(new THREE.Vector3(0,10,0));

和

points.push(new THREE.Vector3(10, 0, 0));

是使用 Vector3 在相机的视锥体中定位所需的点...

【讨论】：

@Phil N. 这是对 4 个 sn-ps 代码的正确解释吗？