I am creating a first person game.
The room model has only walls and floors.
The model is npx gltfjsx . /public/box2.glb and converted to React code.
It is then loaded using GLTFLoader.
The model I loaded is written in CannonJs Physics but the collision detection does not work.
However, in the floor code I created, the collision detection is working.
What am I missing?
Or is there another way?
sample code
https://codesandbox.io/s/glb-fps-qzrjbj
Related
When I use three.js to load my Collada file, FPS is only 5-7.
I try to optimize it with Blender and Meshlab, I can load it smooth but model becomes worse.
Can anyone explain to me why my model is rendered with a low frame rate?
You can download my model right here.
Can anyone explain to me why my model is lag when load.
Your model is rendered with 66011 draw calls. You can see this information by inspecting the WebGLRenderer.info object in your debugger. Such a high amount of draw calls is unfavorable and most likely the main reason for your bad performance.
So the first thing you should try is to merge geometries in your content creation tool (e.g. Blender). Also avoid the usage of multiple materials per 3D object.
BTW: Instead of using Collada, export your model as glTF and then load it via GLTFLoader. It's the recommended 3D format of three.js. More information right here:
https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models
I am new to learn Three.js and I am not sure it's exactly suit for my needs!
I am creating web application using PHP to keep car accident details.
I was wondering if it's possible to have interactive 3d car object and I can mark the damage on the car with mouse click and post to server.(Create,Read,Update,Delete).
So when ever I open the client details I can see the damages that already mark on the car.
Could someone point me the right direction.
How can I achieve this?
You can have car model and you can write some javascript code to change this car model by mouse clicking. Problem is that you have to learn a lot about Three.js, 3d graphic and javascript. So the right direction is to start learning those 3 things. Three.js is not a 3d modeling tool so if you want to create car models in the browser you will have to write your own 3d modeling code. When you will have this Read, Update and Delete will just work. You will only have to add some code to write changes made in browser to your server.
Based on webgl_loader_collada and webgl_loader_collada_skinning,
I tried to load my own basic collada simple model.
But the result is : the animation is too fast.
When I load the example collada models (avatar and monster), the speed is normal and their animation is also on 250 frames or less.
So i don't know what is wrong with my own model.
Here is my project
On page.html you can see the result and if you want all the files, you can download pack.7z.
Thank you for your attention.
I have created a 3D model for printing in 3D an industrial layout.
Because I am not used in playing with professional 3D modeler software, I used SketchUp and the result was fine !
Now, I want to reuse the 3D models to make a dynamic visit of the "to-be" installation.
I exported each object in Collada format (DAE), and then try to used the collada importer in Threejs.
I have around 130 objects that I want to be able to select interactively, but I manage only to load one ...
I then get a try with STL loader (after having converting objects with MESHLAB from DAE to STL).
And then it works without any problem... but rendering problems.
In the linked picture (sorry, not enough reputation to insert image !), you can see that some parts of the objects seem the be "transparency", even if they have not this property set ! (only the ground is).
While moving with the TrackBallControl, some parts of the objects disappear from time to time....
I try with only one object, with or without the ground,...
I took snapshots of the problem I get :
fig 1, inside the red circle, the errors appears
fig 2, without the ground, it is the same : some parts that should be hidden are not
fig 3, the wireframe rendering shows not pb in the exported model...
link >> http://stackoverflow.legrandcondor.com/photo.html
link >> http://stackoverflow.legrandcondor.com/
Any ideas ? Suggestions before I get crazy ?! (Everything else works fine!)
Thankx in advance,
Your camera near plane is 0.1 and far plane is 1000000. Small values of the near plane can lead to depth-sorting precision problems.
In your case, set your near plane to, say, 100.
ref: http://www.opengl.org/wiki/Depth_Buffer_Precision
Also consider using OrbitControls so your model remains right-side-up.
three.js r.69
I am currently working on skeletal animation tests in three.js. I have a simple model which animates just fine in blender. Basically it consists of three stacked, bending cubes.
When I export the blender file to the three.js using the blender export plugin with Blender V2.64, the animation in the webGl context appears different as if the skinweighting is wrong.
WebGL-Demo:
http://rainbowrangers.de/threejs/animation_test01/
Blender-File:
http://rainbowrangers.de/threejs/animation_test01/model/animation_test01.blend
What do I have to do to get the correct result in three.js?
I am the person you quoted from the github discussion. I have recently been experimenting with this pipeline, ( ie Blender bone animations into threejs,) and have found that it is very very difficulty to find a reliable process that will work every time.
On my blog, I have compiled a list of 'tips' that allowed me to achieve success on some occasions:
http://dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
To summarise, the most important things I found were:
Delete the Armature Modifier before exporting, or the animation will be all messed up.
Check that your Vertex Groups are properly assigned to the bones. ( In Blender, you can use automatic bone weights. )
Key all bones in the first and last frames of your animation. ( As you discovered, if you only have keys for the bones you have changed, ThreeJS won't infer anything about the other ones, and things will be broken. )
Even following these guidelines, I can't get things to work consistently, and have been considering using morph targets until the library matures a bit more. The file sizes for morph targets are much larger but they seem to be a more reliable option at this point, in my experience.
After a lot of digging I finally found the answer in one of the three.js github discussions:
"Insert a full keyframe for all of the bones at the beginning and end of the animation. I found that without the first keyframe the animation would be subtly distorted, and without the one at the end I would lose parts of the animation toward the end."
Source: https://github.com/mrdoob/three.js/issues/2106
That was exactly what happened to our render. We only hat keyframes set for the bones that were changing and not for the static ones.
I've also found that to get the exported model working right the export should be done at frame 0 in Blender.
Another thing that solved a problem I've encountered was not to scale model after exporting it. This means that the model can't be scaled in the JSON file and probably in the code directly.
Using three.js r56