I am looking to navigate to specific links when clicking on particular planets using raycaster. However, the current issue is that I get redirected to the URL of the last planet (referred to as category) whenever I click anywhere on the canvas. I have separate functions for creating the planets and tweening outside the init() function. How can I configure the raycaster to only register clicks on the planets so that I can navigate to their respective URLs? Thank you for your assistance.
Check out the code below:
class App extends Component{
componentDidMount() {
var scene, camera, renderer;
var controls;
var category, orbit, orbitContainer
init();
animate();
function createSubCategory(){}
function createCategory(name, radius, distance, tilt, color, speed, link) {
orbitContainer = new THREE.Object3D();
orbitContainer.rotation.x = tilt;
var id = name
orbit = new THREE.Object3D();
var geometry = new THREE.CircleGeometry(distance, 100);
geometry.vertices.shift();
var line = new THREE.Line(
geometry,
new THREE.LineBasicMaterial({color: 'aqua'})
);
//ring movement
line.rotation.x = Math.PI * 0.5;
category = new THREE.Mesh(
new THREE.SphereGeometry(radius, 0, 0),
new THREE.MeshBasicMaterial({color:color,wireframe: true})
);
orbitContainer.userData.URL= link;
category.position.set(distance, 0.0, 0.0);
orbit.add(category);
new TWEEN.Tween(orbit.rotation,{
loop: true
}).to({y: '+' + (Math.PI * 2)}, 4000 / speed);
orbitContainer.add(orbit);
scene.add(orbitContainer);
}
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 10000.0);
camera.position.set(20.0, 20.0, 20.0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer = new THREE.WebGLRenderer({antialias: false});
document.addEventListener('mousedown', onDocumentMouseDown, false);
controls = new OrbitControls(camera, renderer.domElement);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);
var solar = new THREE.Mesh(
new THREE.SphereGeometry(2.5, 32, 32),
new THREE.MeshBasicMaterial({emissive: 0xff5800, emissiveIntensity: 0.5, wireframe: true, color:'silver'})
);
var pointLight = new THREE.PointLight(0xffffff, 1.0, 300.0);
solar.add(pointLight);
scene.add(solar);
createCategory('B',1.35, 7.2, 0.0, 'yellow', 0.4, "http://google.com" );
createCategory('A',1.35, 11.0, 0.0, 'red', 0.3, "http://yahoo.com");
createCategory('D Print', 1.35, 14.0, 0.0, 'blue', 0.2, "http://msn.com");
createCategory('C Design', 1.35, 17.3, 0.0, 'green', 0.1, "http://facebook.com");
createCategory('N', 1.35, 12.2, 5.0, 'pink', 0.4, "http://stackoverflow.com");
window.addEventListener('resize', onWindowResize, false);
onWindowResize();
document.body.appendChild(renderer.domElement);
}
function onDocumentMouseDown(event) {
event.preventDefault();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects(orbitContainer);
if (intersects.length === 0) {
window.open(orbitContainer.userData.URL);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
}