Accessing glTF animation extras property - three.js

The glTF 2.0 spec for animation includes the "extras" property for Application-specific data. Currently I can't find the extras property on animations being surfaced anywhere in three.js. Would it make sense to update the AnimationClip class in three.js to have a userData property, similar to the Material class, and to copy the Animation extras to this property during glTF loading? Or did I miss it and it is already being copied into an object that I just didn't see?

Related

How to add equirectangular environment map to gltf model in A-Frame?

When importing a gltf object into an a-frame scene I'd like to set an equirectangular environment map for that object to influence its reflections. I'd like to use the same img DOM id reference as I used in the sky entity. How can I do that?
For example, I'd like to be able to specify code such as this:
<a-entity gltf-model="#model-file" env-map="#sky"> </a-entity>
I found a cubemap version of this by #donmccurdy but looking for equirectangular instead and also a mechanism to use an already loaded image texture.
https://github.com/donmccurdy/aframe-extras/tree/master/src/misc#cube-env-map
See this answer:
Aframe gltf-model demo with envmap
Another option for the future, investigate scene.environment threejs which may apply the same environment map automatically to all objects with supported materials.

Threejs object with multiple material doesn't work with RayCasting

I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.

How do I assign a material to my imported OBJ file in the ThreeJS Editor

I'm testing a custom scene in ThreeJS.org/editor. I've started with the Camera example scene as a template. I want to add custom geometry to it. When I import my OBJ file, the mesh appears in the editor with no problem, but there doesn't seem to be a way to import its material along with it. Instead, I went and manually assigned the correct texture map to the imported object's Material component.
In the editor, the texture map showed up and looked great after I added it manually, but when I pressed Play (or when I Exported or Published the scene) the texture map for that object was gone again. I tried refreshing my window, and all changes I made to the material component were lost.
There must be something simple I've overlooked. Can anyone help?
The OBJ format doesn't store material data; it uses a separate format, MTL, for that. Unfortunately, it seems that the Three.JS editor doesn't currently support MTL files.

Three JS Blender JSON EXPORTER smooth / flat shading

Blender has the ability to set a material to Flat or Smooth.
In the Blender exporter for three.js, when I check "Export Normals" to JS model, I always export all materials as Smooth. The exported file is twice bigger.
Is there a way to export models with Flat Shaded and Smooth shaded faces without need to set it manually in three.js ?
There is no flatshading/noshading/smoothshading equivalent in blender. However as few other features (blending, depthwrite, depthtest) it could be proposed in the 'threejs' part of the material pannel.
You could do it yourself by editing the following files in the addon :
constants.py,
__init__.py,
exporter/material.py,
exporter/api/material.py
(copy the way blending types work for example)
You would just pay attention that the blender io-three addon yet has a shading field for materials, used to define phong or lambert materials. You would just have to chose an other name.
Finally you would also have to edit threejs so the JSONLoader can parse the new property you add.
That said, it is a bit longer than setting your materials properties in your code, since you will always need to write material=new THREE.Mesh****Material(properties)...

ThreeJs and Blender model without texture

I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)

Resources