Bonjour à tous !
Alors j'ai un projet où je dois afficher des objets 3D dont les informations sont contenus dans fichiers OBJ. J'ai vu que la solution la plus répandue était d'utiliser Three.js. J'ai donc suivi le tutoriel officiel pas à pas, j'arrive à afficher un cube construit par le fichier javascript mais je n'arrive pas afficher de modèles 3D en utilisant OBJLoader...
Voici mon code :
D'après les messages de ma console, le fichier OBJ est bien chargé mais pourtant mon objet n'est pas du tout affiché...
J'ai beau cherché depuis des heures sur divers forums, je ne trouve pas de solutions à mon problème...
Merci d'avance pour votre aide, à très bientôt !
Modifié par Cherrygoloo (13 Apr 2021 - 18:51)
Alors j'ai un projet où je dois afficher des objets 3D dont les informations sont contenus dans fichiers OBJ. J'ai vu que la solution la plus répandue était d'utiliser Three.js. J'ai donc suivi le tutoriel officiel pas à pas, j'arrive à afficher un cube construit par le fichier javascript mais je n'arrive pas afficher de modèles 3D en utilisant OBJLoader...
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Cube</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="./libs/three.js/build/three.js"></script>
<script src="./libs/three.js/examples/js/loaders/OBJLoader.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
/* const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube ); */
// instantiate a loader
const loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'./objs/cube_simple.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
/*cube.rotation.x += 0.01;
cube.rotation.y += 0.01;*/
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
D'après les messages de ma console, le fichier OBJ est bien chargé mais pourtant mon objet n'est pas du tout affiché...
J'ai beau cherché depuis des heures sur divers forums, je ne trouve pas de solutions à mon problème...
Merci d'avance pour votre aide, à très bientôt !
Modifié par Cherrygoloo (13 Apr 2021 - 18:51)