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.
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 have this texture of 20x20pixels and and object from a collada 1.4.1 model.
So I want to give this object this new texture for testing
I do the following
var loader = new THREE.TextureLoader();
loader.load("/assets/images/texture2/TextureResource129.png", texture => {
var material = new THREE.MeshLambertMaterial({
map: texture
});
node.material = material;
material.needsUpdate = true;
});
Now what happens is that the object is in 1 color
How can I change the texture so it is just as the texture?
Instead of creating a new material that behaves differently than the one that comes in your Collada import, just change the texture of the existing material. Do this inside your texture loader callback:
node.material.uniforms.MatDiff2.value = texture;
That way you just change the texture input to the existing material.
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.
Blender Exported UV Map Texture Not Showing In Three JS
Greetings, Nov 13th 2014
Briefly, I am attempting to use the below code to aid three.js in recognizing the material from a blender exported file that has been successfully loaded while the morph influences work great! However, the UV mapped texture from within blender doesn't show up and there are no thrown errors to the console? I can easily use the imageutils to load the texture separately but of course the UV mapping is lost! Oddly when I do load the UV graphic separately I get the odd pattern that symbolizes a UV graphic but the significance defeats me?...I, new to three.js, have tried numerous code combinations as the below last attempt represents. Any ideas how to attempt three.js to recognize the UV material?
Appreciatively,
Ted
mesh = new THREE.Mesh(
geometry,
new THREE.MeshLambertMaterial({
THREE.UVMapping(THREE.ImageUtils.loadTexture("clothtexturegreenuv.jpg"),
morphTargets: true
})
);
mesh.scale.set( 35, 35, 35 );
scene.add( mesh );
Try this:
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture( "clothtexturegreenuv.jpg"),
morphTargets: true
});
mesh.scale.set( 35, 35, 35 );
scene.add( mesh );
It works in the examples with MeshFaceMaterial automatically, no UVMapping or loadTexture calls are needed when the exported json already has the UVs and the texture reference I think. From the example at http://threejs.org/examples/webgl_loader_json_blender.html :
var loader = new THREE.JSONLoader();
loader.load( 'models/animated/monster/monster.js', function ( geometry, materials ) {
var faceMaterial = new THREE.MeshFaceMaterial( materials );
//(...) that example uses morph anims too but I cut the extras (...)
morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
scene.add( morph );
}
We also document use of UVs + different maps in a manual there and it's similar (but only updated last spring for now whereas the threejs.org example is current): https://forge.fi-ware.org/plugins/mediawiki/wiki/fiware/index.php/3D-UI_-WebTundra-_User_and_Programmers_Guide#Exporting_3D_scenes_from_authoring_applications
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