Im very new to Threejs, and i have no idea how to make an object interactive, and, more importantly, why my code does not work. This is my onDocumentMouseDown, and im using webglRender & orbitControls if that can cause problems?
function onDocumentMouseDown(event) {
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3(mouseX, mouseY, 1);
vector.unproject(camera);
raycaster.set(camera.position, vector.sub(camera.position ).normalize() );
var intersects = raycaster.intersectObjects(interactiveObj); //list of obj that i want to be interactive
if (intersects.length > 0) {
//play some music - works if i put it elsewhere, so i know thats not the problem
}
}
Do it like this:
function onDocumentMouseMove( event ) {
event.preventDefault();
// 'mouse' is of type Vector2
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( interactiveObj );
if ( intersects.length > 0 ) {
// do something...
}
// other render stuff
}
Full example (but without OrbitControls): https://threejs.org/examples/#webgl_interactive_cubes
I tried it, but it does not seem to change anything.
Im adding a part of init() in case im doing something wrong there:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/' );
mtlLoader.load( 'piano.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/' );
objLoader.load( 'piano.obj', function ( piano ) {
piano.scale.set(100,100,100);
piano.position.y = -wallWidth;
piano.position.z= -wallWidth/4+400;
piano.position.x= -wallWidth/4-110;
scene.add( piano );
interactiveObj.push(piano);//adding piano to interactive objects
}, onProgress, onError );
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
container.appendChild( renderer.domElement );
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2(); //both global variables
document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
document.addEventListener('mousedown', onDocumentMouseDown, false);
window.addEventListener( 'resize', onWindowResize, false );
Any chances you provide a live demo that shows the problem? Maybe as a fiddle?
I never used fiddle before, so i cant seem to get it to run - but i uploaded the code if you want to see? I will try to fix it to run properly on fiddle too but im not sure i will manage. Sorry about the messy code
This is a reduced example that might help you: https://jsfiddle.net/e7eubhmm/1/
I also use the right event listener now (i missed that you prefer onMouseDown).
That didnt give me the result i expected, but i noticed a curious thing - see updated fiddle code - i have a animated texture there called annie, and if i try to intersect all objects - var intersects = raycaster.intersectObjects( scene.children), the only object i get a reaction on is the animation. i figured its because i update it frequently - see animate() - so perhaps i could somehow update piano as well? can i even update an .obj?
Sry, you need to provide a live example for more feedback. Also try to minimize your code so you have a small test case that shows the problem.
Okay, this is the best i could do- since apparently online .png are not processed, i uploaded the whole thing on github here sorry, i know its not really convenient, but im not sure how else to show you the problem. i tried to minimize the code without leaving anything that could be causing the problem, which left a lot of code. You might need to move around to see the piano. And dont mind the weird animation, i choose i random picture ><
Okay, i managed to “walk around the problem” by creating an invisible box in the same position as my piano, and it works, but definitely not the most elegant solution, so if anyone manages to figure out why .obj is not included in scene.children, i would be very grateful!
I had same issue, but I found that intersectObject()'s recursive should be true. Then, I can find the intersect points on the loaded “obj” file.