我如何监听 onclick 事件 SpotLight Helper 并将 TransformControls 附加到灯光？

Question

问题：

当我单击立方体时，TransformControls 附加到立方体上。但是当我点击灯光助手时，什么也没有发生。我希望在单击灯光助手时将 TransformControls 附加到灯光上。你能帮我解决这个问题吗？

这是最简单的例子。

或者如果您需要代码：

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

Answer 1

问题出在光线投射器上。添加raycaster.intersectObjects()的第二个参数为true.

所以最后的代码是 var intersects = raycaster.intersectObjects(objects, true);

这是将 transformControls 附加到灯光的工作示例： http://codepen.io/anon/pen/PGJxBj

希望对您有所帮助..

我如何监听 onclick 事件 SpotLight Helper 并将 TransformControls 附加到灯光？

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

javascript

mouseevent

three.js

问题：