MeshLine not showing on the webgl space

Questions
1

Hi. I am trying to use the meshline external package to create a rectangular shape. I have “required” the external MeshLine file from the link (https://github.com/spite/THREE.MeshLine/blob/565dc97b36c742120936555c3b0eeb9653202e03/README.md) already into my program and tried using the following code to draw a rectangle using meshLine . As of now I have no errors but nothing shows on my graphics window. I tried the same thing with the lines.gl feature and it works fine. Any suggestions on what I’m doing wrong?

var geometryMeshLine = new THREE.Geometry();
geometryMeshLine.vertices.push(new THREE.Vector3((A / 2) * -1, B / 2, 0));
geometryMeshLine.vertices.push(new THREE.Vector3(A / 2, B / 2, 0));
geometryMeshLine.vertices.push(new THREE.Vector3(A / 2, (B / 2) * -1, 0));
geometryMeshLine.vertices.push(new THREE.Vector3((A / 2) * -1, (B / 2) * -1, 0));

var line = new MeshLine();
line.setGeometry(geometryMeshLine);
var materialMeshLine = new MeshLineMaterial({
	lineWidth: 15,
	color: 0xff0000,
	useMap: false,
	opacity: 1,
	resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
	sizeAttenuation: false,
	near: camera.near,
	far: camera.far
});

var meshMeshLine = new THREE.Mesh(line.geometryMeshLine, materialMeshLine); 
meshMeshLine.position.x = this.spotShape.position.x;
meshMeshLine.position.y = this.spotShape.position.y;
meshMeshLine.position.z = this.spotShape.position.z;

this.scene.add(meshMeshLine);

this.updateGL();
2

It should be:

var meshMeshLine = new THREE.Mesh(line.geometry, materialMeshLine);

MeshLine.geometry represents the final geometry you want to pass in to THREE.Mesh.

Live demo: https://jsfiddle.net/b809Loug/

1 Like