Explication détaillée de l'utilisation de Three.js-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de Three.js. Quelles sont les précautions lors de l'utilisation de Three.js. Voici des cas pratiques, jetons un coup d'oeil.

Remarques d'ouverture

webGL nous permet d'obtenir des effets 3D sur le canevas. Three.js est un framework webGL largement utilisé en raison de sa facilité d'utilisation. Si vous souhaitez apprendre le webGL, c'est un bon choix d'abandonner ces interfaces natives compliquées et de commencer avec ce framework.

Le blogueur apprend également actuellement three.js et a constaté que les informations pertinentes sont très rares et que même la documentation officielle de l'API est très approximative. De nombreux effets nécessitent que vous codiez et exploriez lentement par vous-même. Le but de la rédaction de ce tutoriel est donc de le résumer moi-même, et de le partager avec tout le monde.

Cet article est le premier d'une série de didacticiels : Mise en route. Dans cet article, je prendrai une démo simple comme exemple pour expliquer la méthode de configuration de base de three.js. Après avoir étudié cet article, vous apprendrez à dessiner un graphique en trois dimensions dans le navigateur !

Préparation

Avant d'écrire du code, vous devez d'abord télécharger le dernier package de framework three.js et introduire three.js dans votre page. Bien sûr, le package contient également de nombreuses démos que tout le monde peut apprendre

. Chrome est actuellement le meilleur navigateur prenant en charge webGL, suivi de Firefow Domestic Aoyou et Cheetah qui peuvent également s'exécuter après les tests.

Commencez avec des exemples !

Nous construisons d’abord le HTML, comme suit :

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 p#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <p id="container"></p>
 </body>
</html>

Copier après la connexion

Préparez une zone cohérente avec la taille du cadre du canevas pour le dessin WebGL. Plus précisément :

(1) Ajoutez l'élément p avec l'identifiant "canvas3d" à la balise body.

(2) Le style CSS de "canvas3d" est spécifié dans la balise style.

Il est à noter que nous n'avons pas besoin d'écrire une balise

Ensuite, nous commençons à écrire le script. Nous allons construire un modèle tridimensionnel simple à travers les cinq étapes suivantes, qui sont également les étapes de base de three.js :

1. Configurez le moteur de rendu three.js

Le processus de mappage d'objets dans un espace tridimensionnel sur un plan bidimensionnel est appelé rendu tridimensionnel. De manière générale, nous appelons le logiciel qui effectue les opérations de rendu un moteur de rendu. Plus précisément, le traitement suivant est requis.

(0) Déclarer des variables globales (objets);

(1) Obtenez la hauteur et la largeur de la toile "toile-frame"

; (2) Générer un objet de rendu (attribut : l'effet d'anti-aliasing est valable pour les paramètres

) ; (3) Spécifiez la hauteur et la largeur du rendu (la même taille que le cadre de la toile

) ; (4) Ajoutez l'élément [canvas] à l'élément [canvas3d]

; (5) Définissez la couleur claire (clearColor) du moteur de rendu.

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

Copier après la connexion

2.Réglez la caméra de la caméra

Dans OpenGL (WebGL), il existe deux types de caméras, la projection en perspective et la projection orthographique, dans la manière dont les objets dans un espace tridimensionnel sont projetés dans un espace bidimensionnel. La projection en perspective est une méthode dans laquelle les objets les plus proches du point de vue sont plus grands et les objets plus éloignés sont plus petits. Cela correspond à la façon dont nous voyons les objets dans la vie quotidienne. La projection orthographique consiste à dessiner des objets dans une taille uniforme quelle que soit la distance du point de vue. Dans des domaines tels que l'architecture et le design, les objets doivent être dessinés sous différents angles, ce type de projection est donc largement utilisé. Dans Three.js Il est également possible de spécifier des caméras avec à la fois une projection en perspective et une projection orthographique. Cet article suit les étapes ci-dessous pour configurer la méthode de projection en perspective.

(0) Déclarer des variables globales (objets);

(1) Installer une caméra pour la projection en perspective

(2) Définissez les coordonnées de position de la caméra ;

(3) Réglez le haut de la caméra dans la direction de l'axe "z"

; (4) Définissez les coordonnées centrales du champ de vision.

  //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }

Copier après la connexion

3.Définir la scène

Une scène est un espace tridimensionnel. Utilisez la classe [Scene] pour déclarer un objet appelé [scene].

  //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }

Copier après la connexion

4. Réglez la lumière de la source lumineuse

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。和OpenGL一样、在一个场景中可以设置多个光源。基本上，都是环境光和其他几种光源进行组合。如果不设置环境光，那么光线照射不到的面会变得过于黑暗。本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

(0) 声明全局变量(对象)

(1) 设置平行光源

(2) 设置光源向量

(3) 追加光源到场景

这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源

    //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }

Copier après la connexion

5.设置物体object

这里，我们声明一个球模型

   //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }

Copier après la connexion

最后，我们写一个主函数执行以上五步：

        //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

Copier après la connexion

这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型

总结

以上就是three.js的入门内容，我们核心的五步就是：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~

本例完整代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
 //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 p#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload=&#39;threeStart();&#39;>
 <!--盛放canvas的容器-->
 <p id="canvas3d"></p>
 </body>
</html>

Copier après la connexion

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！