Hi to All,
I’m running into some issues try to show the intersection points between an imported geometry from blender (simple cube using the GLTFLoader) and a plane built from coplanar points.
When I hit “Press Me”, it seems that the points and the lines are all there (included in the scene using the console.table) but for some reason I don’t see them visually.
Any idea what I’m doing wrong ?
Thanks in advance,
//Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = -20;
camera.position.y = -20;
camera.position.z = 0;
camera.up = new THREE.Vector3(0, 0, 1);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// Lights
scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
addShadowedLight(1, 1, 1, 0xffffff, 1.35);
addShadowedLight(0, -50, 50, 0xffffff, 1);
function addShadowedLight(x, y, z, color, intensity) {
const directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z);
scene.add(directionalLight);
directionalLight.castShadow = true;
const d = 1;
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;
directionalLight.shadow.bias = - 0.002;
}
// Objects
const objects = [];
// textures
const loader = new THREE.TextureLoader();
//const texture = loader.load( 'textures/sprites/disc.png' );
// Helper
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// Mouse
const mouse = new THREE.Vector2();
// Raycaster
let raycaster;
const threshold = 0.1;
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = threshold;
// controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = Infinity;
controls.AzimuthAngle = Infinity;
//controls.target.copy(cube.position)
controls.update();
//var mesh_center = new THREE.Vector3(cube.position.x, cube.position.y, cube.position.z);
var geo_cavity;
//var mat_cavity = new THREE.MeshStandardMaterial();
var mat_cavity = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var cavity_mesh = new THREE.Mesh(geo_cavity, mat_cavity);
cavity_mesh.name = "Actual_Cavity"
scene.add(cavity_mesh);
// instantiate a loader
var loader2 = new GLTFLoader();
loader2.load('./DXF/Simple_Cube.glb', function (gltf) {
gltf.scene.traverse(function (child) {
cavity_mesh.geometry = child.geometry;
cavity_mesh.material = child.material;
});
});
// Event Listerners
//document.addEventListener('mousemove', onDocumentMouseMove);
pressMe.addEventListener("click", drawIntersectionPoints, false);
// Slicing tool
var planeGeom = new THREE.PlaneGeometry(50, 50);
planeGeom.rotateX(-Math.PI / 2);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
color: "lightgray",
transparent: true,
opacity: 0.75,
side: THREE.DoubleSide
}));
plane.position.y = 0;
plane.rotation.x = Math.PI / 5;
scene.add(plane);
console.table(scene);
var pointsOfIntersection = new THREE.Geometry();
pointsOfIntersection.verticesNeedUpdate = true;
var a = new THREE.Vector3(),
b = new THREE.Vector3(),
c = new THREE.Vector3();
var planePointA = new THREE.Vector3(),
planePointB = new THREE.Vector3(),
planePointC = new THREE.Vector3();
var lineAB = new THREE.Line3(),
lineBC = new THREE.Line3(),
lineCA = new THREE.Line3();
var pointOfIntersection = new THREE.Vector3();
function drawIntersectionPoints() {
var f_array = cavity_mesh.geometry.index.array;
var corr_f_array = [];
for (var i = 0; i < f_array.length; i++) {
corr_f_array.push(Math.floor(f_array[i] / 3));
}
var obj_pos = cavity_mesh.geometry.attributes.position.array;
var cavity_vert = [];
for (var i = 0; i < obj_pos.length; i += 9) {
cavity_vert.push(obj_pos[i], obj_pos[i + 1], obj_pos[i + 2]);
}
//console.table(f_array);
//console.table(corr_f_array);
var mathPlane = new THREE.Plane();
plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a]));
plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b]));
plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c]));
mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC);
//console.table(f_array);
//console.table(obj_pos);
// Copy into a,b,c (Vector3) the coordinates for point 1,2,3 on each face of the geometry
for (var i = 0; i < corr_f_array.length; i += 3) {
// var n * 3 - to get the x component AND n * 3 + 1 to get y AND n * 3 + 2
var temp_a = new THREE.Vector3(cavity_vert[3 * corr_f_array[i]], cavity_vert[3 * corr_f_array[i] + 1], cavity_vert[3 * corr_f_array[i] + 2]);
var temp_b = new THREE.Vector3(cavity_vert[3 * corr_f_array[i + 1]], cavity_vert[3 * corr_f_array[i + 1] + 1], cavity_vert[3 * corr_f_array[i + 1] + 2]);
var temp_c = new THREE.Vector3(cavity_vert[3 * corr_f_array[i + 2]], cavity_vert[3 * corr_f_array[i + 2] + 1], cavity_vert[3 * corr_f_array[i + 2] + 2]);
//a.copy(obj_pos[3 * f_array[i]], obj_pos[3 * f_array[i] + 1], obj_pos[3 * f_array[i] + 2]);
//b.copy(obj_pos[3 * f_array[i + 1]], obj_pos[3 * f_array[i + 1] + 1], obj_pos[3 * f_array[i + 1] + 2]);
//c.copy(obj_pos[3 * f_array[i + 2]], obj_pos[3 * f_array[i + 2] + 1], obj_pos[3 * f_array[i + 2] + 2]);
a.copy(temp_a);
b.copy(temp_b);
c.copy(temp_c);
lineAB = new THREE.Line3(a, b);
lineBC = new THREE.Line3(b, c);
lineCA = new THREE.Line3(c, a);
//planeGeom
setPointOfIntersection(lineAB, mathPlane);
setPointOfIntersection(lineBC, mathPlane);
setPointOfIntersection(lineCA, mathPlane);
}
//cavity_mesh.material.visible = false;
function setPointOfIntersection(line, plane) {
pointOfIntersection = plane.intersectLine(line);
if (pointOfIntersection) {
pointsOfIntersection.vertices.push(pointOfIntersection.clone());
};
//pointsOfIntersection.geometry.verticesNeedsUpdate = true;
}
console.table(pointsOfIntersection);
console.table(points);
console.table(lines);
};
var pointsMaterial = new THREE.PointsMaterial({
size: 2,
color: 0xffff00
});
var points = new THREE.Points(pointsOfIntersection, pointsMaterial);
scene.add(points);
var lines = new THREE.LineSegments(pointsOfIntersection, new THREE.LineBasicMaterial({
color: 0x0000ff
}));
scene.add(lines);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
Here are screen captures of console.table(points) + console.table(lines)
