Maison >interface Web >js tutoriel >Explication détaillée de la création d'instances de scène avec three.js

Explication détaillée de la création d'instances de scène avec three.js

小云云original: 2018-01-18 09:41:182742parcourir

Cet article vous présente principalement les informations pertinentes sur l'apprentissage et la création de scénarios de documents chinois three.js. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour que tout le monde puisse apprendre ou utiliser three.js. Amis qui en ont besoin Apprenons avec l'éditeur ci-dessous.

Qu'est-ce que Three.js ?

Si vous lisez cet article, vous avez peut-être une certaine compréhension de Three.js, alors présentons brièvement ce qu'est Three.js
Three.js est une bibliothèque qui rend WebGL Les effets 3D sont simples. à appliquer dans le navigateur. Alors qu'un simple cube en WebGL brut se transformerait en centaines de lignes de code Javascript et shader, un Three js pour l'introduction. Nous avons commencé par construire la scène à l'aide de cubes rotatifs. Si vous rencontrez des difficultés et avez besoin d'aide, vous trouverez le code source pour référence en bas de la page.

Au moins trois types de composants nécessaires pour une scène

Caméra/décider de ce qui sera rendu à l'écran

Source de lumière /Ils auront un impact sur la façon dont les matériaux sont affichés et sur la façon dont les matériaux sont utilisés lors de la génération des ombres
Objets/Ce sont les principales formations de rendu dans la perspective de la caméra : boîtes, sphères, etc.
Avant de commencer

Enregistrez le code HTML suivant sur votre ordinateur et incluez three.js dans le répertoire js, puis ouvrez-le dans le navigateur

Le code suivant sera téléchargé à partir de la balise script

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

Créer un exemple de scène

Afin d'utiliser three.js pour l'affichage, nous avons besoin trois éléments : scène, caméra, Renderer pour restituer la scène à partir de la caméra.

Prenons un moment pour expliquer ce qui se passe. Nous avons maintenant créé la scène, la caméra et le moteur de rendu.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Il existe plusieurs types de caméras dans three.js. Nous utilisons temporairement PerspectiveCamera

Son premier attribut est l'angle de vue (FOV), qui est la plage de vue visible, et sa valeur représente la taille de l'angle.

Le deuxième attribut est le rapport hauteur/largeur. La plupart du temps, vous souhaitez utiliser la largeur divisée par la hauteur, sinon vous vous retrouvez avec quelque chose comme de vieux films sur un téléviseur grand écran - l'image semble écrasée.

Les deux derniers attributs sont la surface de vue proche et la surface de vue lointaine. Seule la zone située entre ces deux faces sera rendue. Vous n'avez pas à vous en préoccuper pour l'instant ; l'utilisation de ces paramètres peut améliorer les performances.

Parlons du moteur de rendu. C'est la magie. En plus du WebGLRenderer que nous utilisons ici, three.js fournit également des moteurs de rendu à utiliser sur les anciens navigateurs qui ne prennent pas en charge WebGL.

En plus de créer une instance de rendu, nous devons également définir la taille du rendu de l'application. Il est recommandé d'utiliser une méthode qui remplit toute la largeur et la hauteur de l'application - dans ce cas, la largeur et la hauteur de la fenêtre du navigateur. Pour les applications axées sur les performances, vous pouvez utiliser setSize pour définir des valeurs plus petites, telles que window.innerHeight/2, window.innerWidth/2, qui restitueront la moitié de la taille.

Si vous souhaitez restituer la taille entière en basse résolution, vous pouvez définir le troisième paramètre de setSize — uodateStyle sur false Wide Si la valeur élevée est de 100 %, l'application sera rendue à 1/2 résolution.

Maintenant, nous devons ajouter des éléments rendus au HTML. Le moteur de rendu nous montre la scène à travers le canevas.

"Tout va bien, mais qu'en est-il du cube dont j'ai parlé plus tôt" Ajoutons cela maintenant.

Nous avons besoin de BoxGeometry pour créer le cube. Cet objet contient tous les points (sommets) et remplissages (faces) du cube. Nous en discuterons plus tard.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

En plus de la géométrie, nous avons également besoin de matériaux pour la colorer. three.js fournit du matériel, mais nous utiliserons MeshBasicMaterial pour l'instant. Tous les matériaux acceptent et appliquent un objet contenant toutes les propriétés. Pour des raisons de simplicité, nous ne fournissons qu'un seul attribut de couleur : green - 0x00ff00 Utilise les mêmes couleurs hexadécimales qu'en CSS et PS.

Le troisième élément dont nous avons besoin est le Mesh. Un maillage est un objet qui applique un matériau à la géométrie, que nous pouvons ensuite placer dans la scène et déplacer librement.

Lorsque nous appelons scene.add(), ce que nous ajoutons sera affiché aux coordonnées (0, 0, 0,) par défaut. Cela provoque le chevauchement interne de la caméra et du cube. Pour éviter cela, nous éloignons simplement la caméra un peu plus loin.

Scène de rendu

Si vous copiez le code ci-dessus dans le fichier HTML, rien ne s'affichera à l'écran. Parce que nous n'avons pas encore rendu la scène. Nous devons donc appeler le moteur de rendu ou la boucle d'animation.

Cela crée une boucle dans laquelle le moteur de rendu dessine une image chaque seconde. Si vous ne savez pas grand chose en programmation de jeux Web, vous pourriez dire « Pourquoi ne pas écrire une fonction setInterval ? En fait, nous le pouvons, mais requestAnimationFrame présente plus d'avantages. L'avantage le plus important est que requestAnimationFrame interrompt le rendu lorsque le navigateur passe à un autre onglet, afin que la précieuse puissance de traitement et la durée de vie de la batterie ne soient pas gaspillées.

function animate() {
 requestAnimationFrame( animate );
 renderer.render( scene, camera );
}
animate();

Faites bouger le cube

Si vous insérez le code que nous venons de créer, vous devriez voir un cube vert. Laissez-le tourner pour ne pas devenir ennuyeux.

Ajoutez le code suivant à renderer.render dans la fonction animate :

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。

结果

恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。

完整代码参考如下。琢磨一下并深刻理解其工作机理

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  animate();
 </script>
 </body>
</html>

Articles Liés

Voir plus