JavaScript page blanche

Fermé

noshufh Messages postés 8 Date d'inscription vendredi 13 avril 2018 Statut Membre Dernière intervention 9 mars 2019 - Modifié le 8 mars 2019 à 23:02
noshufh Messages postés 8 Date d'inscription vendredi 13 avril 2018 Statut Membre Dernière intervention 9 mars 2019 - 9 mars 2019 à 19:05

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:

JavaScript page blanche
Supprimer page blanche word - Guide
Telecharger javascript - Télécharger - Langages
Traduire une page - Guide
Word numéro de page 1/2 - Guide
Créer une page facebook - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
8 mars 2019 à 22:08

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 Statut Membre Dernière intervention 9 mars 2019
8 mars 2019 à 23:01

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 ?

Utilisateur anonyme
8 mars 2019 à 23:13

Ç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 Statut Membre Dernière intervention 9 mars 2019
9 mars 2019 à 00:53

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 ?

Utilisateur anonyme
9 mars 2019 à 11:23

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 Statut Membre Dernière intervention 9 mars 2019
9 mars 2019 à 19:05

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. ^^

Discussions similaires

Facebook : page blanche

annuaire inverse gratuit

Javascript Arrondi à 2 chiffres après la virgule