CODEWITHSUNDEEP
javascriptthree.jsline
KarateKid
KarateKid

Reputation: 3436

Drawing a Line3 in Threejs

I want to draw a Line3 in a Threejs and here is my code for it:

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

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

The code doesn't give any error but it doesn't draw the line either. In the same program, I also have a sphere:

   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();

I only see the sphere on the screen. Can you please tell me where I am wrong?

enter image description here

Upvotes: 2

Views: 3543

Answers (2)

dcromley
dcromley

Reputation: 1420

ADLADS (A Day Late and A Dollar Short):
From http://threejs.org/docs/

Line3 is one of many math objects of three.js that can be used to compute geometric stuff. Others are: Box2 Box3 Color Euler Frustum Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spline Triangle Vector2 Vector3 Vector4

Say you had your "line", a Line3 object and "plane", a Plane object. You could check if the line intersected the plane by doing plane.intersectsLine(line). Would give true or false.

NONE OF THESE MATH OBJECTS (including Line3's) are Object3D's, the things to be rendered.

Here's the scoop:
1) Make the scene, the camera, and the renderer.
2) Add Object3D's to the scene.
2a) Object3D's can be Points, Lines, or Meshes.
2b) Points, Lines, and Meshes are made of Geometries and Materials.
2c1) for Points and Lines, the Geometries contain vertices(Vector3's) and faces(Face3's). Do "vertices.push" or "faces.push".
2c2) for Meshes, Geometries can be: Box Circle Cylinder Dodecahedron Extrude Icosahedron Lathe Octahedron Parametric Plane Polyhedron Ring Shape Sphere Tetrahedron Text Torus TorusKnot Tube
3) Do "renderer.render(scene, camera)".

Thanks for the question. It straightened me out.

Upvotes: 3

Mouloud85
Mouloud85

Reputation: 4234

For the sphere, you create a geometry (SphereGeometry) and pass it as argument to create a mesh (sphere) that has a material, so it can be drawed. Your line is a 2-vertices geometry, you need to create the corresponding mesh : 

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);

Upvotes: 0

Related Questions