I'm new at Three Js coding at all
I have some code and I'm trying to apply a texture to an imported obj model with Three js
Here's the code:
<html lang="en">
<head>
<title>three.js webgl - animation - groups</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "./three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set(0,0,122);
scene.background = new THREE.Color(0xffff60);
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.update();
const al = new THREE.AmbientLight(0xffffff, 1);
scene.add( al );
let loader = new THREE.TextureLoader();
let texture = loader.load('./download.jpg');
const material = new THREE.MeshPhongMaterial({
map: texture
});
new OBJLoader().load('./tinker.obj', (model) => {
model.traverse( child => {
if (child.isMesh){
child.material = material;
}
})
scene.add(model);
});
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
All is working quite fine with rendering and mouse interactions, but the texture doesn't show at all.
Any suggestion, please?
Best Regards, Lorenzo
The texture is not rendered on the imported model