jeromeetienne / threex.domevents

three.js extension which provide dom events inside your 3d scene.
http://jeromeetienne.github.io/threex.domevents/examples/demo.html
MIT License
246 stars 113 forks source link

Mouseover and mouseout are not working. #9

Closed laughingturtle closed 9 years ago

laughingturtle commented 9 years ago

Mouseover and mouseout are not working. Is this something with integration with version r71/three.js or am I just deploying this wrong? : http://www.deepplanet.com/fiddlejs/6/

jeromeetienne commented 9 years ago

http://jeromeetienne.github.io/threex.domevents/examples/demo.html

they work here tho

laughingturtle commented 9 years ago

Great, thank you!

laughingturtle commented 9 years ago

Ok I got it, I replicated the demo link then switched out the loader, threex does not show the mouseover and mouseout with the object loader. Here's my loader:

 var loader = new THREE.ObjectLoader();  
 loader.load("models/ferrari-f1-race-car_prepped_03.json", function (mesh) {
 scene.add (mesh);

What's happening here? How do I get threex.domevents to recognize the above object mesh on rollover?

Here's the Suzanne loader:

THREEx.Suzanne.GeometryLoader = function(onLoad){
  var url   = 'models/Suzanne.js'
  var loader  = new THREE.JSONLoader()
  loader.load(url, function( geometry ){
    // make the monkey to face the camera
    geometry.applyMatrix( new THREE.Matrix4().makeRotationX(Math.PI / 2) )
    geometry.applyMatrix( new THREE.Matrix4().makeScale(0.5, 0.5, 0.5) )
    // notify onLoad
    onLoad && onLoad(geometry)
  })
}

 new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
 // notify the geometry need to update normals
 geometry.computeFaceNormals()
 geometry.computeVertexNormals()
 geometry.normalsNeedUpdate  = true
 // create a mesh with it
 var material  = new THREE.MeshPhongMaterial({
   shading : THREE.SmoothShading,
 })
 var mesh  = new THREE.Mesh( geometry, material )
 mesh.scale.multiplyScalar(2)
 // attach mesh to the scene
 scene.add(mesh)
adri21112 commented 9 years ago

Hi!! I have got the same problem. I can work with all events, except mouseover and mouseout. Maybe we forget something. This is my code:

domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(texts[0],'click', function(event){
    console.log("click event 0");
}, false);
   domEvents.addEventListener(texts[0],'mouseover', function(event){
    console.log("over event 0");
}, false);

Where texts[] its a array of mesh.

What do you think? Thanks!!

adri21112 commented 9 years ago

Ok, I think it's a problem with the material. I try with MeshLambertMaterial, and now I can use the mouseover. Thanks!!