I am trying to build a shoe designer with help of three.js. Shoe model is exported from Blender as json and then trying to apply image loaded textures.
newTexture = THREE.ImageUtils.loadTexture( 'textures/'+filename);
newTexture.magFilter = THREE.NearestFilter;
newTexture.minFilter = THREE.LinearMipMapLinearFilter;
newMaterial = new THREE.MeshPhongMaterial({ map: newTexture});
Textures are applied good on small parts of shoe:
But not good on larger parts:
if you try the sample
http://sandbox.justaddwater.in/ShoeDesigner44/ (it may take some time to load), and try changing the textures using the top buttons, you will see the textures are not uniform over the faces and appear with lines.
I have also tried the repeat function as per responses of other questions here, but it doesn't helped and even textures details get lost while using repeat.
newTexture.wrapS = newTexture.wrapT = THREE.RepeatWrapping;
newTexture.repeat.set(2,2);
Your shoe model is not UV-unwrapped properly.
Open you model in blender and unwrap it there, then export the model once again.
There are many tutorials on YouTube that teach how to unwrap meshes properly in Blender.
Related
I am attempting to modify the ThreeJS materials example seen here, and have been fairly successful so far in reverse engineering it in to my own minimalist demo.
The problem comes when I attempt to modify the materials.
I have changed mlib["Orange metal"] to the following:
"Orange metal": new THREE.MeshLambertMaterial( {
map: carTexture,
envMap: skyBox,
combine: THREE.MultiplyOperation
} )
carTexture is a reference to the following:
var carTexture = THREE.ImageUtils.loadTexture('texture/blue.jpg');
carTexture.wrapS = carTexture.wrapT = THREE.RepeatWrapping;
carTexture.repeat.set(3,3 );
carTexture.wrapS = THREE.RepeatWrapping;
carTexture.wrapT = THREE.RepeatWrapping;
And while this has changed my final output, the detail in the texture is missing.
For reference: here is the texture file:
Which clearly has a metalic flake texture.
Meanwhile my final product looks like this:
Completely smooth.
Yet, if I add a taurus with the exact same texture, I can see the details quite clearly:
I have played around with the dimensions of the texture file (up to several thousand percent), and the reflectivity of the MeshLambertMaterial, but not been able to see any change at all.
Your model needs UV coordinates.
On a model like this, it will need to be done in 3d software such as 3ds Max, Maya etc.
If you could get your hands on a version of the model which already has the correct UV coordinates set it would save you all the hassle.
Setting up UV coordinates is not so easy on a model like this if you have never done it before.
An alternative may be generate your paint flake in your shader (without using UV) rather than in a texture (I willl soon be attempting this myself for a personal project).
HERE are some youtube videos on UV unwrapping in 3ds Max
I have made a small scene in blender (6 objects, each using 1 to 4 materials).
When exporting this (using the materials, and the scene option) with the dev exporter and loading it via:
var loader = new THREE.ObjectLoader();
loader.load( 'assets/scene.json', function ( scene ) { ...
And then checking the scene, I can see it has 6 children (good) and that each of the five children only has one MeshLambertMaterial (instead of the material mix from blender) bad.
Any hints on what I am doing wrong?
Those are btw basic materials (just a color basically) no textures or anything.
The scene renders correctly (minus the material mix).
Here is a link to the 113kb scene file (zipped): http://jppresents.net/static/blender/exportBug/scene.zip
Looking at the file I think all materials are there - so the problem must be the way I load it?
Not a solution, but a work around:
Since the only difference between all my materials was just the color, I have now applied exactly one material with a multi colored texture per object.
Then I uv-mapped the faces of the object to the colors corresponding to the previously set material color.
This was easy using the hotkey "shift + G" which lets you select all faces with the same material. (Then just assign them to the texture material, move/scale those in the uv-view to the part of the texture that matches the old color.)
I have a scene which I am exporting from Blender using the Three.js exporter. After a bit of trial and error I got it to export fine. When I tried to import it into Three, I got a few WebGL errors like glDrawElements: range out of bounds for buffer, which seemed to be related to the size or positioning of the imported object. I mucked around with some stuff related to size and eventually got it to load fine. However, none of my materials with textures are loading, EXCEPT one, which was an object with a single material applied to it.
Here's my pipeline
Create base for the level in my three js editor tool
Export this and import it into Blender for texturing/uv mapping (works fine)
Objects can have a number of materials, one for each face really, each material can have a different texture mapped to it (all good, objects are uv unwrapped etc..,)
Join all objects together (except one object which is a tree with a single material/texture applied to it)
Export the Blender file as a JSON file via the Three.js exporter
Load the file into Three using the SceneImporter
When it comes into Three, there are two objects, one is the tree which has a single texture mapped to its material. The other is a large geometry with 20 materials and textures mapped. This geometry does not have any textures displaying and just shows as a MeshLambertMaterial.
Has anyone else experienced any issues like this? Any solutions?
Seems like the SceneImporter doesn't know what to do with these materials, but all the data is there, so you'll need to give it a little help.
Like so;
loader.load('sceneWithObjectOfManyFaceMaterials.json' , function(loaded)
{
for(var key in loaded.objects)
{
var mesh = loaded.objects[key];
if(mesh.material.materials)
{
mesh.material.materials.forEach(function(m , i)
{
m.map = loaded.materials[m.name].map;
});
}
scene.add(mesh);
}
render();
});
I am experimenting with exporting objects from blender and displaying them using three.js and all is going ok so far. I have learnt enough about Blender to get me by as the objects I am using have just been downloaded from online.
What I am now trying to do is wrap an image around my object either within Blender or in three.js
Can anyone point me in the right direction for some reading on the preferred method to do this?
To wrap an image around your model you will need to map it to your model in Blender. The file you then export from Blender will have both the geometry and material information you need for displaying it in three.js.
So, I used these two tutorials to learn how to UV map in Blender:
https://www.youtube.com/watch?v=obB9T3jXlak (older but simpler)
https://www.youtube.com/watch?v=f2-FfB9kRmE (newer but more thorough)
Then use some coding like this: (taken from Jos Dirksen's Learning Three.js book)
var loader = new THREE.JSONLoader();
loader.load('../assets/models/misc_chair01.js', function (geometry, mat) {
mesh = new THREE.Mesh(geometry, mat[0]);
mesh.scale.x = 15;
mesh.scale.y = 15;
mesh.scale.z = 15;
scene.add(mesh);
}, '../assets/models');
Make sure you have a copy of your jpeg image file in the same folder as your model.js file.
I'm creating a disc golf game for the browser. A friend of mine is assisting me by creating objects in Trimble Sketchup, so that I can import them into the game. He has exported a .dae file and the textures, and I have imported them using the ColladaLoader.js. The textures and object load, and the object is rendered, but the object is black, and, sometimes, the javascript console says some textures cannot be rendered.
Here is some code :
var loader = new THREE.ColladaLoader();
var dae;
loader.options.convertUpAxis = true;
loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 2.0;
dae.position.set( 5, 5, 5 );
scene.add( dae );
} );
What else do I need to do? I will be happy to provide more information.
Without more information it's quite a quesswork, but I'd check three things first:
Make sure the texture path is correct (check Firebug Net panel or such for which path it's trying to load the textures). You might need to search & replace the texture path in the DAE, if I remember correctly SU can sometimes put absolute paths there.
Do you have lights in the scene? If I remember correctly, ColladaLoader converts the SU DAE materials to MeshPhongMaterial, which does need some lights to show up unlike MeshBasicMaterial.
Do you have an animation loop, so that the thing is constantly rendered? If not so, make sure that you re-render the scene not only after the model is loaded, but after the textures are loaded too (they are lazy loaded after the model).
Make sure to resize the texture files to power-of-two dimensions (256x512, 256x256,1024x1024 and so on). WebGL does not like arbitrarily sized textures.