Threejs - Line Buffer Geometry

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<!--
Dot vs cross product
Cross product always returns you an arrow/vector. The return vector will always be perpendicular to the two arrows. it mattesr which of the two arrows goes first.

Dot product always returns a number. If you have two normalized vector, it'll return you a normalized value between 0-1. It can also be negative if one of the vector is negative. It doesn't matter which arrows goes first or second, you'll get the same value.

If the two vectors are not normalized, you may get odd results.
-->

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

// Simple three.js example

import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // ambient
    //scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 1 ) );

    
    const p1 = new THREE.Vector3();
    const p2 = new THREE.Vector3(0,1);
    const l1Mesh = createLine(p1, p2);
    scene.add(l1Mesh);
    
   	l1Mesh.scale.set(1, 2, 1);
    console.log('distance: ', getLineDistance(l1Mesh));
    freezeTransform(l1Mesh);
   console.log('distance: ', getLineDistance(l1Mesh));
   
      const p3 = new THREE.Vector3(0, 1, 2);
    const p4 = new THREE.Vector3(0, 2, 2);
    const l2Mesh = createLine(p3, p4);
    scene.add(l2Mesh);
    
    l2Mesh.scale.set(1, 2, 1);
    console.log('distL2: ', getLineDistance(l2Mesh));
    freezeTransform(l2Mesh);
   console.log('distL2: ', getLineDistance(l2Mesh));
    
    
		
    
}

function animate() {

    requestAnimationFrame( animate );
    
    //controls.update();

    renderer.render( scene, camera );

}

function createLine(p1, p2) {
    const l1Points = [p1, p2];
    const l1 = new THREE.BufferGeometry().setFromPoints(...