Three.js利用頂點繪制立方體的方法詳解

更新時間：2017年09月27日 10:18:42 作者：專注前端30年

最近在學習three.js，將學習中遇到的知識點總結分享出來，下面這篇文章主要給大家介紹了關于Three.js利用頂點繪制立方體的方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

之前我們在學些WebGL基礎的時候每天都是在一直研究頂點位置，法向量，繪制下標什么的。雖然復雜，但是畢竟原生，性能沒得說。

three.js也給我們提供了相關的接口供我們使用原生的方法繪制模型，下面話不多說了，來一起看看詳細的介紹吧。

下面是我的個人一個案例。

首先，我創(chuàng)建了一個空白的形狀：

  //立方體
  var cubeGeometry = new THREE.Geometry();

立方體的形狀如下：

  // 創(chuàng)建一個立方體
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3

然后添加了立方體的頂點，一共8個

  //創(chuàng)建立方體的頂點
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;

接著通過頂點的坐標生成了立方體的面

  //創(chuàng)建立方的面
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;

在這里需要注意：

（1）面是由三個頂點組成的一個三角形面，也是WebGL的實現面的方式。如果需要一個長方形，那就需要由兩個三角形組合而成。

（2）如果要繪制的面是朝向相機的，那這個面的頂點的書寫方式是逆時針繪制的，比如圖上模型的第一個面的添加里面書寫的是(0,1,2)。

（3）如果能使模型有燈光的效果，還需要設置法向量，讓three.js自動生成即可，如下

  //生成法向量
  cubeGeometry.computeFaceNormals();

當前的這些步驟只是生成了形狀，還需要和以前一樣設置一個紋理，再通過THTEE.Mesh()方法生成網格

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

這樣就實現了一個立方體的繪制：

全部代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  html, body {
   margin: 0;
   height: 100%;
  }

  canvas {
   display: block;
  }

 </style>
</head>
<body onload="draw();">

</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
 var renderer;
 function initRender() {
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  //告訴渲染器需要陰影效果
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默認的是，沒有設置的這個清晰 THREE.PCFShadowMap
  document.body.appendChild(renderer.domElement);
 }

 var camera;
 function initCamera() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 40, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
 }

 var scene;
 function initScene() {
  scene = new THREE.Scene();
 }

 //初始化dat.GUI簡化試驗流程
 var gui;
 function initGui() {
  //聲明一個保存需求修改的相關數據的對象
  gui = {
   lightY: 30, //燈光y軸的位置
   cubeX: 25, //立方體的x軸位置
   cubeY: 10, //立方體的x軸位置
   cubeZ: -5 //立方體的z軸的位置
  };
  var datGui = new dat.GUI();
  //將設置屬性添加到gui當中，gui.add(對象，屬性，最小值，最大值）
  datGui.add(gui, "lightY", 0, 100);
  datGui.add(gui, "cubeX", -30, 30);
  datGui.add(gui, "cubeY", -30, 30);
  datGui.add(gui, "cubeZ", -30, 30);
 }

 var light;
 function initLight() {
  scene.add(new THREE.AmbientLight(0x444444));

  light = new THREE.PointLight(0xffffff);
  light.position.set(15, 30, 10);

  //告訴平行光需要開啟陰影投射
  light.castShadow = true;

  scene.add(light);
 }

 var cube;
 function initModel() {

  //輔助工具
  var helper = new THREE.AxisHelper(10);
  scene.add(helper);

  // 創(chuàng)建一個立方體
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3

  //立方體
  var cubeGeometry = new THREE.Geometry();

  //創(chuàng)建立方體的頂點
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;

  //創(chuàng)建立方的面
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;

  //生成法向量
  cubeGeometry.computeFaceNormals();

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = 25;
  cube.position.y = 5;
  cube.position.z = -5;

  //告訴立方體需要投射陰影
  cube.castShadow = true;

  scene.add(cube);

  //底部平面
  var planeGeometry = new THREE.PlaneGeometry(100, 100);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa});

  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -0;

  //告訴底部平面需要接收陰影
  plane.receiveShadow = true;

  scene.add(plane);

 }

 //初始化性能插件
 var stats;
 function initStats() {
  stats = new Stats();
  document.body.appendChild(stats.dom);
 }

 //用戶交互插件 鼠標左鍵按住旋轉，右鍵按住平移，滾輪縮放
 var controls;
 function initControls() {

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  // 如果使用animate方法時，將此函數刪除
  //controls.addEventListener( 'change', render );
  // 使動畫循環(huán)使用時阻尼或自轉 意思是否有慣性
  controls.enableDamping = true;
  //動態(tài)阻尼系數 就是鼠標拖拽旋轉靈敏度
  //controls.dampingFactor = 0.25;
  //是否可以縮放
  controls.enableZoom = true;
  //是否自動旋轉
  controls.autoRotate = false;
  //設置相機距離原點的最遠距離
  controls.minDistance = 50;
  //設置相機距離原點的最遠距離
  controls.maxDistance = 200;
  //是否開啟右鍵拖拽
  controls.enablePan = true;
 }

 function render() {
  renderer.render(scene, camera);
 }

 //窗口變動觸發(fā)的函數
 function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  render();
  renderer.setSize(window.innerWidth, window.innerHeight);

 }

 function animate() {
  //更新控制器
  render();

  //更新性能插件
  stats.update();

  //更新相關位置
  light.position.y = gui.lightY;
  cube.position.x = gui.cubeX;
  cube.position.y = gui.cubeY;
  cube.position.z = gui.cubeZ;

  controls.update();

  requestAnimationFrame(animate);
 }

 function draw() {
  initGui();
  initRender();
  initScene();
  initCamera();
  initLight();
  initModel();
  initControls();
  initStats();

  animate();
  window.onresize = onWindowResize;
 }
</script>
</html>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用Three.js具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

JavaScript游戲之是男人就下100層代碼打包
不知不覺，就到了11月份了，其實我為啥要寫js游戲，覺得游戲更能引起共鳴。11月份開篇之作：是男人就下100層，相信大家都玩過。
2010-11-11
js函數模擬顯示桌面.scf程序示例
這篇文章主要介紹了一個模擬顯示桌面.scf程序的JS小函數,需要的朋友可以參考下
2014-04-04
Js中獲取frames中的元素示例代碼
本文為大家介紹下使用js獲取父frame元素及獲取子frame元素的實現代碼，有需求的朋友可以參考下，希望對大家有所
2013-07-07
如何在js中計算兩個時間段重疊的時長問題詳解
這篇文章主要給大家介紹了關于如何在js中計算兩個時間段重疊的時長問題的相關資料,判斷兩個時間段是否重疊可以通過比較兩個時間段的開始時間和結束時間來實現,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2024-04-04
前端性能優(yōu)化及技巧
這篇文章主要介紹了前端性能優(yōu)化及技巧,需要的朋友可以參考下
2016-05-05
js中用事實證明cssText性能高的問題
首先要感謝 EtherDream 的不同觀點，在巧用cssText屬性批量操作樣式一篇中由于他的質疑態(tài)度使我做了進一步的測試。
2011-03-03
JavaScript自定義數組排序方法
這篇文章主要介紹了JavaScript自定義數組排序方法,實例分析了javascript自定義數組排序的原理與實現技巧,非常具有實用價值,需要的朋友可以參考下
2015-02-02
詳解Javascript中的Object對象
這篇文章主要介紹了詳解Javascript中的Object對象,需要的朋友可以參考下
2016-02-02
js去除輸入框中所有的空格和禁止輸入空格的方法
這篇文章主要介紹當輸入框輸入數值的時候使用js去除所有的空格和禁止輸入空格的方法,需要的朋友可以參考下
2014-06-06
uniapp獲取當前位置及檢測授權狀態(tài)效果
這篇文章主要介紹了uniapp獲取當前位置及檢測授權狀態(tài)效果,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-04-04