¿Cómo puedo dibujar una línea y crear un plano de recorte a partir de ella? Ejemplo casi funcional en el interior.
https://decadent3d.s3.amazonaws.com/data/test.html
Todo está en la fuente de la página.
// necesita descomentar la línea del problema real //
la función newClipping() me permite dibujar una línea en un plano que siempre mira hacia la cámara,
Obtengo los puntos de inicio y final (Vector3) y creo un nuevo TRES.Line3
Luego uso Line3.GetCenter() para obtener mi tercer Vector3.
Luego, usando las matemáticas que encontré en línea en el enlace a continuación, me pongo a trabajar.
https://www.geeksforgeeks.org/program-to-find-equation-of-a-plane-passing-through-3-points/
Pero no funciona.
¿Alguien mucho mejor que este aficionado de aquí?
https://www.reddit.com/r/threejs/comments/r6qh38/how_may_i_draw_a_line_and_create_a_clipping_plane/
A continuación se muestra el código que funcionó al final...
//working sample let myButton = document.getElementById('ClippingButton'); function removeClipping() { renderer.clippingPlanes = []; myButton.innerText = 'Slice Models'; myButton.addEventListener('click', function(event) {drawEnabled = true; newClipping();}, { once: true }); }; function newClipping() { myButton.innerText = 'Draw a Line'; myButton.style.color = '#fccf03'; rackballcontrol.enabled = false; var hitPlane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.0 }) ); hitPlane.quaternion.copy(camera.quaternion); scene.add(hitPlane); var lineGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(), new THREE.Vector3() ]); var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }); var newLine = new THREE.Line(lineGeometry, lineMaterial); scene.add( newLine ); var rayCaster = new THREE.Raycaster(); var hitPoint = new THREE.Vector3(); var isMouseDown = false; renderer.domElement.addEventListener('mousedown', e => { if (e.button === 0) { var x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1; var y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1; rayCaster.setFromCamera({ x, y }, camera); var intersections = rayCaster.intersectObject(hitPlane); if (intersections && intersections.length) { isMouseDown = true; hitPoint.copy(intersections[0].point); lineGeometry.setFromPoints([ hitPoint, intersections[0].point ]); }; }; }, { once: true }); renderer.domElement.addEventListener('mousemove', e => { if (isMouseDown) { var x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1; var y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1; rayCaster.setFromCamera({ x, y }, camera); var intersections = rayCaster.intersectObject(hitPlane); if (intersections && intersections.length) { lineGeometry.setFromPoints([ hitPoint, intersections[0].point ]) }; }; }); renderer.domElement.addEventListener('mouseup', e => { for (i = 0; i < meshArray.length; i++) { if(meshArray[i].visible === true){ matArray[i].opacity = 1; }; }; isMouseDown = false; trackballcontrol.enabled = true; var lineArray = newLine.geometry.attributes.position.array; var vectA = new THREE.Vector3(lineArray[0],lineArray[1],lineArray[2]); var vectC = new THREE.Vector3(lineArray[3],lineArray[4],lineArray[5]); var globalPlane = new THREE.Plane().setFromCoplanarPoints(camera.position,vectA,vectC); renderer.clippingPlanes = [ globalPlane ]; myButton.addEventListener('click', function(event) { removeClipping(); }, { once: true }); myButton.innerText = 'Remove Slice'; myButton.style.color = '#fc8c03'; scene.remove(hitPlane); scene.remove(newLine); }, { once: true }); }; myButton.addEventListener('click', function(event) { newClipping(); }, { once: true }); //working sample