Since its not a real ray tracing environment, is it still possible to somehow create a mirror using ThreeJS? I'm trying to create a type of 'infinite reflection' environment, where mirrors reflect mirrors.
Yes, using WebGLRenderer. See the three.js example http://threejs.org/examples/webgl_mirror.html.
You can create the infinite reflection effect if you edit the example, and move the mirrors so they reflect each other.
three.js r.63
Related
Open3d's easy draw_geometries utility makes it possible to copy & paste camera parameters to restore a certain view point after it has been changed. It seems like this functionality would also be available when using the SceneWidget and its Open3DScene high level scene. However I have not figured out a way to mimic this behavior.
Copying and pasting a viewpoint from draw_geometries onto notepad reveals this information:
boundingbox_max, boundingbox_min, field_of_view, front, lookat, up, zoom
In order for it to have the same effect using the SceneWidget I would have to somehow obtain this information from the scene's camera, create a copy, and then load it later when it is needed. Nevertheless, I cannot access the above properties explicitly through the camera object, nor have I found a way to set them (assuming I already have them).
The next "obvious" solution would be the camera class's copy_from method, which sounds great, except I am unable to instantiate the Camera class in order to use it.
How can I achieve this save & restore viewpoint effect?
Thanks in advance
Using blender Im used to apply any transformations to object with CTRL+A; so object becomes zero transformations (rotation/scale/position). Then I can transform object from scratch not worring about previous transformations.
Is there any way to do the same in THREE.JS? Something like THREE.Object3D.commitTransforms()?
blender
You should be able to achieve the intended effect by using BufferGeometry.applyMatrix() and passing the Object3D.matrixWorld into it. This will bake the world transformation into the geometry.
However, you have to manually reset Object3D.position, Object3D.scale and Object3D.rotation.
three.js R109.
PIXI.js has Container#cacheAsBitmap which causes the container to "render" itself to an image, save that, render the image instead of its children and when a child is added or removed or updated, the cache is updated.
What's the alternative for Three.js (but instead of an image it would be a mesh)?
I may not be understanding your question properly, but your reply to Sabee's answer was helpful. It sounds like you're looking to either merge multiple geometries into a single mesh or implement a form of model instancing, with the goal of reducing draw calls.
There is more than one way to accomplish this, depending on your requirements. You can merge multiple geometries into a single geometry object, and provide either one material or an array of materials (where each index corresponds to one of the merged geometries). You can also use GPU-accelerated instancing to achieve a similar effect with only a single copy of the geometry.
I'll refer to Dusan Bosnjak's excellent Medium series on instancing, which starts here: https://medium.com/#pailhead011/instancing-with-three-js-36b4b62bc127
As well, here are the three.js examples regarding instancing: https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing_dynamic
Pixi.js is a 2D javascript library, using WebGL to render the images(frames) into html5 canvas. Three.js allows the creation of Graphical Processing Unit (GPU)-accelerated 3D animations using WebGL.
The browser cannot store rendered 3D frames, this work allows the GPU Accelerated Render Cache, which depends on what hardware's they run. Helpful post understanding what's going on behind the scenes.
But you can cahce your assets in browser like images, json objects of 3D models and etc.
In Three.js Cache class is a global object, used by assets loaders (TextureLoader, ImageLoader, AudioLoader ...), by default is disabled (false). To enable it you can set THREE.Cache.enabled = true ;
I think by default the browser should cache the textures for performance reasons, but if you want to be sure simply enable the cache by force code it in Three.js. Also the creator of Three.js answered this question.
I am trying to understand how the WebAudio API would work. I have two objects; one representing the listener and one the source. And have used the below link as an example. I am able to move the source and the sound position changes.
https://mdn.github.io/webaudio-examples/panner-node/
The command to change the orientation has been provided: viz this.panner.setOrientation or this.listener.setOrientation. The question I have is: if I have a source or listener object (in canvas mode using ThreeJS viz. we know its position and rotation) how do I change the orientation of either the panner or listener (as the case may be) via JS.
An example would greatly help. Thanks
Any reason not to use THREE's PositionalAudio object? https://threejs.org/docs/index.html#api/audio/PositionalAudio. That lets you add a sound to mesh object, and THREE will take care of moving it. If you want to source a different sound than an AudioBuffer, just connect the audio source to the .gain of the PositionalAudio object.
I was thinking that you need a deformer to read the clusters etc to be able to get the original (usually T pose) position of the skeleton.
Also FBX supports poses etc but never had a file that implemented it.
But my surprise was that importing an fbx file into 3dsmax without any mesh inside if I uncheck "animation" I get the T pose.
Any idea about it?
Thank you in adavnce
FbxCluster has GetTransformMatrix and GetTransformLinkMatrix. The former returns the original transform of the bone (that should be used to initialize the skinning), and the latter the corresponding orientation of the skinned node. Additionally, the skin node can also have "geometric rotation". I don't think there's anything more than that.