Maison > Article > interface Web > Tutoriel Three.js pour dessiner un cube 3D
Tutoriel Three.js pour dessiner un cube 3D
- 小云云original
- 2018-01-18 10:22:274726parcourir
Three.js est une bibliothèque JavaScript 3D basée sur le système de coordonnées de droite. Elle peut créer des graphiques tridimensionnels simples ou plus complexes et appliquer des textures et des matériaux colorés. Elle peut ajouter des sources de lumière colorées, déplacer des objets en 3D. scène ou ajoutez des animations scriptées et plus encore. Cet article explique comment dessiner un cube 3D à l'aide de three.js. Vous pouvez vous y référer si vous en avez besoin.
Introduction
three.js est un framework WebGL WebGL nous permet de réaliser des effets 3D sur canevas. La réalisation d’effets 3D est encore une chose relativement nouvelle en Chine et il n’existe pas beaucoup d’informations disponibles pour référence. Cet article n'est qu'un article d'introduction qui explique comment dessiner un cube 3D.
Concepts de base dans Three.js
Three.js contient 3 concepts de base : Scène, Caméra et Rendu.
La scène est l'objet qui doit être dessiné, la caméra représente l'angle de vue et le moteur de rendu est le support du dessin (peut être attaché à l'élément DOM du navigateur),
Autrement dit, nous capturons la scène à travers la caméra, puis la dessinons dans le support cible.
Créer une scène, une caméra et un 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 );
Le code ci-dessus crée d'abord une scène, puis crée une PerspectiveCamera (caméra stéréoscopique), puis crée un moteur de rendu WebGL (notez également Three.js prend en charge le moteur de rendu 2D non 3D Canvas), puis l'attache au sous-élément DOM du corps du document HTML.
Maintenant que l'introduction est terminée, permettez-moi d'abord de vous présenter les rendus :
C'est le rendu, il est assez tridimensionnel, non ?
Préparation avant de dessiner
Avant d'écrire du code, vous devez d'abord télécharger le dernier package de framework three.js et présenter votre propre page.
Processus de mise en œuvre spécifique
Préparer un canevas
Ce canevas est le canevas que nous utilisons pour afficher l'intégralité du carré 3D, qui est le carré noir dans l'image ci-dessus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
</body>
</html>
Effacer l'idée du dessin
Le prochain processus de dessin impliquera plusieurs concepts : toile, scène, caméra, moteur de rendu.
Afin de mieux comprendre le code du processus de dessin et d'aider la mémoire, nous comprenons d'abord ces concepts :
Supposons que nous voyageons et que nous voyons une très belle scène. voulons enregistrer ce monde en 3D
Cette belle scène est la scène Nous utilisons l'appareil photo pour la capturer et former une photo
Dans l'ordre. pour voir clairement cette photo, nous plaçons cette photo sur une toile
Enfin, nous utilisons le moteur de rendu pour la modifier et la restituer
De cette façon , nous pouvons afficher avec succès le monde 3D.
【Le programme est toujours très proche de la vie.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!