在 Threejs 中绘制 Line3

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

对于球体，您创建一个几何体 (SphereGeometry) 并将其作为参数传递以创建具有 material 的网格 (sphere)，因此可以绘制它.您的线是一个 2 顶点几何体，您需要创建相应的网格：

var lineMesh=new THREE.Line(
    line,//the line3 geometry you have yet
    new THREE.LineBasicMaterial({color:0x0000ff})//basic blue color as material
);
scene.add(lineMesh);

Answer 2

ADLADS（迟到一天，缺一美元）：
来自 http://threejs.org/docs/

Line3 是 three.js 的众多数学对象之一，可用于计算几何内容。其他是： Box2 Box3 Color Euler Frustum Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spline Triangle Vector2 Vector3 Vector4

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

NONE 这些数学对象（包括 Line3 的）是 Object3D 的，要渲染的东西。

这是独家新闻：
1) 制作场景、相机和渲染器。
2) 将 Object3D 添加到场景中。
2a) Object3D 可以是点、线或网格。
2b) 点、线和网格由几何体和材料构成。
2c1) 对于点和线，几何包含顶点(Vector3's) 和面(Face3's)。执行 "vertices.push" 或 "faces.push".
2c2) 对于网格，几何体可以是： Box Circle Cylinder Dodecahedron Extrude Icosahedron Lathe Octahedron Parametric Plane Polyhedron Ring Shape Sphere Tetrahedron Text Torus TorusKnot Tube
3）做"renderer.render(scene, camera)"。

感谢提问。它让我理顺了。

在 Threejs 中绘制 Line3

Drawing a Line3 in Threejs

javascript

line

three.js