How may I draw a line, and create a clipping plane from it? Almost working example inside.
https://decadent3d.s3.amazonaws.com/data/test.html
Everything is in the page source.
//you need to uncomment the actual problem line//
function newClipping() allows me to draw a line on a plane that always faces the camera,
I get the start and end points (Vector3s) from it and create a new THREE.Line3
Then I use the Line3.GetCenter() to net my 3rd Vector3.
Then using the math I found online in the link below, I get to work.
https://www.geeksforgeeks.org/program-to-find-equation-of-a-plane-passing-through-3-points/
But it doesn't work.
Anyone much better than this hobbyist right here???
https://www.reddit.com/r/threejs/comments/r6qh38/how_may_i_draw_a_line_and_create_a_clipping_plane/
Below is the code that worked in the end...
//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