MeshLine

buttons

by navinleon

HTML

<div id="info">MeshLine (AxesHelper)
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.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>

CSS

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

body {
  //overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;

init();
animate();

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 init() {

	scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  window.addEventListener('resize', onWindowResize, false);

  /////////////////////////////////////////
 ...