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.
Related
I'm using a free 3d model from turbosquid. This model is using a texture that looks like this:
It does look good in Blender:
But once exported to three.js, it seems that the texture does not follow the uv map:
Here is the code i'm using:
var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
ship = new THREE.Mesh(geometry, materials[0]);
scene.add(ship);
}
);
And here is the json I get once exported from Blender:
What am I missing?
Thanks a lot for your help!
There are some minor complexities in this model, which I think are causing issues for Blender exporters. They're not "wrong", but they're hard for exporters to handle without cleanup. You can fix those manually (open the .blend file in Blender, apply modifiers, remove all textures except the diffuse) but the easiest path is probably converting the OBJ version provided by Turbosquid to glTF. Going to the Cesium OBJ->glTF converter (or OBJ2GLTF if you need something programmatic) and dragging in the OBJ/MTL/texture will give the right result. NOTE: you'll need to move the sh3.jpg file into the same directory as the MTL file; it shouldn't be in the Textures/ folder.
Result on https://gltf-viewer.donmccurdy.com/ — using three.js r92 and THREE.GLTFLoader.
I exported some meshes from Blender with the JSON plugin exporter. I exported all of the scene, so I have to use ObjectLoader in three.js to load it.
If I look into the .json file, the materials seems to be there.
I'm loading it like this :
var loader = new THREE.ObjectLoader();
loadMesh();
loader.load("path_to.json", addModelToScene);
function addModelToScene(model) {
obj = scene.add(model);
}
Only the color is applied to each mesh. Is there a way to export material to three.js defined in the cycle render mode?
Cycles materials use a node based system which uses code within blender to generate the material for the object and it doesn't export to other applications.
What you need to do is convert the material to one that is compatible with other applications. For simple materials, it can be easier to create a new Blender Render material that will export to most other applications. For more complex materials, you can often bake the cycles material to an image, which can then be used in other applications.
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.
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.
We have a model created in Blender by subtracting an extruded SVG from a “flat” base using a boolean difference operator. Or in other words, we carved a picture into it. The model renders just fine in Blender, but loading it into our simple, three.js-based web viewer (using the json exporter for Blender), we get some really odd shadows on the surface, and depending on the scale, shiny vertexes.
Here's my light and camera:
camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width() / $('main').height(), 10, 10000);
loader = new THREE.JSONLoader(true);
var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(-30, 30, 100);
light.target.position.set(0, 0, 0);
light.shadowCameraNear = 200;
Can anyone spot whether we did something wrong? And is that a Three-specific issue, or WebGL, or Blender, or our model?
Output (screenshot)
Fiddle
Looking at your fiddle, it seems that your vertexNormals are totally smoothed and thus shading is incorrect.
See here:
https://github.com/mrdoob/three.js/issues/1258
Does this help?
I'm not sure if this technically counts as a solution, but — worked around the problem by dropping the JSON blender export, and using P3D instead to load .stl directly.