I'm trying to hide scene objects by clicking on them, but after following multiple tutorials on "raycaster", I'm having trouble identifying where the issue lies. When I open my HTML file, all the objects are hidden, even though I've removed most of the irrelevant code related to the raycaster.
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container, stats;
var group1 , group2 , group3 ;
var camera, scene, controls;
var renderer;
var mesh;
var textureCube;
var cameraCube, sceneCube;
var loader;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA and controls
....
// SCENE
scene = new THREE.Scene();
// SKYBOX
.....
//models
group1=...
group2=...
group3=...
cubes = new THREE.Object3D() ;
cubes.add( group1 ) ;
cubes.add( group2 ) ;
cubes.add( group3 ) ;
mouseVector = new THREE.Vector3();
projector = new THREE.Projector();
// LIGHTS
lights...
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.autoClear = false;
container.appendChild( renderer.domElement );
//
renderer.gammaInput = true;
renderer.gammaOutput = true;
// STATS
stats = new Stats();
container.appendChild( stats.domElement );
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
//
function onWindowResize( event ) {
....
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
cameraCube.rotation.copy( camera.rotation );
renderer.clear();
renderer.render( sceneCube, cameraCube );
//raycast
var raycaster = projector.pickingRay( mouseVector.clone(), camera );
window.addEventListener( 'mousedown', onMouseDown, false );
var onMouseDown = function ( event ) {
var intersects = raycaster.intersectObjects( cubes.children );
var intersection = intersects[0] , obj = intersection.object ;
obj.visible = false ;
};
renderer.render( scene, camera );
}
</script>