I've been trying to implement raycasting to make objects clickable. Despite referencing numerous examples, the code doesn't seem to work for me. The only notable difference is that I'm working within a sphere.
My initial setup involves defining various variables (some may not be directly related to previous attempts).
var container, stats;
var camera, controls, scene, renderer, projector;
var isUserInteracting = false;
var mouse = { x: 0, y: 0, z: 0 }, intersected;
var fov = 70,
texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
init();
animate();
The next step involves setting up the init() function where I configure the camera and create a spherical mesh.
function init() {
var container, mesh1;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
projector = new THREE.Projector();
mesh1 = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "spherical_map_small.jpg" )} ) );
mesh1.scale.x = -1;
mesh1.side = THREE.DoubleSide;
scene.add( mesh1 );
Within the init() function, I proceed to create a cube geometry (the object intended to be clickable).
meshMaterial = new THREE.MeshBasicMaterial({ color: 0x33CC00});
var geometry = new THREE.CubeGeometry( 20, 20, 20 );
var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x33CC00} ) );
object.position.x = 75;
object.position.y = 10;
object.position.z = 0;
object.rotation.y = 45;
scene.add( object );
objects.push( object );
Still within init(), I set up the renderer and add event listeners.
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
//
window.addEventListener( 'resize', onWindowResize, false );
Now comes the challenge. The following function should make my box 'object' clickable, but it's not functioning as expected. I expect it to display "works." every time an object in the scene is clicked.
Despite spending hours learning about raycasting in three.js, I can't seem to figure out why it's not working. Any assistance would be greatly appreciated. Thank you.