javascript - 在 Threejs 中画一条线3

Question

我想在 Threejs 中绘制 Line3，这是我的代码:

start = new THREE.Vector3(20, 10, 0);

end = new THREE.Vector3(200, 100, 0);
var line  = new THREE.Line3(start, end);
   scene.add(line);

代码没有给出任何错误，但也没有画出界限。 在同一个程序中，我还有一个球体:

   var initScene = function () {
   window.scene = new THREE.Scene();
    window.renderer = new THREE.WebGLRenderer({
      alpha: true
    });

    window.renderer.setClearColor(0x000000, 0);
    window.renderer.setSize(window.innerWidth, window.innerHeight);

    window.renderer.domElement.style.position = 'fixed';
    window.renderer.domElement.style.top = 0;
    window.renderer.domElement.style.left = 0;
    window.renderer.domElement.style.width = '100%';
    window.renderer.domElement.style.height = '100%';

    document.body.appendChild(window.renderer.domElement);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
    directionalLight.position.set( 0, 0.5, 1 );
    window.scene.add(directionalLight);

    window.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    window.camera.position.fromArray([0, 150, 700]);
    window.camera.lookAt(new THREE.Vector3(0, 160, 0));

    window.addEventListener('resize', function () {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.render(scene, camera);

    }, false);

    scene.add(camera);

    // set up the sphere vars
    var radius = 50,
    segments = 16,
    rings = 16;

    // create a new mesh with
    // sphere geometry - we will cover
    // the sphereMaterial next!
    var sphereMaterial =
    new THREE.MeshLambertMaterial(
    {
      color: 0xCC0000
    });
    var sphere = new THREE.Mesh(

    new THREE.SphereGeometry(
    radius,
    segments,
    rings),

     sphereMaterial);

    // add the sphere to the scene
    scene.add(sphere);

    start = new THREE.Vector3(20, 10, 0);

    end = new THREE.Vector3(200, 100, 0);
    var line  = new THREE.Line3(start, end);
       scene.add(line);
    renderer.render(scene, camera);
    };
  
    initScene();

我只在屏幕上看到球体。你能告诉我哪里错了吗？

Answer 1

ADLADS(晚了一天，缺一美元):
来自 http://threejs.org/docs/

Line3 是 Three.js 的众多数学对象之一，可用于计算几何内容。其他还有: Box2 Box3 颜色欧拉平截头体 Line3 数学矩阵3 矩阵4 平面四元数射线球体样条三 Angular 形Vector2 Vector3 Vector4

假设您有“line”(一个 Line3 对象)和“plane”(一个 Plane 对象)。您可以通过执行plane.intersectsLine(line)来检查直线是否与平面相交。会给出真或假。

这些数学对象(包括 Line3)都不是要渲染的 Object3D。

这是独家新闻:
1) 制作场景、相机和渲染器。
2) 将 Object3D 添加到场景中。
2a) Object3D 可以是点、线或网格。
2b) 点、线和网格由几何图形和 Material 组成。
2c1) 对于点和线，几何图形包含顶点(Vector3 的)和面(Face3 的)。执行“vertices.push”或“faces.push”。
2c2) 对于网格，几何形状可以是: 长方体 圆形 圆柱体 十二面体 拉伸(stretch)二十面体 车床 八面体 参数化平面 多面体 环形 球体 四面体 文本 圆环 圆环结 管
3)执行“渲染器.渲染(场景，相机)”。

谢谢你的提问。它让我理清了思路。