Hello, Threejs community,
I have a blast design CAD like application that I am migrating to three.js, the original intent was to draw the blast holes as varying symbols (Cross, Circle, Diamond, etc.) however when the scene is using real-world geo-coordinates (478700.000, 6772400.000, 400.000) and drawing with Lines or MeshLines the render is jittery. I assume this is due to the float precision and the camera distance as all forums are saying. However if I draw the shapes with CylinderGeometry the render is smooth and there are no jitters.
Jittery Render occurs with Line or MeshLine
Smooth Render Occurs with any Mesh (Cylinder, Torus, etc)
createLine.js has used THREE.Line and THREE.MeshLine with out success to remediate the jittery render.
//createLine.js
import * as THREE from "three";
import { BufferGeometry, Vector3, Vector2, Color } from "three";
import { MeshLine, MeshLineMaterial } from "three.meshline";
export function createLine(start, end, color, lineWidth, dashArray, dashOffset, dashRatio, opacity, sizeAttenuation) {
const material = new MeshLineMaterial({
map: null,
useMap: false,
color: new Color(color),
opacity: opacity,
resolution: new Vector2(window.innerWidth, window.innerHeight),
lineWidth: lineWidth,
dashArray: dashArray,
dashOffset: dashOffset,
dashRatio: dashRatio,
opacity: opacity,
sizeAttenuation: sizeAttenuation
});
const points = [];
points.push(new Vector3(start.x, start.y, start.z));
points.push(new Vector3(end.x, end.y, end.z));
const line = new MeshLine();
const geometry = new BufferGeometry().setFromPoints(points);
line.setGeometry(geometry);
const mesh = new THREE.Mesh(line, material);
return mesh;
}
createCylinder.js is used to build a 3D object each cylinder is used to replace a line segment.
//createCylinder.js
import { MeshBasicMaterial, MeshPhongMaterial, CylinderGeometry, Mesh } from "three";
import { Vector3 } from "three";
import { params } from "../createScene";
export function createCylinder(color, materialType, startVector, endVector, diameter, radialSegments) {
diameter = diameter || 500;
diameter = diameter / 1000;
let material;
if (materialType === "basic") {
material = new MeshBasicMaterial({ color });
} else if (materialType === "phong") {
material = new MeshPhongMaterial({
color: color,
flatShading: true
});
}
const height = startVector.distanceTo(endVector);
const direction = endVector.clone().sub(startVector).normalize();
const position = startVector.clone().add(endVector).multiplyScalar(0.5);
const geometry = new CylinderGeometry(diameter / 2, diameter / 2, height, radialSegments);
const cylinder = new Mesh(geometry, material);
//add a rotation matrix with the fulcrum at the startVector and the endVector being the base of the cylinder
cylinder.position.copy(position);
cylinder.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), direction);
if (params.debugComments) {
console.log("createCylinder > UUID:" + cylinder.uuid + " X: " + position.x + " Y: " + position.y + " Z: " + position.z);
}
return cylinder;
}
This wouldn’t be an issue if all I wanted to view were blast holes in a blast design.
However, I will need to use a lot of lines in the future. Imported from DXFs and also those created in the application.
I’d like to know if it has to do with how I am dealing with the coordinates.
Should I use MeshLine differently?
I certainly don’t want to be creating a line from individual cylinders
I don’t want to origin shift if possible. I tried an origin shift (and unless was done before importing the file) the jitter is still there in the render for lines.
I certainly don’t have an issue with the meshes for blast holes however for DXF line geometry, I’d like to draw lines, rectangles ect.
Thank you in advance
Brent.
