Je présente mon projet brièvement : je cherche à afficher un modèle 3D au format GLTF représentant un bout de territoire (il s'agit de présenter des maquettes 3D de villes lors de réunion publique ou autre) grâce à la librairie three.js. J'arrive à afficher correctement des objets simples mais impossible d'afficher mon modèle 3D (qui s'ouvre correctement sous Blender), l'écran reste noir. Je suppose qu'il s'agit d'un problème de centrage ou de lumière mais impossible de trouver la solution ! Voici le code que j'ai utilisé :
<!DOCTYPE html>
<html>
<head>
<meta chartset=UTF-8/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<script src="three/build/three.js"></script>
<script src="three/build/three.min.js"></script>
<script src="three/build/three.module.js"></script>
<script src="three/examples/js/loaders/GLTFLoader.js"></script>
<script src="three/examples/js/controls/DirectionalLight.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(360, window.innerWidth/window.innerHeight, 0.1, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let geometry = new THREE.BoxGeometry(2000, 2000, 2000);
let material = new THREE.MeshBasicMaterial( {color:0x00ff00});
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
camera.position.z = 20000;
let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.campingFactor = 0.25;
controls.enableZoom = true;
let keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-1000, 0, 1000);
let fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(1000, 0, 1000);
let backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(1000, 0, -1000);
scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);
let objLoader = new THREE.GLTFLoader();
objLoader.load('Clermont_MNT.gltf', function(gltf) {
scene.add(gltf);
});
let animate = function() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
Pour précision j'ai téléchargé la librairie sur mon ordinateur.
Je suis preneur de tous les conseils.
Merci d'avance !
Modele 3D GLTF avec THREE.JS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
