THREE.SkeletonUtils is undefined - three.js

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.

Related

How do you import a .gltf model in ar.js?

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.

What to use for creating custom 3D objects and animations?

I'm used to working with SolidWorks and Catia for 3D object and basic animations but i got a personal project that i work on where i need to build a LASER manufacturing machine and i need to make it look like it is in real life, make zoom inside the machine and see how the light gets polarized as it passes through a crystal, see how the laser beam hits the surface and particles fly of the hit surface,etc.
I thought about Unity Engine but don't know much about this area of 3D and in what program to do the models before importing into Unity, can you guys help me with better solutions ?
Thanks,
Adrian
If you want to use Unity, you can import the following file formats: .FBX, .dae, .3DS, .dxf, .obj (http://docs.unity3d.com/Manual/HOWTO-importObject.html)
From Solidworks, you can export as an STL, then import the STL into a 3d Application (ex. Blender), and in Blender you could export the model as an FBX.
I think you're able to achieve more in terms of animation with unity. You can design your model documents in SolidWorks or CATIA and save them in IGES (neutral format).

Using library extensions with TypeScript + requirejs

I'm currently messing around with THREE.js and socket.io to make a little game - I'm wanting to use the OrbitControls extension for THREE.js (i've used it before in a non-TS project) for camera controls.
The problem is that the client can't seem to find it (it compiles fine):
Uncaught TypeError: undefined is not a function
at line:
this.cameraControls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
I'm including in my TS file using:
///<reference path="../typings/threejs/three-orbitcontrols.d.ts"/>
import OrbitControls = require("three-orbitcontrols");
At the bottom of my three-orbitcontrols.d.ts file I have my usual export that I seem to need at the bottom of some typing files:
declare module 'three-orbitcontrols' {
export=THREE.OrbitControls;
}
But i'm not sure if this is the right format, I've tried a few things like directing requirejs to the right file in the config (since the filename is a bit different):
paths: {
"three-orbitcontrols": "three.orbitcontrols"
}
Interestingly, after compiling with Gulp (using AMD), three-orbitcontrols does not appear in the require at the top of the resulting .js file.
My question is: how do you properly include an 'extension' library for a library you already have with TS and requirejs? Is there some form of merge I need to do? Do i need to manually merge the d.ts and js files? (I hope not!)
Thanks!
how do you properly include an 'extension' library for a library you already have with TS and requirejs?
Since you are calling THREE. here : new THREE.OrbitControls. You need to put import OrbitControls = require("three-orbitcontrols"); on THREE so:
import OrbitControls = require("three-orbitcontrols");
THREE.OrbitControls = OrbitControls;
Note: There isn't an idiomatic way of doing this since there isn't an idiomatic way that JavaScript libraries do this. The solution here is specific to your use case and this extension.

Three.js how to import dynamic components?

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.

Import 3D models from AC3D in OpenGL-ES on iOS

Lately i have got a task to import a 3D model which is created in AC3D into my OpenGL-ES application. Unfortunately im quite lost where to look and what to choose.
The 3D model consist of 6 objects, which should be individually controlled.
I have been looking at different type of readers, such as Wavefront etc. but i dont seem to get the proper implementation into my current project.
Anybody you can point me a little in the right direction?
Thanks in advance.
Feel free to have a look here https://github.com/epatel/ac3dreader
and this page about using it http://www.memention.com/ac3dreader/usage/

Resources