Problem: the bones of the CCDIKSolver seem to scale down when the target is further away.
I've run into an issue that I can't figure out. I have a 3d asset that is based on this example https://threejs.org/docs/#examples/en/animations/CCDIKSolver.
When loading the model (useGLTF) the basics seem to work, except that the bones seem to scale when the target moves away
https://codesandbox.io/s/bones-without-html-n05nzo
I added a Drei <Html> component to the scene for some debugging, and low and behold, it stoped the scaling!
https://codesandbox.io/s/bones-with-html-serbpg
I'd love to understand 2 things:
is my approach correct
Any idea why the rendering of that Drei Html component fixes the issue?
Related
I am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. ((https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html))
The issue I am running in to is that this is occuring.
Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn't generally this dark.
This is another example with higher exposure and settings 1: https://i.stack.imgur.com/KUPW9.jpg
An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.
Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.
Github
Don't worry about how messy the code is im just trying everything here lol
VERY IMPORTANT
I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error
I'm new to webgl and three js but I managed to finished a small project in a few weeks. But what I want to ask is, what can I do do improve loading times of the app? I'm not complaining about the fps's because the interaction with it is smooth, but it takes quite a while to load everything. Do you guys have any tips or resources that I can check to improve the bundle js loading times?
Im using d3, topojson and three js. The project is a 3d globe with a background image. The globe has a texture and it shows the overlay of the country you're hovering with (so it has mousemove and click events). It also has 3d markers (spheres and cylinders) and interact when you click them.
I tried removing all the code i could, avoid heavy computations, and use BufferGeometry everywhere I could. It also has particles. Since it uses click events I needed Projector.js and I needed OrbitControls.js for the controls logic. Im using debounce on the events also. I'm just asking about general three js tips, some guidelines to avoid waiting 6-9seconds for whole scene to load. Thanks!
shrink your 3D model data;
use compressed texture format such as dds or crunch;
cut big scene into small ones and load them by lods;
Hope this helpful.
I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)
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 having an issue in unity. I have an animated model made in blender imported into unity. When the scene starts the model is the correct size and is at 0,0,0. When trying to use a java script to play an animation the model moves about a meter and scales by about half, the animation does play on the small model. The model was made in blender and is not anything out of the ordinary, the animations play in blender with out any issues. It was imported as a blender file not an fbx. Trying to import it as an fbx produced too many issues. The import did not cause any issues but two things of note: the rig was imported with -90x rotation and the animations can only be used as lagacy. The java script is not complicated it is only using "animation.CrossFade( "english_hook" );" or any of the other animations. I have tried to see if anyone else on the internet has seen this issue but either they ave not or I am not searching for the right problem. I am fairly new to unity and have moderate exprience in blender. Has anyone seen this kind of issue, know how to fix it or have any ideas?
Are you using Unity4? You might have to mark your animation as legacy, open your imported model in unity inspector, select "Rig" tab and set your animation to legacy.