Menu

JavaScript page blanche

Messages postés
8
Date d'inscription
vendredi 13 avril 2018
Dernière intervention
9 mars 2019
-
Bonjour,
Voilà je suis nouvelle en programmation javascript et je rencontre quelque soucis
j'essaye de créer une scène 3D et j'y ajoute un cube et pour la caméra, j'ai utilisé controls Trackball
Le résultat est une page blanche sur firefox et sur chrome j'ai télécharger Visual Studio Code mais rien n'y fait j'ai corrigé l'erreur que ça m'a donné mais c'est toujours la même chose.
Merci pour votre aide
ci-joint mon code :
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <title>7.Create Camera Control | Three Js Tutorial</title>
</head>
<body>
 <script src="js/three.js"></script>
 <script src="js/TrackballControls.js"></script>
 <script>
  var control,camera,scene,renderer,width,height;
  width = window.innerWidth;
  height = window.innerHeight;
  start(); 
  animate();
  function start(){
   camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
   camera.position.set(0,0,800);
   control = new THREE.TrackballControls(camera,renderer,domElement);
   control.addEventListener("change",render);
   scene = new THREE.scene();
   var box = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), new THREE.MeshNormalMaterial());
   scene.add(box);
   renderer = new THREE.WebGLRenderer();
   renderer.setSize(width,height);
   document.body.appendChild(renderer.domElement);
   renderer.render(scene,camera);
  }
  function animate(){
   requestAnimationFrame(animate);
   control.update();
  }
  function render(){
   renderer.render(scene,camera);
  }
 </script>
</body>
</html>

EDIT : Ajout des balises de code

Configuration: Windows / Firefox 65.0
Afficher la suite 

Votre réponse

1 réponse

Messages postés
6365
Date d'inscription
mardi 15 mai 2012
Dernière intervention
18 mars 2019
976
0
Merci
Bonjour

As-tu regardé les erreurs affichées dans la console de ton navigateur ? J'en ai corrigé 2 et ça affiche un cube :

- c'est
THREE.Scene()
et non pas
THREE.scene()
.
- ta variable domElement désigne le canvas surlequel Three va travailler, mais tu ne l'initialises pas.

Il faut que tu définisses un canvas avec la taille et l'id qui te plaisent dans ton body, et que tu initialises domElement au début de ton script :
domElement = document.getElementById("id de ton canvas");
noshufh
Messages postés
8
Date d'inscription
vendredi 13 avril 2018
Dernière intervention
9 mars 2019
-
Merci infiniment pour votre aide
j'ai corrigé les erreurs que vous avez pointés, mais ça n'affichait toujours rien.
Et j'ai lu que parfois Trackball Controls ne marchait pas, je l'ai enlever et ça m'affiche ce qu'il faut.
Mais j'en ai besoin (j'ai copier/coller le fichier TrackballControls dans le dossier contenant le fichier de mon code donc je ne pense pas que ce soit le problème) vous auriez une idée de ce que je pourrais faire s'il vous plait ?
le père.
Messages postés
6365
Date d'inscription
mardi 15 mai 2012
Dernière intervention
18 mars 2019
976 -
Ça m'épate bien, car moi si j'enlève Trackball Controls, ça ne marche plus.
Mais je ne connais ni three ni TrackballControls, alors je ne vais pas pouvoir te dire grand chose.
Tout de même, quand tu dis que tu as mis TrackballControls dans le dossier contenant ton code, tu parles bien du même dossier que celui qui contient three.js ? Ils ont le même chemin, ils devraient être dans le même dossier.
noshufh
Messages postés
8
Date d'inscription
vendredi 13 avril 2018
Dernière intervention
9 mars 2019
-
Merci pour votre réponse,
Oui je les ai bien mis dans le même dossier
Et les chemins sont identiques.
Je viens de modifier le code, j'ai ajouté quelques détails dont j'ai besoin (un plan et une autre box).
Pour trackball ça ne marche toujours pas.
les jeux de lumières et les ombres ne marchent pas aussi.
Est ce que vous pensez que je devrais télécharger Three.js de nouveau ?

--Lumière--
cas 1 :
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

cas 2:
var light = new THREE.PointLight(0xffffff,2.0, 600);
scene.add(light);

cas 3:
var light = new THREE.DirectionaLight(0xffffff, 2.0, 1000);
light.target = box;
scene.add(light);

cas 4:
var light = new THREE.SpotLight(0xffffff, 2.0, 1000);
light.target = box;
scene.add(light);

--Ombres--
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

var light =new THREE.SpotLight(0xffffff, 4.0, 3000);
light.position.y = 100;
light.target = scene;

light.castShadow = true;
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000));
light.shadow.bias = 0.0001;
light.shadow.mapSize.width = 2048 * 2;
light.shadow.mapSize.height = 2048 * 2;
scene.add(light);

box.castShadow = true;
plane.receiveShadow = true;


Mais ça ne marche pas, aucune ombre et aucun jeu de lumière pour chacun des cas.
Vous auriez, s'il vous plait, une idée de ce que je pourrais faire ?
le père.
Messages postés
6365
Date d'inscription
mardi 15 mai 2012
Dernière intervention
18 mars 2019
976 -
Je te l'ai dit : je ne connais pas three ni TrackballControls. Et je n'ai pas l'intention d'apprendre.
Y a-t-il des messages dans la console de ton navigateur ? C'est comme ça que j'avais vu tes premières erreurs.
Quant à recharger Three.js, ça m'étonnerait que ça y change grand-chose.
noshufh
Messages postés
8
Date d'inscription
vendredi 13 avril 2018
Dernière intervention
9 mars 2019
-
Il n'y a aucun message d'erreur sur la console de mon navigateur.
Je vais essayer de chercher de nouveau un quelconque détail qui m'aurait échapper.
Je vous remercie pour votre aide. ^^
Commenter la réponse de le père.