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.
Related
I saw some discussions saying gltf does not export bumpmap but if I look into my exported gltf file (separate files mode) there is a bumpmap file with a bumpscale (and also normal map). After loading into three.js I get a meshstandard material with bumpmap object and scale value and also normalmap object. But they seem to have no effect on the rendered object. What is exactly allowed to do to export relief effect from Blender to Three.js with gltf ?
The only relief effect available in glTF is a tangent-space normal map, as shown here:
Blender does have the ability to convert height maps and other kinds of bump maps to tangent-space normal maps, by way of the "Bake" function in Cycles. There are also online utilities that can do this as well.
So, as a starter on Blender, I've downloaded a 3d file from the internet. I've been able to import the object (.obj file) to the scene, but noticed one thing: There are 12 pictures in a folder called "Textures" that come with the downloaded object. How do I import these textures to the scene and apply them to the object? It is a good note that the object itself is not a whole, it is a combination of other objects.
Blender objects use materials to add color and shading to each mesh face. We assign textures to each material. The UV map image textures are assigned to a material in a process called skinning. You might just need to select the object and then look in the Material and Texture properties. Each Texture will have a folder icon to set the location of the texture image file.
YouTube offers many how-to videos about how to UV wrap an object. Just don't make your task too difficult. You probably only need to set the correct image texture png for each UV texture.
Hang in there and good luck.
So my question is, when creating textures inside blender how can i configure those textures so that when I export mesh with Three.js exporter they get assigned as specific textures (map, aoMap).
So far I have one mesh with two textures and one textures is map(diffuse) and other texture is lightMap. ( That's what I figured out from generated .json file)
I want to set one texture to remain to be map, and another one to be aoMap insted of lightMap.
So I figured it out by looking at python scripts for Three.js exporter.
If you want texture to be map (diffuse) you need to set "Blend" property on texture inside Blender to be "Color". If you want texture to be map (light) you need to set texture "Blend" property inside blender to "Multiply".
It appears that exporter does not support map (ambient occlusion). I guess I will have to hack it up so it does.
I want to generate the top and perspective view of an object.
Input: A 3d object, maybe .obj or .dae file.
Output: the image files presenting the top and front view of the loaded object.
Here is some expected output:
The perspective view of a chair
The top view of a chair:
Can anyone give me some suggestions to solve this problem? Demo may be preferred
You could create a small three.js scene with your obj or collada-file loaded using the appropriate loaders. (see examples of the specific loaders). Then create the necessary cameras you want to have in the scene. See examples for orthographic and perspective cameras that come with three.js, too.
To produce the images you want, you could use the toDataURL function, see this thread here and use google
Three.js and HTML5 Canvas toDataURL
in essence, after the objects are loaded, you could do something like:
renderer.render(scene, topViewCamera);
dataurl = canvas.toDataURL();
renderer.render(scene, perspectiveCamera);
dataurl2 = canvas.toDataURL();
I think you could also use 2 renderTargets and then use those for output, too, but maybe if you are new to three.js, start with the toDataURL() method from HTML5.
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.