11480 sujets

JavaScript, DOM et API Web HTML5

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 :


<!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)