THREE.jsのキャンバス上で選択した2つのマウスクリック点の間に線を描くには

Question

ここでは、キャンバスに2つのマウスクリック点の距離を表示し、これを行うことができます。これらの2つのポイントの間に行を追加して、何とか私はそれを行うことができません。

この場合、どうすればいいですか？

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は、ポイント間の線を描く方法についてのヒントを示します。