Learn How To Be Transparent Learn How To Be Transparent - 6 months ago 32
Javascript Question

How can I listen to onclick event SpotLight Helper and attach the TransformControls to the light?

The problem:



When I click on the cube, TransformControls is attached on the cube. But when I click on the light helper, nothing happen. I want the TransformControls to be attached on the light when I click the light helper. Can you help me with this?

This is the most minimal example.

http://codepen.io/kranzy/pen/ALOYZw

or if you need code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var transformControls = new THREE.TransformControls(camera,renderer.domElement);
scene.add(transformControls);
var objects = [];
var cube = new THREE.Mesh( geometry, material );
cube.position.x = -10;
scene.add( cube );
objects.push(cube);
var light = new THREE.SpotLight();
scene.add(light);
var help = new THREE.SpotLightHelper(light);
scene.add(help);
objects.push(help);
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
function onDocumentTouchStart(event){
event.preventDefault();
event.clientX = event.touches[0].clientX;
event.clientY = event.touches[0].clientY;
onDocumentMouseDown(event);
}
function onDocumentMouseDown(event){
event.preventDefault();
mouse = new THREE.Vector2();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if(intersects.length > 0){
SELECTED = intersects[ 0 ].object;
console.log(SELECTED);
if (SELECTED.constructor === THREE.SpotLightHelper) {
transformControls.attach(SELECTED.light);
} else {
transformControls.attach(SELECTED);
}
}
}



This question's answer is now in Stack Overflow's Three.js Docs!

Check it out and avoid headaches: The Three.js Raycast Docs

Answer

The problem is raycaster. Add the second parameter of raycaster.intersectObjects() to true.

So the final code is var intersects = raycaster.intersectObjects(objects, true);

Here is the working sample for attach the transformControls to the light: http://codepen.io/anon/pen/PGJxBj

I hope this should helps you..