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颜色Euler Frustum Line3数学矩阵3 Matrix4平面四元数Ray Sphere Spline Triangle Vector2 Vector3 Vector4

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

没有这些数学对象（包括Line3）是Object3D，即要呈现的东西。

这是独家新闻：
1）制作场景，相机和渲染器 2）将Object3D添加到场景中 2a）Object3D可以是Points，Lines或Meshes 2b）点，线和网格由几何和材料组成 2c1）对于点和线，几何包含顶点（Vector3）和面（Face3）。做“vertices.push”或“faces.push” 2c2）对于网格，几何可以是：框圆柱十二面体挤压二十面体车床八面体参数平面多面体环形状球体四面体文本环面Torus结管
3）做“renderer.render（场景，相机）”。

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

Answer 2

对于球体，您创建一个几何体（SphereGeometry）并将其作为参数传递，以创建具有材质的网格（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);

在Threejs绘制Line3

2 个答案: