MeshLine

buttons

by Benderlio

HTML

<div id="info">MeshLine (AxesHelper)
</div>
 <script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/spite/THREE.MeshLine/master/src/THREE.MeshLine.js"></script>

<button id="update">Update</button>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  //overflow: hidden;
}

#update{
  position:absolute;
  top:20px;
  left:20px;
  z-index:1000;
}

JavaScript

var scene, renderer, camera;
var controls;

init();
animate();

document.querySelector("#update").addEventListener("click",()=>{
	updateGeometry()
})

function makeLine (meshLine, colorName, width) {
  let material = new MeshLineMaterial({
    useMap: false,
    color: new THREE.Color(colorName),
    opacity: 1,
    resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
    sizeAttenuation: false,
    lineWidth: width,
    near: camera.near,
    far: camera.far
  });
  
  let mesh = new THREE.Mesh (meshLine.geometry, material)
  console.log (mesh)
	return mesh;  
}

function MyAxesHelper(size = 10, width = 5) {

  let axes = new THREE.Object3D();

  let meshLine, geometry;
  
  meshLine = new MeshLine();
	geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3());
  geometry.vertices.push(new THREE.Vector3(size, 0, 0));
  meshLine.setGeometry(geometry);
  axes.add (makeLine (meshLine, 'red', width))

  meshLine = new MeshLine();
	geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3());
  geometry.vertices.push(new THREE.Vector3(0, size, 0));
  meshLine.setGeometry(geometry);
  axes.add (makeLine (meshLine, 'green', width))

  meshLine = new MeshLine();
	geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3());
  geometry.vertices.push(new THREE.Vector3(0,0,size));
  meshLine.setGeometry(geometry);
  axes.add (makeLine (meshLine, 'blue', width))

	return axes;
}


  function updateGeometry() {
   
		
    var line2d = new THREE.Line3(
                    new THREE.Vector3(0, 0, 0),
                    new THREE.Vector3(100, 100, 0)
                )
    var center = line2d.getCenter();
    var curve = new THREE.QuadraticBezierCurve3(
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(center.x, center.y, 0.5),
      new THREE.Vector3(100, 200, 0)
    );


    var points = curve.getPoints(50);
    var geometry = new THREE.Geometry().setFromPoints(points);
    var newMeshLine = new...