Exemple détaillé de three.js dessinant un cube 3D-js tutoriel-php.cn

Exemple détaillé de three.js dessinant un cube 3D

小云云

Libérer： 2017-12-19 16:34:12

original

2897 Les gens l'ont consulté

Cet article expliquera en détail three.js pour dessiner un cube 3D avec un exemple. 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 appliquez des textures et des matériaux colorés. Ajoutez des sources de lumière colorées, déplacez des objets dans la scène 3D ou ajoutez des animations scriptées, etc. 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, expliquant 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 );

Copier après la connexion

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>

Copier après la connexion

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!