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);
}
Related
I'm trying to map an Image onto my GLB import, however the GLB is just showing up as black. Not really sure where I'm going wrong here.
let textureLoader= new THREE.TextureLoader();
let texture = textureLoader.load("images/pexels-luis-quintero-2471234.jpeg");
texture.flipY = true;
gltfLoader.load( file.path, (gltf) => {
gltf.scene.traverse( (child, key) => {
if(child.isMesh){
child.material = new THREE.MeshBasicMaterial();
let material = new THREE.SpriteMaterial( { map: texture } );
let sprite = new THREE.Sprite( material );
child.material.map = sprite;
}
});
** Added the texture to :-
child.material.map = texture
However the image does not fit to the dimensions of the GLB
An instance of THREE.Sprite is a 3D object similar to THREE.Mesh. You can't assign a sprite to the map property of a material. Do this:
child.material = new THREE.MeshBasicMaterial();
child.material.map = texture;
Besides, if you add a manually loaded color texture to a glTF asset, make sure to add:
texture.encoding = THREE.sRGBEncoding;
I am trying to apply a texture to my 3D model with Three JS.
I tried a lot of ways from the Three JS Examples but for any reasons nothing is working.
Here is how I apply the texture to my model:
//LOADING TEXTURE
var textureLoader = new THREE.TextureLoader();
var diffuse = textureLoader.load( "models/Carbon.png" );
diffuse.encoding = THREE.sRGBEncoding;
diffuse.wrapS = THREE.RepeatWrapping;
diffuse.wrapT = THREE.RepeatWrapping;
diffuse.repeat.x = 1;
diffuse.repeat.y = 1;
var normalMap = textureLoader.load( "models/Carbon_Normal.png" );
normalMap.wrapS = THREE.RepeatWrapping;
normalMap.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshPhysicalMaterial({
roughness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
map: diffuse,
normalMap: normalMap
});
// LOADING MODEL
var loader = new THREE.GLTFLoader();
loader.load("models/stairs.gltf", function(gltf){
model = gltf.scene
model.traverse((newModel) => {
if (newModel.isMesh){
newModel.material = material;
newModel.castShadow = true;
newModel.receiveShadow = true;
}
});
scene.add(model);
});
I appreciate any help!
When loading a texture for a glTF model, you have to set Texture.flipY to false to satisfy the uv convention of glTF.
diffuse.flipY = false;
normalMap.flipY = false;
Besides, you always have to ensure that your model has texture coordinates. You can do this by checking if the geometries of your meshes have an uv attribute. If this attribute is missing, I suggest you generate texture coordinates in a DCC tool like Blender.
three.js R112
I am trying to recreate Sketchfab's "ambient environment" feature in threejs.
see sketchfab background settings
I want my model in threejs to show a traditional environment map (360 picture of a location), but I want the scene to show a blurred, ambient image as the environement.
I tried loading two cubetextures and applying one to the envMap of the model, and the other to the scene.background:
var loader = new THREE.TextureLoader();
loader.load( "../../image/download/img1.jpg", function ( texture ) {
texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = maxAnisotropy;
var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
var cubeMapTexture = cubemapGenerator.update( renderer );
var pmremGenerator = new THREE.PMREMGenerator( cubeMapTexture );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
envMapCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
var envMap = envMapCubeRenderTarget ? envMapCubeRenderTarget.texture : null;
texture.dispose();
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
object.material.envMap = envMap
var loader2 = new THREE.TextureLoader();
loader2.load( "../../image/download/img2.jpg", function ( texture ) {
texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = maxAnisotropy;
var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 512 } );
envMapBackground = cubemapGenerator.renderTarget;
scene.background = envMapBackground; //old = texture
scene.background.anisotropy = maxAnisotropy;
});
});
When I try to use two cubemaps, my scene just renders a blank background...
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});
Is there any way to smooth an .OBJ in three.js ? I already load the model but it looks faceted
I already use the shading: THREE.SmoothShading, in the material but doesn't affect it
var Loader = new THREE.OBJLoader();
Loader.load('models/stockcarchasisc.obj', function(carGeo, materials) {
// var material = new THREE.MeshFaceMaterial(materials);
var map = new THREE.TextureLoader().load( "models/st_tex.jpg" );
map.wrapS = map.wrapT = THREE.RepeatWrapping; // This set/place UV coordinates at 0 !
var material2 = new THREE.MeshStandardMaterial({
color: 0xa65e00,
side: THREE.DoubleSide,
map: map,
});
carGeo.traverse( function(child) {
if (child instanceof THREE.Mesh) {
// apply custom material
child.material = material2;
// enable casting shadows
child.castShadow = true;
child.receiveShadow = true;
}
});
carGeo.position.y = 25;
carGeo.scale.set(25, 25, 25);
var helper = new THREE.VertexNormalsHelper( carGeo, 5, 0x00ff00, 5 );
scene.add(carGeo);
scene.add(helper);
});