Étape 5: Three.js : mise en route
C’est juste un gif. Cliquez ici pour le JSFiddle complet !
Three.js peut être difficile à entrer dans pour la première fois. Pour moi, la confusion a été de déterminer tous les morceaux que j’avais besoin d’assembler pour juste le plus élémentaire genre « Hello, World » d’exemple. J’ai pu trouver quelques bons tutoriaux qui pourrait me donner le code pour mettre un cube sur l’écran, rotation, mais je ne pouvais pas comprendre ce que faisaient tous les morceaux. Je voudrais changer quelque chose et briserait le gâchis.
J’espère que le schéma ci-dessus cela résout pour certains de mes lecteurs. Pour débuter avec threejs vous avez besoin chaque morceau dans ce diagramme, et vous devez les assembler comme même pour l’exemple plus minime. Il n’y a aucune telle chose comme un One-Liner « dessiner un cube ». Je vais faire défiler Si vous avez besoin d’aide, je voudrais commencer par le tutorial de Aerotwist, le meilleur de ceux que j’ai trouvé. Aussi très utile, la page « créer une scène » dans la documentation de ThreeJS.
Le tutoriel de ThreeJS mentionné ci-dessus va, pour moi, dans un ordre étrange. Bien que certainement plus faible code à quelqu'un qui comprend déjà, j’ai serait annoter l’exemple « animant le cube » comme ceci (le code est le même que le doc ThreeJS, répétée ici avec une explication différente) :
Créer un cube :
Créer une scène :
Ajouter le Cube à la scène :
Créer un moteur de rendu :
Ajoutez une caméra et restituer :
Pas en arrière pour une seconde. Fait un travail ? OK, maintenant animer.
Ajouter une boucle de rendu, remplacer renderer.render() avec :
... et rentrer à la maison heureux !
requestAnimationFrame(render) est une cale d’épaisseur pour la méthode native (environ) du même nom dont vous pourriez penser comme semblable à setInterval() de JavaScript. Sauf qu’il y a beaucoup d’avantages : requestAnimationFrame ne se déclenche lorsque la page n’est pas visible, par exemple, si vous n’avez pas à utiliser les ressources d’une animation qui n’est pas en cours de visualisation. Arbre dans le genre de forêt de la situation. C’est également une API qui permet au navigateur de redessiner beaucoup de choses en une fois (à partir de JS, CSS, WebGL, etc.), donc il va optimiser votre cycle de rafraîchissement. Lire la suite.
