Im trying to use last threejs version to load a Collada Loader. Furthermore, I just want to make a mouse over events.
I've been reading (and analyzing a lot of examples) about this on related forum, there is a problem about intersectObjects (this function makes possible mouse over evet).
Question is simple: How can I code mouse over events on pieces of my model?
Here is my example but It is not using the latest version of the threejs library.
Nothing else at the moment, I think It is so hard to begin with this library, there isn't so much documentation...
My root issue is when mouse is out of canvas, threejs detects mouse over some piece of my model and through the event... I think if I update threejs this may be fixed
Thank you!!!
As far as I can see you already implemented intersectObjects.Try using this on your canvas:
position : absolute,
top : 0px
Seems to me that you dont use the right mousePosition for the calculation. Try using the relative mousePosition of the canvas and not of the document. And I would not check for intersection on every render call. Maybe on a mouseMove event or on an interval.
Related
I’m begginer with aframe and I’ve an animated glb model (from Mixamo then Blender) on this page https://glitch.com/edit/#!/danseuse?path=index.html%3A30%3A7
It works correctly with this script :
<a-entity gltf-model="#danseuse"
id="danseuseHHP"
position="0 -.5 -6"
animation-mixer=" timeScale: .5 "
></a-entity>
But I would like the animation begin when I click on the glb model.
I read the post https://stackoverflow.com/questions/51058224/how-can-i-control-a-gtlf2-mesh-animation-in-aframe-with-onmouseover-event/69876030#69876030 but I dont understand the second part of the answer of this post (sorry I don’t know javascript).
I use the aframe-extra, how do I change the entity, with for exemple :
event-set__start="_event: click; ??????
Thanks for your help.
You've run into a few different problems here...
First up, event-set doesn't work well with component names with '-'s in them.
https://github.com/supermedium/superframe/issues/296
So using event-set is out (apart from this, it would probably work). You need to write a small component like this.
<script>
AFRAME.registerComponent('animate-on-click', {
init: function() {
this.el.addEventListener("click", (e)=> {
this.el.setAttribute("animation-mixer", "timeScale: .5")
});
}
});
</script>
Then you can include this on your object:
position="0 -.5 -6"
animate-on-click
></a-entity>
See this glitch...
https://glitch.com/edit/#!/animate-on-click
Now for the final problem (and the reason I used a different GLTF in my glitch).
Your GLTF appears to be a skinned mesh. I don't know much about raycasting with a skinned mesh (when I learn more I will come back & update this), but I do know it involves some complications.
See e.g. https://github.com/mrdoob/three.js/pull/19178
Using your GLTF model, I wasn't able to get any raycasting to work at all. So I think there is a further issue that's to do with your GLTF model, and not a problem with the code you posted.
Hope that helps a bit.
Update after investigatng the issues with raycasting on this model.
I haven't completely understood what is going on here, but as far as I can tell...
Raycasting is correctly checking against each body part.
The first check is against a bounding sphere - the idea is to check whether more detailed raycast calcs are worth doing. This is done just with the base model, without any of the bone transformations applied.
These bounding sphere checks consistently fail.
As far as I can tell that is because the base model components are tiny, and only get scaled up to proper size in the process of having the bone transforms applied.
Because THREE.js does the bounding sphere checks against the components before applying these bone transforms, there is virtually zero chance of the raycaster detecting any collisions.
Potentially you could make some changes to the model to address these issues, but I suspect it will be far simpler just to put an invisible plane directly in front of the model, and use raycasting against that to trigger the start of the animation.
Here's a glitch showing that solution:
https://glitch.com/edit/#!/danseuse2
Goal: I want to create a Web based experience where the user need to see a series of elements on the scene and later, I want to leave the user explore alone.
I have several objects around the scene and I want the camera to look at them one by one. I am using the lookat() method but is not working correctly. I found this example on Threejs:
http://jsfiddle.net/L0rdzbej/135/
But my example is not working like the previous example.
After the answer of #Mugen87 is working but with a little modification:
document.getElementById('cam').sceneEl.camera.lookAt
Access the camera in this way. You can see the example here:
https://glitch.com/~aframe-lookat-cam-not-working
Please click on the button "animate camera".
As mentioned in this thread, you have to remove or disable look-controls if you're overriding camera rotation manually. So you can do:
var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});
to disable the controls, perform your lookAt() operations, and then enable the controls via:
cameraEl.setAttribute('look-controls', {enabled: true})
I finally could make it worked. I am new in Threejs and aframe and surely I don't understand rotation, positions,world coordinates good enough but I think I did a decent work. Here the link:
https://glitch.com/~aframe-lookat-camera-working
I hope will be useful for somebody on the future.
I've been working with an animator to help with my game. The animations all work fine using morph targets, but the file size just gets way too large. Skeletal animations are the answer. We've spent a week working to get the animations exported from blender correctly.
After reading many many articles we were able to get basic animations working correctly. I make sure to set the armature to rest pose and export on the first frame and all that, but the more complicated animations are off.
You can see in this example here (click to cycle animations):
http://www.titansoftime.com/beta/animation2.html
My animator said the problems are related to bone constraints using his controllers. He said his technique is called "Inverse Kinematics".
Anyone have any ideas?
I have found the answer. For one you can not scale the geometry in the json loader (however you can scale the mesh object once created).
The main thing is that my animator was using inverse kinematics, which apparently three.js does not play nice with.
I am working on a program, that uses THREE.RollControls, when the user goes too far away from the center of the screen, they tend to get lost, so I am working on creating a function that reorients them, facing the center of the scene.
What I had intened to do was simply call the following:
camera.lookAt(scene.position)
However, this has no affect. From what I was reading on different stack overflow questions specifically this:
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
It seems like their solution was to do the camera position change using the controls, rather then changing the camera itself.
I do not believe there is any 'Target' in the Roll Controls, so I don't know how I can reset where the camera is looking at based on a THREE.Vector3() Is there a simple way to do this, or will I basically have to:
So far I have 'attempted' to do the follow:
- Calculate the difference of position of the camera with the position of the scene.
- Normalize this vector
- Subtract it from the direction forward of the camera
- use this vector in controls.forward.add(thisVector)
but this doesn't do at all what I want (probably because I have no idea what I'm doing)
Thank you in advance for your time!
Isaac
The same thing bugged me too about the RollControls but I took a different approach in solving the problem. Since the controls are in the example code (in r55) you can modify the controls, as they are not part of the core library. You can see my modifications at http://www.virtuality.gr/AGG/EaZD-WebGL/js/three.js/examples/js/controls/RollControls.js
I introduced a local variable called mouseLook because I could not use the this.mouseLook. I initialized it to false and I only make it true when there is a button press i.e. when navigating in the scene. That solved my problem.
I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.