I made a simple object with openCad, I include it in my project but doesn’t get the texture (I used the loader_obj example, I just replace the path so in can load my model, it shows it but doesn’t get texture.
Is there a way to do it?
Can you please share the OBJ in this thread? Besides, please show your code that assigns the texture to your loaded mesh.
I suppose the problem is that your OBJ does not contain uv coordinates. These data are necessary for correct texturing.
BTW: STL does not support textures.
casa.obj (111.6 KB)
**It is the loader_obj example…
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
#info a,
.button {
color: #f00;
font-weight: bold;
text-decoration: underline;
cursor: pointer
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader test
</div>
<script src="../build/three.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0,
mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 250;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x000880);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xf0ff0);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {
console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr) {};
var loader = new THREE.ImageLoader(manager);
loader.load( 'textures/UV_Grid_Sm.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
});
// model
var loader = new THREE.OBJLoader(manager);
// loader.load( 'models/obj/male02/male02.obj', function ( object ) {//original line
loader.load('file:///C:/Users/djvdj/Desktop/casa.obj', function(object) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = texture;
}
});
//--------------------------------------------------------------------------------------------------
object.position.y = -95;
scene.add(object);
}, onProgress, onError);
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
controls=new THREE.OrbitControls(camera);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
//
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
// camera.position.x += (mouseX - camera.position.x) * .05;
// camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
…
Okay, your OBJ has uv coordinates but there are multiple materials applied to the mesh. So you have to set the texture in this way:
if (child instanceof THREE.Mesh) {
for ( var i = 0; i < child.material.length; i ++ ) {
child.material[ i ].map = texture;
}
}
Thanks for your help and time, works perfect.
one last question, I generated a simple box with the same editor but didn’t get any material, How could I add manually material?
this is the file txt…
Exported from 3D Builder
o Object.1
v 120.000000 0.000000 5.000000
v 120.000000 120.000000 5.000000
v 120.000000 0.000000 0.000000
v 120.000000 120.000000 0.000000
v 0.000000 120.000000 5.000000
v 0.000000 0.000000 0.000000
v 0.000000 120.000000 0.000000
v 0.000000 0.000000 5.000000
f 5 1 2
f 4 5 2
f 5 4 7
f 6 5 7
f 5 6 8
f 6 1 8
f 1 6 3
f 4 1 3
f 6 4 3
f 4 6 7
f 1 4 2
f 1 5 8
AFAIK, the loader adds a default material that you can overwrite.
Hi,
I’ve tried this code to add texture for a obj file. Texture loads fine with the obj file in this question. But it does not apply for the file attached file with this comment. Could you please tell me why texture doesn’t apply for this obj file?
Thank you
walls.obj (18.4 KB)
Solution Load model and add texture
Solucion a cargar modelo y darle una textura
loader.load( './modelo/arbol.obj', function ( obj ) {
object = obj;
object.scale.multiplyScalar( 0.8 );
object.position.y = 2;
object.traverse( function ( child ) {
if(child.material)
{
child.material = new THREE.MeshBasicMaterial( { color: '#24CD38' } );
}
} );
modelo = object;
scene.add( modelo );
var trac = new THREE.TransformControls(camera, renderer.domElement);//trac.disableAxis('x');
trac.addEventListener( 'dragging-changed', function ( event ) {
controls.enabled = ! event.value;
});
trac.attach(modelo);
trac.showY = false;
scene.add(trac);
} );