I have been using the usual THREE.MeshPhysicalMaterial for years now but due to limitations, I am trying to move towards the node system which I guess will be the future.
Documentation about nodes is currently very limited and my only sources were the example on the threejs website and the node code in the Github repository.
Is it currently possible to use a HDR equirectangular environment map with Node.StandardNodeMaterial?
With the THREE.MeshPhysicalMaterial workflow, I normally do the following -
Load the equirectangular HDR texture using EquirectangularToCubeGenerator, PMREMGenerator and PMREMCubeUVPacker
Assign the generated texture to the envMap input of THREE.MeshPhysicalMaterial
For Node.StandardNodeMaterial, I only found the examples with the spherical environment map and the cube map:
mtl.environment = new Nodes.TextureNode( getTexture( "spherical" ), new Nodes.ReflectNode( Nodes.ReflectNode.SPHERE ) );
mtl.environment = new Nodes.CubeTextureNode( cubemap );
But I could not make that work with my HDR equirectangular texture processed by the PMREM generator.
Related
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
So I have two issues right now.
it seems objectloader never load the texture of 3d model from json files.
I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.
Here is what it should look like
Here is what it looks like on my browser
Here is THREE.JS code:
var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
var mesh = new THREE.Mesh( geometry);
$scene.add( mesh );
});
Export setting:
And here is how the json file looks like:
Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.
I suggest using a different format than THREE.js internal format.
It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.
I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.
https://gltf-viewer.donmccurdy.com/
There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:
https://threejs.org/editor/
I'm trying to implement normal maps in a ThreeJS fragment shader, but it seems as though a key feature, computeTangents, has been lost in recent versions.
Here is a working demo using an older version of Three:
http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/
ThreeJS is using computeTangents() to add an attribute called "tangents" to the vertex which is sent to the shader.
So I researched as much as I could and tried using a shader only method of computing the tangent, but this requires dFdx which causes an error about GL_OES_standard_derivatives in the shader on my Macbook Pro.
Then I tried converting the geometry from a simple cube to buffer geometry for use in the BufferGeometryUtils.computeTangent() function, in order to generate the tangents there, but that requires "indexed geometry", which isn't present in basic geo created by ThreeJS.
From the original demo, this is the line I need to recreate using the latest ThreeJS:
var mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
Repo here:
https://github.com/CoryG89/MoonDemo
Is it possible to get this demo working using the new version of Three?
I found the answer to this. For the demo above, it required changing the THREE.SphereGeometry to THREE.SphereBufferGeometry.
var geo = new THREE.SphereBufferGeometry(radius, xSegments, ySegments);
Then I had to add the BufferGeometryUtils.js file and use the following code:
THREE.BufferGeometryUtils.computeTangents( geo );
This got the demo working again.
I created a model of a bottle in 3ds max, and used a raytrace material (in Materials -> Standard -> Raytrace, not the raytrace map). Everything looks great in the 3ds max render, but when exported to vrml, all that shows up is the default blue colour as if it had no material assigned to it!
I have exported to vrml using "standard" materials with no problems, so is this material type unsupported in vrml or is there actually a way to get it to show up?
Thanks
edit: I'm in 3ds max 2013, in case that's relevant at all
It is unsupported. Usually exporters only handles certain materials during export (typically "standard" materials with bitmap textures).
Also raytrace material is not a material usually used in realtime applications, so there is no reason for them to support it.
Also rendering output and export output is two totally different things, so you cannot compare them, since the render output is made by the render engine you use, and the export output is dependent on both the format and the software used to display the output geometry.
I have seen the new MeshPhongMaterial Bump and Specular highlights, and can't wait to get them into my game engine.
Currently i am using the python converter to convert an OBJ file into a .js file. However release 51 exporter doesn't seem to handle these materials.
I am also concerned that most of my meshes have 2 or more materials, and are using MeshFaceMaterial.
Will changing to MeshPhongMaterial break the multiple textures?
Should i use a different exporter to achieve this?
What is the best workflow to convert from .3ds files with Bump and Specular maps?
Should i wait a while for this topic to settle down?
I'm assuming you already use a diffuse texture (Lambert material perhaps?) and as such have also exported texture coordinates.
You can add mapBump and mapSpecular properties manually to the materials in question in the .js model file. They are strings pointing to the textures just like mapDiffuse. Also change the shading property to "Phong", and you should be good to go, though you might also want to tweak specularCoef and colorSpecular material properties.
Simply switching material type won't break the face materials.