欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Three.js學(xué)習(xí)之網(wǎng)格

 更新時(shí)間：2016年08月10日 09:54:04   投稿：daisy  
本篇將先介紹創(chuàng)建較為常用的物體：網(wǎng)格，然后介紹如何修改物體的屬性。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。

前言

　　小編之前發(fā)布過關(guān)于幾何形狀和材質(zhì)，相信大家看過學(xué)習(xí)之后，我們就能使用他們來創(chuàng)建物體了。最常用的一種物體就是網(wǎng)格（Mesh），網(wǎng)格是由頂點(diǎn)、邊、面等組成的物體；其他物體包括線段（Line）、骨骼（Bone）、粒子系統(tǒng)（ParticleSystem）等。創(chuàng)建物體需要指定幾何形狀和材質(zhì)，其中，幾何形狀決定了物體的頂點(diǎn)位置等信息，材質(zhì)決定了物體的顏色、紋理等信息。

1.創(chuàng)建網(wǎng)格

　　在前幾篇中，我們學(xué)習(xí)了如何創(chuàng)建幾何形狀與材質(zhì)，而網(wǎng)格的創(chuàng)建非常簡單，只要把幾何形狀與材質(zhì)傳入其構(gòu)造函數(shù)。最常用的物體是網(wǎng)格（Mesh），它代表包含點(diǎn)、線、面的幾何體，其構(gòu)造函數(shù)是：

Mesh(geometry, material)

　　下面，讓我們通過一個(gè)具體的例子了解如何創(chuàng)建網(wǎng)格：

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

　　如果material和geometry之后不會(huì)復(fù)用的話，也可以合在一起寫為：

var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),

 new THREE.MeshLambertMaterial({

  color: 0xffff00

 })

);

scene.add(mesh);

　　添加光照后，得到的效果為：

　　如果不指定material，則每次會(huì)隨機(jī)分配一種wireframe為true的材質(zhì)，每次刷新頁面后的顏色是不同的，一種可能的效果是：

　　源碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js測(cè)試9.1</title> 
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
//   var material = new THREE.MeshBasicMaterial({
//    color: 0xffff00,
//    wireframe: true
//   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   // render
   renderer.render(scene, camera);
  }
 </script>
</html>
 

2.修改屬性

　　2.1 修改材質(zhì)

　　除了在構(gòu)造函數(shù)中指定材質(zhì)，在網(wǎng)格被創(chuàng)建后，也能對(duì)材質(zhì)進(jìn)行修改：

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

 scene.add(mesh);

mesh.material = new THREE.MeshLambertMaterial({

 color: 0xff0000

});

　　最終顯示的顏色是紅色：

　　源碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js測(cè)試9.2</title> 
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script> 
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   mesh.material = new THREE.MeshLambertMaterial({
    color: 0xff0000
   });
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   // render
   renderer.render(scene, camera);
  }
 </script>
</html>

　　2.2 位置、縮放、旋轉(zhuǎn)

　　位置、縮放、旋轉(zhuǎn)是物體三個(gè)常用屬性。由于THREE.Mesh基礎(chǔ)自THREE.Object3D，因此包含scale、rotation、position三個(gè)屬性。它們都是THREE.Vector3實(shí)例，因此修改其值的方法是相同的，這里以位置為例。

　　THREE.Vector3有x、y、z三個(gè)屬性，如果只設(shè)置其中一個(gè)屬性，則可以用以下方法：

mesh.position.z = 1;

　　如果需要同時(shí)設(shè)置多個(gè)屬性，可以使用以下兩種方法：

mesh.position.set(1.5, -0.5, 0);

　　或者：

mesh.position = new THREE.Vector3(1.5, -0.5, 0);

　　縮放對(duì)應(yīng)的屬性是scale，旋轉(zhuǎn)對(duì)應(yīng)的屬性是rotation，具體方法與上例相同，分別表示沿x、y、z三軸縮放或旋轉(zhuǎn)。

 

　　源碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js測(cè)試9.3</title>
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   mesh.position.set(1.5, -0.5, 0);
   mesh.position = new THREE.Vector3(1.5, -0.5, 0);
   mesh.position.z = 1;
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   drawAxes(scene);
   
   // render
   renderer.render(scene, camera);
  }
  
  function drawAxes(scene) {
   // x-axis
   var xGeo = new THREE.Geometry();
   xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
   var xMat = new THREE.LineBasicMaterial({
    color: 0xff0000
   });
   var xAxis = new THREE.Line(xGeo, xMat);
   scene.add(xAxis);
   
   // y-axis
   var yGeo = new THREE.Geometry();
   yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
   var yMat = new THREE.LineBasicMaterial({
    color: 0x00ff00
   });
   var yAxis = new THREE.Line(yGeo, yMat);
   scene.add(yAxis);
   
   // z-axis
   var zGeo = new THREE.Geometry();
   zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
   var zMat = new THREE.LineBasicMaterial({
    color: 0x00ccff
   });
   var zAxis = new THREE.Line(zGeo, zMat);
   scene.add(zAxis);
  }
 </script>
</html>

本文的內(nèi)容到這就結(jié)束了，文章通過詳細(xì)實(shí)例及圖片介紹了Three.js中的網(wǎng)格，希望本文對(duì)大家學(xué)習(xí)Three.js有所幫助。

相關(guān)文章

  • 精通JavaScript 糾正 cleanWhitespace函數(shù)

    精通JavaScript 糾正 cleanWhitespace函數(shù)

    這個(gè)函數(shù)用在火狐(firefox)上面老是出錯(cuò)，今天仔細(xì)研究了下，改正了，希望別人不要遇到我這樣的問題
    2010-03-03
  • ThinkJS中如何使用MongoDB的CURD操作

    ThinkJS中如何使用MongoDB的CURD操作

    最近因?yàn)樾难獊沓毕胍囋噒hinkJS操作mongoDB，去官方文檔看了看，默認(rèn)是只給了mysql的配置，源代碼也是沒有配置mongo的，只有一個(gè)官方案例，無奈只能自己學(xué)習(xí)了，下面是自己的一些學(xué)習(xí)總結(jié)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
    2016-12-12
  • Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)

    Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)

    本篇將介紹基本材質(zhì)以及兩種基于光照模型的材質(zhì)（Lamber與Phong），有需要的小伙伴們可以參考學(xué)習(xí)。
    2016-08-08
  • js類庫styled-components快速入門教程

    js類庫styled-components快速入門教程

    這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-06-06
  • Highcharts入門之簡介

    Highcharts入門之簡介

    Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫, 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過本文的介紹及實(shí)例一起來學(xué)習(xí)學(xué)習(xí)吧。
    2016-08-08
  • Three.js學(xué)習(xí)之網(wǎng)格

    Three.js學(xué)習(xí)之網(wǎng)格

    本篇將先介紹創(chuàng)建較為常用的物體：網(wǎng)格，然后介紹如何修改物體的屬性。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。
    2016-08-08
  • JS日程管理插件FullCalendar簡單實(shí)例

    JS日程管理插件FullCalendar簡單實(shí)例

    JS日程管理插件FullCalendar是一款基于jQuery的日歷日程插件，適用于各種日程安排、工作計(jì)劃等場景，您可以很方便的查看查看待辦事項(xiàng)，標(biāo)記重要事項(xiàng)以及綁定點(diǎn)擊和拖動(dòng)事件，能快速的整合到您的項(xiàng)目中，本文將簡單介紹FullCalendar的使用
    2017-02-02
  • JavaScript庫omit源碼解析

    JavaScript庫omit源碼解析

    這篇文章主要為大家介紹了JavaScript庫omit源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • 組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解

    組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解

    這篇文章主要為大家介紹了組件庫Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • Three.js學(xué)習(xí)之正交投影照相機(jī)

    Three.js學(xué)習(xí)之正交投影照相機(jī)

    本篇主要介紹照相機(jī)中的正交投影照相機(jī)。學(xué)習(xí)Three.js的小伙伴們可以參考學(xué)習(xí)。
    2016-08-08

最新評(píng)論