Question

所以我想在这里显示画布上两个鼠标点击点的距离，我能够做到。这件事我也想要在这两点之间添加一条线，不知怎的，我无法那样做。

有人可以建议我在这种情况下该怎么做。

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 );

Answer 1

这个example应该会给你一个关于如何在点之间画线的好提示。

在THREE.js中在画布上的两个选定鼠标单击点之间绘制一条线

1 个答案: