I have a scene which have several objects, and i want to click and select an object, and rotate and zoom the scene.
For zoom, rotate and pan the scene, i use TrackballControl.js.
For click and select and object, i use Projector.js.
They work separately as i want. But when i combine both Projector.js doesn't work because of the TrackballControl. I don't know how to use these two together.
Do you have any suggestion for me?
My test code is below:
<!DOCTYPE html>
<html>
<head>
<title>Selecting objects</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/Projector.js"></script>
<script type="text/javascript" src="../libs/TrackballControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
var scene, camera,renderer,cube,sphere,cylinder, control;
function prepareScene(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(-30,40,30);
camera.lookAt(scene.position);
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function addGeometry(){
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-9,3,0);
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
control.update();
}
function onDocumentMouseDown(event) {
var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects([cube]);
if (intersects.length > 0) {
console.log(intersects[0].point);
intersects[0].object.material.transparent = true;
intersects[0].object.material.opacity = 0.1;
}
}
function init() {
prepareScene();
var projector = new THREE.Projector();
document.addEventListener('mousedown', onDocumentMouseDown, false);
/*control = new THREE.TrackballControls(camera, document.getElementById("WebGL-output"));
control.addEventListener("change", render);
control.rotateSpeed = 3.0;
control.zoomSpeed = 3.0;
control.panSpeed = 3.0; */
addGeometry();
render();
//animate();
}
window.onload = init;
</script>
</body>
</html>