I'm new to ThreeJS, still learning. I have like an earth globe 3d object that I load into my scene, and I also have a mtl file which I load according to the documentation, but after I render the scene the globe still looks without texture. I think it only shows the geometry.
Tried loading the globe in Blender and the texture looks good in there, but in browser things aren't the same.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('/models/Glob.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('/models/Glob.obj', function(object){
scene.add(object);
console.log(object);
});
});
I'd like to find a way to show the texture of the globe so I could move on with my project.
Related
I am trying to apply an image dynamically on a gltf loaded mesh.
The code to load the model looks like:
const gltfLoader = new GLTFLoader();
const url = 'resources/models/mesh.gltf';
gltfLoader.load(url, (gltf) => {
const root = gltf.scene;
scene.add(root);
})
When looking from top the element looks like a rounded rect:
When inspecting the imported mesh I can see that the BufferGeometry has a count of 18.000 points:
Everything works fine however if I apply the texture like this:
const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
root.children[0].material = material;
The image is not visible but the mesh is now colored in 1 color.
Is it possible to apply the image just on the top face of the rect?
Hard to tell what the problem is without seeing the resulting image. However, I would just assign a new texture like this: root.children[0].material.map = texture instead of creating a whole new material, since you don't want to lose all the material attributes that came in the GLTF.
Additionally, MeshBasicMaterial always looks flat because it is not affected by lights.
I am trying to apply a texture to a simple 3-d cube model exported from Blender 2.78b (as a matter of fact, the default blender cube). I exported the model in the standard three.js JSON format. I realize that I should be able to apply a texture in Blender on top of the geometry, but I want to "style" the blender model in three.js at runtime. Thus I am only interested in using blender to provide the geometry for my mesh.
I have created a plunker illustrating the situation.
I load in a blender model as blenderGeom, and then apply a MeshBasicMaterial with map set to a brick texture (unfortunately, I have to load the texture as Base64, since plunker doesn't allow you to upload images). I then apply the exact same material/texture to a native three.js BoxGeometry nonBlenderCubeGeom:
function loadModel() {
console.log('now in loadModel');
var promise = new Promise( (resolve, reject) => {
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
'cube.json', (blenderGeom, materials) => {
console.log(`loadModel: now loading cube: geomery=${geometry}`);
let cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff8080,
wireframe: false,
map: brickTexture
})
nonBlenderCubeGeom = new THREE.BoxGeometry(50, 50, 50);
blenderCubeGeom = blenderGeom;
blenderCube = new THREE.Mesh(blenderGeom, cubeMaterial); //no work
blenderCube.position.x = -20;
nonBlenderCube = new THREE.Mesh(nonBlenderCubeGeom, cubeMaterial); //work
nonBlenderCube.position.x = 20;
blenderCube.scale.set(10, 10, 10);
scene.add(blenderCube);
scene.add(nonBlenderCube);
As you can see from running the plunker, only the native three.js object on the right is textured, and the blender model on the left is not:
Am I doing something wrong? Is it simply a restriction that you can only texture a model in Blender?
Three.js r84. Blender 2.78b. I'm assuming this on three.js side, but I'm opening it up to blender as well.
Many Thanks.
I know about texture tiling. However can a lightmap be tiled the same way?
I can't manage to tile a lightmap texture using the following snippet of code. No repeat or offset is taken into account.
var map = THREE.ImageUtils.loadTexture('Map.jpg');
var lightMap = THREE.ImageUtils.loadTexture('Light map.png');
lightMap.wrapS = lightMap.wrapT = THREE.RepeatWrapping;
lightMap.repeat.set(.455078, .455078);
lightMap.offset.set(.472343, .546562);
var material = new THREE.MeshLambertMaterial({map: map, lightMap: lightMap});
jsonLoader.load('Model.json', function (geometry) {
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Thank you for your help.
Lightmaps do not support offset/repeat in three.js, and in fact require a separate set of UVs.
three.js r.69
I have a mesh that I load as a .dae (collada). However, my texture file is separate (as a PNG)
Currently, my loading code is
loader.load("./assets/map_tutorial.dae", function(collada) {
var terrain = collada.scene.children[0];
var texture = new THREE.ImageUtils.loadTexture("./assets/map_tutorial_tex.png");
terrain.rotation.x = Math.PI / 2;
terrain.rotation.y = Math.PI;
scene.add(terrain);
console.log("There are " + collada.scene.children.length + " meshes!");
});
However, I'm uncertain as to how to apply the texture to my mesh (terrain)
Thanks in advance!
You will definitely have to create new material object from your texture. Assuming you want lambert, it would be like this:
var material = new THREE.MeshLambertMaterial( { map:texture } );
I am not familiar with collada loader, but it seems that it already created a mesh for you. In this case I am not sure whether you can change material of this mesh. What should definitely work is to create new mesh from geometry that you loaded from .dae file and material that you created from png image.
var mesh = new THREE.Mesh( terrain.geometry, material );
scene.add( mesh );
I hope this helps, normally I use three.js native JSON model files where this approach is working. Difference is that THREE.JSONLoader gives you two objects for your usage: geometry and materials. Collada loader seems to provide you with already created mesh so try to change it's geometry if possible or "steal" the geometry from this mesh and create a new one like I did in the example.
I have a Maya file exported to OBJ and MTL. I can see the OBJ texture successfully, but how do I actually get the texture in? I looked at the "three.js" format in blender, which appears to be shape only, no texture.
This three.js example appears to load in the obj fine for the shape, but the texture appears to come from a jpg image and not an mtl:
loader.load('textures/ash_uvgrid01.jpg', function(image) {
texture.image = image;
texture.needsUpdate = true;
});
My question is, how do I get this "uvgrid01.jpg" image for my model? Is there some way to convert MTL to this .jpg format for the texture only? Or is there some other way I should be exporting the texture to be able to load it in?
You can use OBJLoader and MTLLoader, as seen in this example (at least three.js r77):
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('obj/male02/');
mtlLoader.load('male02_dds.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('obj/male02/');
objLoader.load('male02.obj', function(object) {
object.position.y = -95;
scene.add(object);
}, onProgress, onError);
});