自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

十分鐘快速實戰(zhàn)Three.JS感受它的無限魅力!

作者：maomin9761
開發(fā) 前端
本文不會對Three.js幾何體、材質(zhì)、相機、模型、光源等概念詳細講解，會首先分成幾個模塊給大家快速演示一盒小案例。大家可以根據(jù)這幾個模塊快速了解Three.js的無限魅力。

[[353538]]

 前言

本文不會對Three.js幾何體、材質(zhì)、相機、模型、光源等概念詳細講解，會首先分成幾個模塊給大家快速演示一盒小案例。大家可以根據(jù)這幾個模塊快速了解Three.js的無限魅力。

學(xué)習(xí)

我們會使用Three.js簡單做一個立方體，為了大家更能宏觀的了解Three.js。我將會分解成代碼段(模塊)來進行開發(fā)。模塊如下：

  • 場景對象
  • 網(wǎng)格模型
  • 光源
  • 相機
  • 渲染器對象
  • 渲染操作

1. 創(chuàng)建html文件

首先，我們得創(chuàng)建一個html文件，這樣才有地方開發(fā)。創(chuàng)建完成后，我們可以引入Three.js文件，今天，它可是主角。我是直接引入遠程URL地址進行加載，你也可以去官網(wǎng)進行下載到本地引入。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.    
  12.   </body> 
  13. </html> 

2. 創(chuàng)建場景對象

借助Three.js引擎創(chuàng)建好一個虛擬的三維場景。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象Scene 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.     </script> 
  17.   </body> 
  18. </html> 

3. 創(chuàng)建網(wǎng)格模型

這行代碼new THREE.BoxGeometry(200, 200, 200)的意思是創(chuàng)建了一個長200、寬200、高200的立方體對象。然后并通過代碼new THREE.MeshLambertMaterial給立方體對象定義材質(zhì)，這里可以理解成立方體的屬性(包含了顏色、透明度等屬性)，這里暫時列舉顏色屬性。然后我們需要將立方體與屬性聯(lián)系起來，就用到網(wǎng)格模型，將兩者作為構(gòu)造函數(shù)Mesh的兩個參數(shù)傳進去，最后添加到場景里面。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.       /* 
  17.        * 創(chuàng)建網(wǎng)格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質(zhì)對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  24.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  25.     </script> 
  26.   </body> 
  27. </html> 

4. 設(shè)置光源

代碼new THREE.PointLight('#fff')創(chuàng)建了一個點光源對象，參數(shù)#fff定義的是光照強度， 你可以嘗試把參數(shù)更改為#666，你會看到立方體的表面顏色變暗，這很好理解，實際生活中燈光強度變低了，周圍的景物自然暗淡。比如夜空中的照明彈就是一個點光源例子。代碼THREE.AmbientLight('#333')創(chuàng)建了一個環(huán)境光對象，環(huán)境光的顏色會影響到整個場景，環(huán)境光沒有特定的光源，是模擬漫反射的一種光源，因此不需要指定位置它能將燈光均勻地照射在場景中每個物體上面，一般情況下用來弱化陰影或者添加一些顏色到環(huán)境中，因此不能將環(huán)境光作為場景中的唯一光源。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.       /* 
  17.        * 創(chuàng)建網(wǎng)格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質(zhì)對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  24.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  25.       /* 
  26.        * 設(shè)置光源 
  27.        */ 
  28.       var point = new THREE.PointLight('#fff'); //點光源 
  29.       point.position.set(300, 100, 200); //點光源位置 
  30.       scene.add(point); //點光源添加到場景中 
  31.        
  32.       var ambient = new THREE.AmbientLight('#333');//環(huán)境光 
  33.       scene.add(ambient); //環(huán)境光添加到場景中 
  34.     </script> 
  35.   </body> 
  36. </html> 

5.設(shè)置相機

代碼new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)創(chuàng)建了一個正射投影相機對象， 什么是“正射投影”，什么是“相機對象”， 比如把該構(gòu)造函數(shù)參數(shù)中用到的參數(shù)s，也就是代碼var s = 200中定義的一個系數(shù)，可以把200更改為300,你會發(fā)現(xiàn)立方體顯示效果變小，這很好理解，相機構(gòu)造函數(shù)的的前四個參數(shù)定義的是拍照窗口大小， 就像平時拍照一樣，取景范圍為大，被拍的人相對背景自然變小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position)定義的是相機的位置和拍照方向，可以更改camera.position.set(200,300,200)參數(shù)重新定義的相機位置，把第一個參數(shù)也就是x坐標(biāo)從200更改為250， 你會發(fā)現(xiàn)立方的在屏幕上呈現(xiàn)的角度變了，這就像你生活中拍照人是同一個人，但是你拍照的位置角度不同，顯示的效果肯定不同。這些具體的參數(shù)細節(jié)可以不用管， 至少你知道相機可以縮放顯示三維場景、對三維場景的不同角度進行取景顯示。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.       /* 
  17.        * 創(chuàng)建網(wǎng)格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質(zhì)對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  24.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  25.       /* 
  26.        * 設(shè)置光源 
  27.        */ 
  28.       var point = new THREE.PointLight('#fff'); //點光源 
  29.       point.position.set(300, 100, 200); //點光源位置 
  30.       scene.add(point); //點光源添加到場景中 
  31.       var ambient = new THREE.AmbientLight('#333');//環(huán)境光 
  32.       scene.add(ambient); //環(huán)境光添加到場景中 
  33.       /* 
  34.        * 設(shè)置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設(shè)置相機位置 
  43.       camera.lookAt(scene.position); //設(shè)置相機方向(指向的場景對象) 
  44.     </script> 
  45.   </body> 
  46. </html> 

6.創(chuàng)建渲染器對象

Three.js是基于原生WebGL封裝運行的三維引擎。所以瀏覽器利用代碼new THREE.WebGLRenderer()就會渲染出一幀圖像?？梢栽O(shè)置渲染區(qū)域尺寸和背景顏色。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.       /* 
  17.        * 創(chuàng)建網(wǎng)格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質(zhì)對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  24.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  25.       /* 
  26.        * 設(shè)置光源 
  27.        */ 
  28.       var point = new THREE.PointLight('#fff'); //點光源 
  29.       point.position.set(300, 100, 200); //點光源位置 
  30.       scene.add(point); //點光源添加到場景中 
  31.       var ambient = new THREE.AmbientLight('#333');//環(huán)境光 
  32.       scene.add(ambient); //環(huán)境光添加到場景中 
  33.       /* 
  34.        * 設(shè)置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設(shè)置相機位置 
  43.       camera.lookAt(scene.position); //設(shè)置相機方向(指向的場景對象) 
  44.       /* 
  45.        * 創(chuàng)建渲染器對象 
  46.        */ 
  47.       var renderer = new THREE.WebGLRenderer(); 
  48.       renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸 
  49.       renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色 
  50.     </script> 
  51.   </body> 
  52. </html> 

7.執(zhí)行渲染操作

將渲染好的區(qū)域指定場景、相機作為參數(shù)，并且把區(qū)域添加到頁面上。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <!--引入three.js--> 
  7.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  8.   </head> 
  9.  
  10.   <body> 
  11.   <script>   
  12.       /* 
  13.        * 創(chuàng)建場景對象 
  14.        */ 
  15.       var scene = new THREE.Scene(); 
  16.       /* 
  17.        * 創(chuàng)建網(wǎng)格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質(zhì)對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  24.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  25.       /* 
  26.        * 設(shè)置光源 
  27.        */ 
  28.       var point = new THREE.PointLight('#fff'); //點光源 
  29.       point.position.set(300, 100, 200); //點光源位置 
  30.       scene.add(point); //點光源添加到場景中 
  31.       var ambient = new THREE.AmbientLight('#333');//環(huán)境光 
  32.       scene.add(ambient); //環(huán)境光添加到場景中 
  33.       /* 
  34.        * 設(shè)置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設(shè)置相機位置 
  43.       camera.lookAt(scene.position); //設(shè)置相機方向(指向的場景對象) 
  44.       /* 
  45.        * 創(chuàng)建渲染器對象 
  46.        */ 
  47.       var renderer = new THREE.WebGLRenderer(); 
  48.       renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸 
  49.       renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色 
  50.       /* 
  51.        * 執(zhí)行渲染操作   
  52.        */  
  53.       renderer.render(scene, camera); //指定場景、相機作為參數(shù) 
  54.       document.body.appendChild(renderer.domElement); //body元素中插入canvas對象 
  55.     </script> 
  56.   </body> 
  57. </html> 

完整代碼

代碼body {margin: 0;overflow: hidden;}是為了隱藏body窗口區(qū)域滾動條。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <title>three.js小案例</title> 
  6.     <style> 
  7.       body { 
  8.         margin: 0; 
  9.         overflow: hidden; 
  10.       } 
  11.     </style> 
  12.     <!--引入three.js--> 
  13.     <script src="https://unpkg.com/three@0.122.0/build/three.js"></script> 
  14.   </head> 
  15.  
  16.   <body> 
  17.   <script>   
  18.       /* 
  19.        * 創(chuàng)建場景對象 
  20.        */ 
  21.       var scene = new THREE.Scene(); 
  22.       /* 
  23.        * 創(chuàng)建網(wǎng)格模型 
  24.        */ 
  25.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  26.       var material = new THREE.MeshLambertMaterial({ 
  27.         color: '#f4f4f4', 
  28.       }); //材質(zhì)對象Material 
  29.       var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh 
  30.       scene.add(mesh); //網(wǎng)格模型添加到場景中 
  31.       /* 
  32.        * 設(shè)置光源 
  33.        */ 
  34.       var point = new THREE.PointLight('#fff'); //點光源 
  35.       point.position.set(300, 100, 200); //點光源位置 
  36.       scene.add(point); //點光源添加到場景中 
  37.       var ambient = new THREE.AmbientLight('#333');//環(huán)境光 
  38.       scene.add(ambient); //環(huán)境光添加到場景中 
  39.       /* 
  40.        * 設(shè)置相機 
  41.        */ 
  42.       var width = window.innerWidth; //窗口寬度 
  43.       var height = window.innerHeight; //窗口高度 
  44.       var k = width / height; //窗口寬高比 
  45.       var s = 200; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大 
  46.       //創(chuàng)建相機對象 
  47.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  48.       camera.position.set(200, 300, 200); //設(shè)置相機位置 
  49.       camera.lookAt(scene.position); //設(shè)置相機方向(指向的場景對象) 
  50.       /* 
  51.        * 創(chuàng)建渲染器對象 
  52.        */ 
  53.       var renderer = new THREE.WebGLRenderer(); 
  54.       renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸 
  55.       renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色 
  56.       /* 
  57.        * 執(zhí)行渲染操作   
  58.        */  
  59.       renderer.render(scene, camera); //指定場景、相機作為參數(shù) 
  60.       document.body.appendChild(renderer.domElement); //body元素中插入canvas對象 
  61.     </script> 
  62.   </body> 
  63. </html> 

結(jié)語

下面這幅圖非常形象地說明了場景—相機—渲染器之間的關(guān)系。

 

 

責(zé)任編輯：姜華 來源： 前端歷劫之路
JS
相關(guān)推薦

2012-07-10 01:22:32

PythonPython教程

2024-11-07 16:09:53

2022-04-13 22:01:44

錯誤監(jiān)控系統(tǒng)

2020-12-17 06:48:21

SQLkafkaMySQL

2009-04-29 17:35:47

LinuxWebMail系統(tǒng)

2023-03-13 07:52:13

2023-10-27 09:40:52

VitePressGatsby

2019-04-01 14:59:56

負載均衡服務(wù)器網(wǎng)絡(luò)

2022-03-04 16:06:33

數(shù)據(jù)庫HarmonyOS鴻蒙

2021-09-07 09:40:20

Spark大數(shù)據(jù)引擎

2022-06-16 07:31:41

Web組件封裝HTML 標(biāo)簽

2024-06-19 09:58:29

2023-04-12 11:18:51

甘特圖前端

2015-09-06 09:22:24

框架搭建快速高效app

2024-05-13 09:28:43

Flink SQL大數(shù)據(jù)

2023-11-30 10:21:48

虛擬列表虛擬列表工具庫

2023-11-09 14:44:27

Docker鏡像容器

2023-07-15 18:26:51

LinuxABI

2009-10-09 14:45:29

VB程序

2019-09-16 09:14:51

點贊
收藏

51CTO技術(shù)棧公眾號