Three.js & Dreamoc - three.js

I want to know if there's a template or dimensions to know to use Three.js with the Dreamoc devices.
I found something quite similar :
http://www.instructables.com/id/Reflective-Prism/step3/Four-Sided/
But after looking the display mode of the Dreamoc, the views seems to be placed in a specific way:
And after zooming:

Yes, a reflective prism example can be found in the three.js dev r.74 branch:
examples/webgl_effects_peppersghost.html.
Pull request: https://github.com/mrdoob/three.js/pull/7527
three.js r.73

Related

Video transparency with A-Frame and Three.js

I'm forwarding this open issue from A-Frame Github page hoping that some people may know what's going on with this issue. It's still not working with A-Frame 1.0.3 and I don't really know where to search. There are two examples on the Github issue, one working with A-Frame 0.8.0 and the other one with A-Frame 0.9.0. There are absolutely no warnings or information in the javascript console so it's kinda hard to find where the issue can be.
On version 0.8.0 it used Three v90 and on 0.9.0 it used v101. So maybe something was made between these two versions on Three but I don't understand what.
Did anybody find a way to use videos with transparency on recent versions of A-Frame and/or Three.js ?
Thanks for your help :)
It seems that the assigned texture format doesn't have the alpha channel (THREE.RGBFormat, you can log and check the values here).
You can resolve the issue by changing the format of the video texture to THREE.RGBAFormat:
videoTexture.format = THREE.RGBAFormat
within a custom component containing a fix like this:
// wait until the material is ready
this.el.addEventListener('materialtextureloaded', e => {
// grab the material
let material = this.el.getObject3D("mesh").material;
// swap the format
material.map.format = THREE.RGBAFormat;
material.map.needsUpdate = true;
})
working glitch here.

what is best ThreeJS loader to use for Animated models?

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.

Three JS animation in Editor possible?

I have been able to get almost everything I need into the editor, But cannot figure out how to get a collada model that was imported to play it's keyframes.
Since I am not doing loader.load (collada) blah blah like in the examples. I cannot figure out how to get the animations. Animations is always undefined, but I know keyframes exist. Any ideas?
as far as i know, animations in the editor are not fully implemented yet.
the corresponding code in the viewport is commented out (line564+)
i think your best shot is to modify the editor (and eventually create a PR) or go back to coding everything.
the editor in its current form only shows the basic functions but the code is quite well structured to allow implementing custom features.
A quick update that animations in the Three.js Editor are now supported. Below is a gif from the linked PR demonstrating usage.

How do I convert a ms3d model to three.js?

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.

Maya to three.js with animation

I have a rigged (skeleton and soft bind) model in Maya. The model is all one seamless low poly with a single jpeg texture mapped. There is simple animation of the skeleton. (joint rotation). I need to get it to work with ThreeJs (webGL).
Do I try to export an OBJ with Morph Targets some how? I can do OBJ but how do I get the morph targets? Can the developer that I am working with read Maya's baked animation file (.MC or .XML) in webGL. Do I export a Collada DAE?
Any help that can steer us in the right direction would be greatly appreciated.
Thanks
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.
It is best to export a Collada DAE file from Maya in order to get your data into ThreeJS. You can preview and share your data via http://Clara.io (an online 3D editor, modeler, animation) which imports Collada DAEs and uses ThreeJS for display.
You should have read the FAQ as there is plenty of info there. https://github.com/mrdoob/three.js/wiki. Most probably you need to export to Collada as Wavefront obj's do not support animation.

Resources