i'm kinda new to working with ar.js. I really wanted to see what I could do with it. Well, I ran into a wall, I'm trying to import a custom gltf model to ar.js (the version that uses three.js instead of a-frame) but the model does not even appear. I don't know if i'm doing the import correctly as I haven't found an example online. I know my model works because I tried three.js and GLTFLoader beforehand and was succesfull. I don't what i'm doing wrong.
Related
When using THREE.SkeletonUtils.clone(object), im seeing that THREE.SkeletonUtils is undefined.
I am refering to this forum (posted in 2019) which suggests using this to clone a 3d model which has skinned animations.
I am importing three.js like this:
import * as THREE from 'https://unpkg.com/three#0.118.3/build/three.module.js';
Do i need to reference this SkeletonUtils separately? My understanding is that this is part of Three.js.
There are a lot of additional modules that are not part of core Three.js, and you need to import them separately. The convention is that if the source file is in the /examples folder, then it's not part of the core library and you'll have to import it separately.
import * as THREE from 'https://unpkg.com/three#0.118.3/build/three.module.js';
import SkeletonUtils from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/utils/SkeletonUtils.js';
// Now you can use it as follows
SkeletonUtils.clone(object);
How do I know if I need to import it separately?
The best way I've found to differentiate between core classes, and add-on classes is by looking at the documentation. For instance:
Look at Vector3, and scroll to the bottom of the page, you'll see Source: src/math/Vector3.js.
Look at SkeletonUtils, scroll to the bottom of the page, and you'll see Source: examples/jsm/utils/SkeletonUtils.js
Since SkeletonUtils is part of the examples folder, it needs to be imported separately.
what is the most supported format to load on ThreeJS for Animated models by bones with multi-textures ?
i find most examples (including JSON) are showing models with single texture.
if JSON is the best, where can i find working example model with multi-textures? i tried to export one from Blender but it does not work.
Had also problems with multi-textured animated models last time and best solution I've found was
http://www.cgdev.net/json/index.php
There is an exporter and a loader for threejs inside.
Hope this will help.
I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.
Example this model is a dynamic component:
http://sketchup.google.com/3dwarehouse/details?mid=c1e4befdfbfd283135b07d6213c348&prevstart=0
How do I import this to Three.js? I was thinking if it was possible to import the model and create the dynamic component dialog with input fields and some javascript? So it would be interactive like it is in google sketchup. I know to import OBJ files to JSON and then load them with three.js, but what happens to the dynamic components?
Dynamic components are in Sketchup-specific format, and there is no way to import them to Three.js as is, while maintaining the dynamic options. When exporting from SketchUp, dynamic components should be exported as they can be seen in SketchUp, but as dumb geometry, the dynamic nature is lost.
You'll have to roll your own dynamic components in Three.js if interactive models are needed, maybe by using skeletal animation, morph targets or just moving geometries/Object3D groups around. Or you could see how the various classes in three.js/src/extras/geometries are implemented. No easy way around as far as I know.
I'm trying to get my Maya animated walk cycle into three.js. I have exported the animation with the model into the .dae format, changed the path to my model in the example. My model is being loaded, but it doesn't do any animation. What could be the problem? My main goal is to create a character who walks with WASD as his walk cycle is being played.
Any suggestions where should I start?
If you are using collada loader, the animation should work without any problem. I have used the collada loader to animate one of my models using three.js, and it works like charm.
A better example to take a cue on how to make it work is webgl_loader_collada_keyframe.html .
Converting to the DAE format and then to JS is rife with problems, and it rarely works for animations. THREE.js comes with an exporter for Maya, but it only works for static models.
I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.