JavaScript page blanche

noshufh Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -  
noshufh Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

1 réponse

Réponse 1 / 1
Utilisateur anonyme
 
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");
0
noshufh Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
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 ?
0
Utilisateur anonyme
 
Ç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.
0
noshufh Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
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 ?
0
Utilisateur anonyme
 
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.
0
noshufh Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
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. ^^
0

Discussions similaires

comment avoir une page blanche pour écrire
heudebert 57 -
iglou -

2 réponses
connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses