[英]To draw a line between two chosen mouse click points on a canvas in THREE.js
So i want here is to show the distance of two mouse click points on the canvas and that i am able to do.This Thing which i also want is to add a line between these two points and somehow i am not able to do that. 所以我想在这里显示画布上两个鼠标单击点的距离,并且我能够做到这一点。我也想在这两个点之间添加一条线,但我却无法做到这一点。
Please can someone suggest what should i do in this case. 请有人建议在这种情况下我该怎么办。
var container, camera, scene, renderer, mesh,
objects = [],
tempx=0,
tempy=0,
count = 0,
distance = 0,
CANVAS_WIDTH = 1100,
CANVAS_HEIGHT = 500;
// info
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.innerHTML = 'INTERSECT Count: ' + count;
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 );
// find intersections
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 ) {
// inrement click count
clickCount = 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);
// Put distance logic here.
// display the distance
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
//for making the line
//var geometry = new THREE.Geometry();
//material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
//geometry.vertices.push(startPoint);
//geometry.vertices.push(endPoint);
//line = new THREE.Line(geometry, material);
//scene.add(line);
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 );
这个例子应该给你一个很好的提示,关于如何在点之间画线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.