I've tried to assign a mtl to my obj model and it doesn't work.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load("img/website.mtl", function(materials){
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("img/website.obj", function(mesh){
mesh.scale.set(0.6,0.6,0.6);
mesh.rotation.y = 4;
scene.add(mesh);
});
});
I exported the obj and the mtl files from Cinema 4D. Why doesn't it work?
Related
I'm trying to attach a custom image to an object (.obj)
What I want is
But the result is
I want the image to be located in the center of the object for only one time. But the image is repeated to fill the entire material.
I googled a lot and read some articles about uv mapping but I could not figure out how to apply to a custom object.
Following is my code. Thanks in advance.
var mtlLoader = new MTLLoader();
mtlLoader.load("~~~.mtl", function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load(
"~~.obj",
function (geometry) {
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load("~~.jpg");
var material = new THREE.MeshLambertMaterial({
transparent: true,
map: texture, // <- ??
});
texture.minFilter = THREE.LinearFilter;
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
geometry.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
scene.add(geometry);
}
I have to make rotation for my Mesh in render. For this I have to see my mesh globally. I create Mesh form object loader (json). So, I it just inside call back function. And when I try to create var with object before the function and then to give value of function it doesn't work.
How I can make my Mesh globally?
var material = new THREE.MeshBasicMaterial({ map: earthTexture });
let objectLoader = new THREE.BufferGeometryLoader();
objectLoader.load('geometry.json',
function (geometry) {
var object = new THREE.Mesh(geometry, material);
scene.add(object);
});
I served it , I created var objectWrapper = new THREE.Object3D(); in which i put my Object
Use a global variable and assign its value in the callback function, then just check if the variable is not undefined:
var obj; // define this variable in the section - let camera, scene, renderer;
. . .
var material = new THREE.MeshBasicMaterial({ map: earthTexture });
let objectLoader = new THREE.BufferGeometryLoader();
objectLoader.load('geometry.json',
function (geometry) {
var obj = new THREE.Mesh(geometry, material);
scene.add(obj);
});
...
// somewhere in your animation loop
if (obj) obj.rotation.y += 0.1;
I want to load a 3D model and create the wireframe in threejs. How may I achieve this effect? Thank you very much.
This is the code I have for now, but it doesn't work.
var loader = new THREE.GLTFLoader();
loader.load('name.gltf', function(geometry, materials) {
var material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh(geometry, material);
group = new THREE.Object3D();
group.add(mesh);
scene.add(group);
});
According to the GLTFLoader docs, the callback's argument is an object with a .scene property containing your model. Like any nested three.js object, you can modify materials using .traverse().
var loader = new THREE.GLTFLoader();
loader.load('name.gltf', function(gltf) {
var object = gltf.scene;
object.traverse((node) => {
if (!node.isMesh) return;
node.material.wireframe = true;
});
scene.add(object);
});
var material = new THREE.MeshLambertMaterial({wireframe:true});
I have problem with three.js obj + mtl loader. obj still is without texture. any help? :(
var loader1 = new THREE.OBJLoader();
var loader2 = new THREE.MTLLoader();
loader2,load("models/house1.mtl"), function (materials){
loader1.load("models/house1.obj ", function(obj) {
object=obj;
object.materials.set( materials );
object.scale.set(4,4,4);
object.position.set(-60,0,30);
object.rotation.set(0,0,0);
scene.add(object);
})
}
I think you missed to preload the material resources. The MTLLoader will return an instance of "MaterialCreator" after parsing the mtl file. You can use this object to preload and prepare the resources required to create the materials. For more details, refer the code :
Also as #paulsm4 suggested, you are not using the proper syntax for loading an OBJ + MTL model.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( "models/" ); //Give the path upto the mtl file
mtlLoader.load( "house1.mtl", function( materials ){
materials.preload();//We can preload the material resources like this.
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );//Set the materials for the objects using OBJLoader's setMaterials method
objLoader.setPath( "models/" ); //Give the path upto the obj file
objLoader.load( "house1.obj", function( object ){
object.scale.set( 4, 4, 4 );
object.position.set( -60, 0, 30 );
object.rotation.set( 0, 0, 0 );
scene.add( object );
}, onProgress, onError );
} );
You can also refer this answer
I am new to three.js and what I done so far is: model a geometry in Blender, export it to JSON, and put it into my three.js scene.
It works fine with the basic three.js materials. Now I want to load a color, specular and normal map to my geometry. But everytime I try to add just a single texture, the geometry disappears in the browser.
Here is my code:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/schuh.js", addModelToScene );
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial(map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}
what did I do wrong?
It looks like you are loading the texture after calling the addModelToScene function.
Try to change your code like this:
function someFunction() {
var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/schuh.js', addModelToScene);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshBasicMaterial({map:texture});
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50,50,50);
scene.add( mesh );
}