In this scenario, I aim to showcase the distance between two mouse click locations on the canvas. While I have achieved this functionality, my struggle lies in creating a line connecting these points.
I kindly request suggestions on what steps I should take to address this issue.
var container, camera, scene, renderer, mesh,
objects = [],
tempx=0,
tempy=0,
count = 0,
distance = 0,
CANVAS_WIDTH = 1100,
CANVAS_HEIGHT = 500;
// Additional information section
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#f00';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = 'x is: ' + mouse;
info.innerHTML = 'distance between the present mouse clicks is : ' + distance;
info.style.userSelect = "none";
info.style.webkitUserSelect = "none";
info.style.MozUserSelect = "none";
document.body.appendChild(info);
container = document.getElementById('canvas');
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer();
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
camera.lookAt(scene.position);
scene.add(camera);
scene.add(new THREE.AmbientLight(0x222222));
mesh = new THREE.Mesh(
new THREE.BoxGeometry(500, 500, 500, 1, 1, 1),
new THREE.MeshPhongMaterial({ color: 0X000000 })
);
scene.add(mesh);
objects.push(mesh);
// Intersection calculation
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var clickCount = 0;
var startPoint = new THREE.Vector3(0, 0, 0);
var endPoint = new THREE.Vector3(0, 0, 0);
// Mouse listener
document.addEventListener('click', function (event) {
clickCount += 1;
switch (clickCount){
case 1:
case 3:
clickCount = 1;
startPoint = new THREE.Vector3(
((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1,
-((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1,
event.clientZ
);
console.log(startPoint.x,
startPoint.y,
startPoint.z);
info.innerHTML = "";
break;
case 2:
endPoint = new THREE.Vector3(
((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1,
-((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1,
event.clientZ
);
console.log(endPoint.x,
endPoint.y,
endPoint.z);
distance = Math.sqrt(((mouse.x - tempx) * (mouse.x - tempx)) + ((mouse.y - tempy) * (mouse.y - tempy)));
info.innerHTML ='x is:' + mouse.x;
info.innerHTML = 'y is:' + mouse.y;
info.innerHTML = 'distance between chosen mouse clicks is :' + distance;
tempx = mouse.x;
tempy = mouse.y;
break;
default:
clickCount = 0;
startPoint = new THREE.Vector3(0, 0, 0);
endPoint = new THREE.Vector3(0, 0, 0);
}
}, false);