I was wandering if there is any method in three.js that allows the user to click on a model (for example an imported gltf file from blender) and as a result of the click something else to happen (for example a pop up box or an image is displayed).
I was trying to look it up in the three.js website but all found was the raycaster class. But from my understanding this will only work with objects that have a mesh and thus only the ones that are made in three.js itself with the geometry properties.
I also found tutorials with the use of threex.domevents. But once again I don't see how this can be used with the models imported from blender. I tried using it but it only caused my models to disappear from the screen.
So is there another solution? or is it impossible?
I really appreciate the help,thank you very much.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles/mycss.css" />
</head>
<body>
<script src="three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script src="threex.domevents.js"></script>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
//camera.rotation.y = 45/180*Math.PI;
camera.position.x = 0;
//camera.position.y = 100;
camera.position.z = 2000;
const domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(car, 'click', event => {
scene.background = new THREE.Color(0x000000);
});
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.GLTFLoader();
loader.load('car.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
car.position.z -=370;
car.position.x = 500;
animate();
});
var loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car1 = gltf.scene.children[0];
car1.scale.set(0.5,0.5,0.5);
car1.position.x = -500;
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
Car model can be found at : https://sketchfab.com/3d-models/1972-datsun-240k-gt-non-commercial-use-only-b2303a552b444e5b8637fdf5169b41cb
I only want to learn how to do it so all my code is based on tutorials from YouTube.