成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

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

[[353538]]

 前言

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

學習

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

  • 場景對象
  • 網格模型
  • 光源
  • 相機
  • 渲染器對象
  • 渲染操作

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

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

  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)建網格模型

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

  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)建網格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  24.       scene.add(mesh); //網格模型添加到場景中 
  25.     </script> 
  26.   </body> 
  27. </html> 

4. 設置光源

代碼new THREE.PointLight('#fff')創(chuàng)建了一個點光源對象，參數#fff定義的是光照強度， 你可以嘗試把參數更改為#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)建網格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  24.       scene.add(mesh); //網格模型添加到場景中 
  25.       /* 
  26.        * 設置光源 
  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.設置相機

代碼new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)創(chuàng)建了一個正射投影相機對象， 什么是“正射投影”，什么是“相機對象”， 比如把該構造函數參數中用到的參數s，也就是代碼var s = 200中定義的一個系數，可以把200更改為300,你會發(fā)現立方體顯示效果變小，這很好理解，相機構造函數的的前四個參數定義的是拍照窗口大小， 就像平時拍照一樣，取景范圍為大，被拍的人相對背景自然變小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position)定義的是相機的位置和拍照方向，可以更改camera.position.set(200,300,200)參數重新定義的相機位置，把第一個參數也就是x坐標從200更改為250， 你會發(fā)現立方的在屏幕上呈現的角度變了，這就像你生活中拍照人是同一個人，但是你拍照的位置角度不同，顯示的效果肯定不同。這些具體的參數細節(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)建網格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  24.       scene.add(mesh); //網格模型添加到場景中 
  25.       /* 
  26.        * 設置光源 
  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.        * 設置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設置相機位置 
  43.       camera.lookAt(scene.position); //設置相機方向(指向的場景對象) 
  44.     </script> 
  45.   </body> 
  46. </html> 

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

Three.js是基于原生WebGL封裝運行的三維引擎。所以瀏覽器利用代碼new THREE.WebGLRenderer()就會渲染出一幀圖像。可以設置渲染區(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)建網格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  24.       scene.add(mesh); //網格模型添加到場景中 
  25.       /* 
  26.        * 設置光源 
  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.        * 設置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設置相機位置 
  43.       camera.lookAt(scene.position); //設置相機方向(指向的場景對象) 
  44.       /* 
  45.        * 創(chuàng)建渲染器對象 
  46.        */ 
  47.       var renderer = new THREE.WebGLRenderer(); 
  48.       renderer.setSize(width, height); //設置渲染區(qū)域尺寸 
  49.       renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色 
  50.     </script> 
  51.   </body> 
  52. </html> 

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

將渲染好的區(qū)域指定場景、相機作為參數，并且把區(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)建網格模型 
  18.        */ 
  19.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  20.       var material = new THREE.MeshLambertMaterial({ 
  21.         color: '#f4f4f4', 
  22.       }); //材質對象Material 
  23.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  24.       scene.add(mesh); //網格模型添加到場景中 
  25.       /* 
  26.        * 設置光源 
  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.        * 設置相機 
  35.        */ 
  36.       var width = window.innerWidth; //窗口寬度 
  37.       var height = window.innerHeight; //窗口高度 
  38.       var k = width / height; //窗口寬高比 
  39.       var s = 200; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大 
  40.       //創(chuàng)建相機對象 
  41.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  42.       camera.position.set(200, 300, 200); //設置相機位置 
  43.       camera.lookAt(scene.position); //設置相機方向(指向的場景對象) 
  44.       /* 
  45.        * 創(chuàng)建渲染器對象 
  46.        */ 
  47.       var renderer = new THREE.WebGLRenderer(); 
  48.       renderer.setSize(width, height); //設置渲染區(qū)域尺寸 
  49.       renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色 
  50.       /* 
  51.        * 執(zhí)行渲染操作   
  52.        */  
  53.       renderer.render(scene, camera); //指定場景、相機作為參數 
  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)建網格模型 
  24.        */ 
  25.       var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry 
  26.       var material = new THREE.MeshLambertMaterial({ 
  27.         color: '#f4f4f4', 
  28.       }); //材質對象Material 
  29.       var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh 
  30.       scene.add(mesh); //網格模型添加到場景中 
  31.       /* 
  32.        * 設置光源 
  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.        * 設置相機 
  41.        */ 
  42.       var width = window.innerWidth; //窗口寬度 
  43.       var height = window.innerHeight; //窗口高度 
  44.       var k = width / height; //窗口寬高比 
  45.       var s = 200; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大 
  46.       //創(chuàng)建相機對象 
  47.       var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
  48.       camera.position.set(200, 300, 200); //設置相機位置 
  49.       camera.lookAt(scene.position); //設置相機方向(指向的場景對象) 
  50.       /* 
  51.        * 創(chuàng)建渲染器對象 
  52.        */ 
  53.       var renderer = new THREE.WebGLRenderer(); 
  54.       renderer.setSize(width, height); //設置渲染區(qū)域尺寸 
  55.       renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色 
  56.       /* 
  57.        * 執(zhí)行渲染操作   
  58.        */  
  59.       renderer.render(scene, camera); //指定場景、相機作為參數 
  60.       document.body.appendChild(renderer.domElement); //body元素中插入canvas對象 
  61.     </script> 
  62.   </body> 
  63. </html> 

結語

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

 

 

責任編輯：姜華 來源： 前端歷劫之路
JS
相關推薦

2012-07-10 01:22:32

PythonPython教程

2022-04-13 22:01:44

錯誤監(jiān)控系統

2024-11-07 16:09:53

2019-04-01 14:59:56

負載均衡服務器網絡

2023-10-27 09:40:52

VitePressGatsby

2020-12-17 06:48:21

SQLkafkaMySQL

2009-04-29 17:35:47

LinuxWebMail系統

2023-03-13 07:52:13

2024-05-13 09:28:43

Flink SQL大數據

2023-11-30 10:21:48

虛擬列表虛擬列表工具庫

2015-09-06 09:22:24

框架搭建快速高效app

2022-03-04 16:06:33

數據庫HarmonyOS鴻蒙

2023-11-09 14:44:27

Docker鏡像容器

2024-06-19 09:58:29

2022-06-16 07:31:41

Web組件封裝HTML 標簽

2021-09-07 09:40:20

Spark大數據引擎

2023-04-12 11:18:51

甘特圖前端

2020-12-11 09:40:10

DevOpsCICD

2015-11-06 11:03:36

2021-07-29 08:57:23

ViteReact模塊
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 免费一区二区三区 | 久久青视频 | av中文在线 | 久久久久久高清 | 日本高清视频在线播放 | 成人三级网址 | 亚洲视频在线一区 | 国产精品久久久久久238 | 欧美一区二区三区视频在线播放 | 午夜视频网站 | 黄色一级片在线播放 | 亚州无限乱码 | 波多野结衣av中文字幕 | 一区二区在线 | 国产乱码精品一区二区三区忘忧草 | 91亚洲一区| 国产精品一区二区三区久久久 | 91视频www.| 免费在线观看h片 | 国产四虎 | 国产精品亚洲成在人线 | 精品国产一区二区三区观看不卡 | 国产综合久久久久久鬼色 | 欧美一区二区大片 | 亚洲综合久久网 | 色综合成人网 | 国产精品一区二区三区四区 | 国产91久久精品一区二区 | 久久久久久国产精品免费免费狐狸 | 国产精品毛片无码 | 久久免费精品 | 欧美aaaa视频| 日韩在线h| 久久国产亚洲精品 | 日韩精品一区二区三区在线播放 | 国产精品久久久久无码av | 成人自拍视频网站 | 精品一区二区电影 | 国产69精品久久99不卡免费版 | 超碰人人人 | 亚洲色图第一页 |