react-three/cannon : offset around the GLTF model, model dosent touch the floor - react-three-fiber

i'm trying react-three/cannon and my goal is to drop a "Cube" and a "GLTF model" from a position and let them land on a "Floor".
it works well for the Cube (he touches the "Floor") but the "GLTF model" drops but never touch the "Floor"...
I think that there's an offset in the model or maybe some scale natively but i cant figure it out. enter image description here
I have some code and a video to illustrate. Thank you all for your help guys !!!
enter image description here
enter image description here

Have you checked where the origin of the GLTF-model is? I often find models on the web where it is not in the center of mass of the geometry. If you work with Blender right click the model and choose 'set origin' and then 'center of mass volume'.
You can also check where the physics box of the GLFT is by making it visible.
Add another tag in the physics tag named <Debug color='black'></Debug> and add your JSXs inside the debug tag.

I think is because something like the image,
the bound box of the collider is bigger than your model.
to fix it, just set the property to size/2:
const [ref, api] = useBox(
() => ({
args: [0.1, 0.1, 0.1], // extents: [x, y, z]
}));
I'm was also struggling with the same issue,
and I checked the code of Pingpong demo, saw it's using args props in the useBox hook.
The Readme didn't give much description about it, but I found this comment in the code

Related

How to look to objects using lookAt() with a-frame camera component and look-controls

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.

Exported Blender Model "faces" the wrong way When Importing to SceneKit

I've bought a 3D model form TurboSquid, and I need to scale it down to an exact size. I'm a complete newbie when it comes to 3D modelling and Blender but I've managed to find enough tutorials to do this and export the file.
The problem is that I can only get it to export a view from the corner of the object, which I problematic as I want to line-up several of the objects together as part of my ARKit app.
I'm exporting as a Collada .dae file, selecting "Selection Only" as I only need the model, no lights or camera (is this right?).
Is there any specific way it needs to point in Blender? Would aligning it with the camera help (even though I'm exporting the object only)? Can I select a side to be the "front"?
I can angle it somewhat correctly in the SceneKit Editor but I'd prefer to do it in Blender.
I can't remember where I got this or I would happily give credit, but it's how I got my Turbo Squid models to work. I needed to flip mine around and fix the Y-Up axis, but you might be able to fix your rotation with this.
Make sure everything is selected and press R (for rotate). Just like with scaling, you’ll find that mouse movement rotates the selected objects. But we want to do a particular rotation: 180 degrees around Blender’s Z-axis. To do that quickly, assuming you already pressed R, press Z, then type 180, and press Enter. From my experience, doing this rotation will correct the orientation of your model.
Just as with scale, to apply rotation permanently, press Ctrl+A. In the menu that pops up, click “Rotation”.
Set Y-Up for Scenekit if you need it.
/Applications/Xcode.app/Contents/Developer/usr/bin/scntool --convert fighter0.dae --format c3d --output out.dae --force-y-up --force-interleaved --look-for-pvrtc-image

Trackballcontrols or Orbitcontrols?

First please excuse my bad english writing and please note that I am a Javascript NOOB!
I am currently developing a website for a client where I am presenting different kind of "wood cut" in webgl but I am unable to get the desired look an feel...
My goal is to make the viewer look and react like what we can see at Sketchfab.
http://sketchfab.com/show/9f7e1e088f0943b697e809f224f8c76d
The rotation is limited to a certain angle and the model always stay in the right position... With Trackballcontrols the model rotate all the way and its a mess. I have tried to change the quaternion as follow:
from:
_this.object.up.applyQuaternion( quaternion );
to:
_this.object.up.applyQuaternion( new THREE.Vector4(0,0,0,1) );
but it behave weird when I reach a certain angle, the model become jumpy...
Then I tried with Orbitcontrols but it seems that there is no dynamicDamping because the controls are really "dry". I prefer a smoother effect...
1- So is there a way to use Orbitcontrols and get the dynamicDamping to work?
2- Is it possible to modify Trackballcontrols to get the desired result?
an example of my models are here:
http://www.boissilvac.ca/new/nosproduits/patron19
Thank you for your time

camera.lookAt not called when THREE controls are being used

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.

Creating 3D rotatable text using blender

Hi i need to create a rotatable 3d "c"(alphabet c)shaped object,i.e a logo kind of thing using blender 3d tool,i tried using text in blender but its not giving the feel of 3d object please help me out from this.thanks in advance.
You might want to hit tab to enter edit mode, select the faces to extrude(can hit "a" to select all), hit "e" key and move the mouse to extrude this text shape. Obviously render having added a light to the scene. (in case you are rendering it) And add a camera if you are not using the default one, and rotate it, or the object, so it renders other than a frontal view, to make it look more like a "3D object"
There's not yet an stack exchange site for 3d modeling questions (sadly, although one is being voted ) , so this question might fit better in Superuser. Anyway you need to explain the problem with more detail, or accuracy :)

Resources