matpen · November 2, 2017 18:56
diff --git a/test.html b/test.html
 <html>
 	<head>
 		<title>Raycaster test</title>
 		<style>
 			body { margin: 0; }
 			canvas { width: 100%; height: 100% }
 		</style>
 	</head>
 	<body>
 		<script src="http://threejs.org/build/three.min.js"></script>
    <script src="test.js"></script>
 	</body>
 </html>
diff --git a/test.js b/test.js
 var renderer = null;
 var scene = null;
 var camera = null;

 function init()
 {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(1, 1, 1).multiplyScalar(50);
    camera.up.set(0, 0, 1);
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 1, 1).normalize();
    scene.add(light);

    document.body.appendChild(renderer.domElement);
 }

 function animate()
 {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
 };

 function makeLine(point1, point2)
 {
    var geometry = new THREE.Geometry();
    geometry.vertices.push(point1, point2);
    var material = new THREE.LineBasicMaterial({ color: 0x000088, linewidth: 5 });
    var line = new THREE.Line(geometry, material);
    scene.add(line);
    return line;
 }

 function modifyLine(line, newPoint)
 {
    //modify the line by changing its end vertex
    line.geometry.vertices[1] = newPoint;
    line.geometry.verticesNeedUpdate = true;
 }

 function checkLine(line, point)
 {
    //compute the middle point of the line
    var start = line.geometry.vertices[0];
    var end = line.geometry.vertices[1];
    var middle = end.clone().sub(start).multiplyScalar(0.5).add(start);

    //raycast the line, either at its middle, or at the given point
    var raycaster = new THREE.Raycaster();
    var vector = (point || middle).clone().sub(camera.position).normalize();
    raycaster.ray = new THREE.Ray(camera.position, vector);
    var intersected = raycaster.intersectObjects([line], false);

    //check if the line was intersected
    if (intersected.length === 1 && intersected[0].object === line)
        console.log('ok');
    else
        console.log(intersected);
 }

 function test()
 {
    //define three points, two of which are equal
    var point1 = new THREE.Vector3(0, 0, 0);
    var point2 = new THREE.Vector3(0, 0, 0);
    var point3 = new THREE.Vector3(10, 0, 0);

    //make a valid line and test the raycaster
    var line1 = makeLine(point1, point3);
    checkLine(line1);           //test at line middle: one intersection (correct)
    checkLine(line1, point3);   //test at line end: one intersection (correct)

    //modify the line and make it zero-length
    modifyLine(line1, point2);
    checkLine(line1);           //test at line middle: one intersection (correct, although zero-length)
    checkLine(line1, point3);   //test outside line: no intersection (correct)

    //modify the line and make it non-zero again
    modifyLine(line1, point3);
    checkLine(line1);           //test at line middle: one intersection (correct)
    checkLine(line1, point3);   //test at line end: one intersection (correct)

    //make a new line, this time it is initially zero-length
    var line2 = makeLine(point1, point2);
    checkLine(line2);           //test at line middle: no intersection (DIFFERENT FROM ABOVE)
    checkLine(line2, point3);   //test outside line: no intersection (correct)

    //modify the line and make it non-zero
    modifyLine(line2, point3);
    checkLine(line2);           //test at line middle: no intersection (NOT CORRECT)
    checkLine(line2, point3);   //test at line end: no intersection (NOT CORRECT)
 }

 init();
 animate();
 test();
	<html>
	<head>
	<title>Raycaster test</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="http://threejs.org/build/three.min.js"></script>
	<script src="test.js"></script>
	</body>
	</html>
	var renderer = null;
	var scene = null;
	var camera = null;

	function init()
	{
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
	camera.position.set(1, 1, 1).multiplyScalar(50);
	camera.up.set(0, 0, 1);
	camera.lookAt(scene.position);

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0xffffff, 1);

	var light = new THREE.DirectionalLight(0xffffff);
	light.position.set(0, 1, 1).normalize();
	scene.add(light);

	document.body.appendChild(renderer.domElement);
	}

	function animate()
	{
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
	};

	function makeLine(point1, point2)
	{
	var geometry = new THREE.Geometry();
	geometry.vertices.push(point1, point2);
	var material = new THREE.LineBasicMaterial({ color: 0x000088, linewidth: 5 });
	var line = new THREE.Line(geometry, material);
	scene.add(line);
	return line;
	}

	function modifyLine(line, newPoint)
	{
	//modify the line by changing its end vertex
	line.geometry.vertices[1] = newPoint;
	line.geometry.verticesNeedUpdate = true;
	}

	function checkLine(line, point)
	{
	//compute the middle point of the line
	var start = line.geometry.vertices[0];
	var end = line.geometry.vertices[1];
	var middle = end.clone().sub(start).multiplyScalar(0.5).add(start);

	//raycast the line, either at its middle, or at the given point
	var raycaster = new THREE.Raycaster();
	var vector = (point \|\| middle).clone().sub(camera.position).normalize();
	raycaster.ray = new THREE.Ray(camera.position, vector);
	var intersected = raycaster.intersectObjects([line], false);

	//check if the line was intersected
	if (intersected.length === 1 && intersected[0].object === line)
	console.log('ok');
	else
	console.log(intersected);
	}

	function test()
	{
	//define three points, two of which are equal
	var point1 = new THREE.Vector3(0, 0, 0);
	var point2 = new THREE.Vector3(0, 0, 0);
	var point3 = new THREE.Vector3(10, 0, 0);

	//make a valid line and test the raycaster
	var line1 = makeLine(point1, point3);
	checkLine(line1); //test at line middle: one intersection (correct)
	checkLine(line1, point3); //test at line end: one intersection (correct)

	//modify the line and make it zero-length
	modifyLine(line1, point2);
	checkLine(line1); //test at line middle: one intersection (correct, although zero-length)
	checkLine(line1, point3); //test outside line: no intersection (correct)

	//modify the line and make it non-zero again
	modifyLine(line1, point3);
	checkLine(line1); //test at line middle: one intersection (correct)
	checkLine(line1, point3); //test at line end: one intersection (correct)

	//make a new line, this time it is initially zero-length
	var line2 = makeLine(point1, point2);
	checkLine(line2); //test at line middle: no intersection (DIFFERENT FROM ABOVE)
	checkLine(line2, point3); //test outside line: no intersection (correct)

	//modify the line and make it non-zero
	modifyLine(line2, point3);
	checkLine(line2); //test at line middle: no intersection (NOT CORRECT)
	checkLine(line2, point3); //test at line end: no intersection (NOT CORRECT)
	}

	init();
	animate();
	test();