如何在Three.js中可视化Vector3？代码核心逻辑解析

先看你提供的示例代码：

<!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>

下面分点解答你的疑问：

1. const points = []和points.push()的作用 #

• const points = []：创建一个空数组，专门用来存储三维空间中的点数据。
• points.push(new THREE.Vector3(...))：把一个个THREE.Vector3实例添加到数组里。每个Vector3都代表三维空间中的一个坐标点（x,y,z），后续会用这些点来生成线条的几何结构。

2. 如何在Three.js中可视化Vector3 #

Vector3本质是一个仅存储x/y/z坐标的数据对象，本身不可见，要可视化它可以用这些方法：

• 渲染成独立圆点：用THREE.Points，把Vector3数组转成BufferGeometry，搭配PointsMaterial，就能把每个Vector3渲染成一个圆点。
• 用几何体标记点：创建一个小型几何体（比如SphereGeometry小球），把几何体的position属性设置为目标Vector3的坐标，再添加到场景中，就能用小球标记这个点的位置。
• 连线可视化：就像示例里的做法，用THREE.Line把多个Vector3按顺序连接起来，形成连续的线条。

3. 程序输出效果的原因 #

先看你提供的示意图：
Vector3坐标示意图
程序输出效果

示例代码里定义了三个Vector3点：

• (-10, 0, 0)：X轴负方向10单位的点
• (0, 10, 0)：Y轴正方向10单位的点
• (10, 0, 0)：X轴正方向10单位的点

这三个点都在XY平面上，用THREE.Line连接后，就形成了一个V形线条。相机被设置在(0,0,100)的位置，并且朝向原点，所以我们看到的是这个V形的正面视图，线条颜色为蓝色是因为LineBasicMaterial的color被设置为0x0000ff（十六进制的蓝色）。

内容的提问来源于stack exchange，提问作者Cambria