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

來源：懂視網責編：小采時間：2020-11-27 22:28:52

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

Three.js利用頂點繪制立方體的方法詳解:前言之前我們在學些WebGL基礎的時候每天都是在一直研究頂點位置，法向量，繪制下標什么的。雖然復雜，但是畢竟原生，性能沒得說。 three.js也給我們提供了相關的接口供我們使用原生的方法繪制模型，下面話不多說了，來一起看看詳細的介紹吧。下面是我的個

推薦度：

點擊下載本文 文檔為doc格式

導讀Three.js利用頂點繪制立方體的方法詳解:前言之前我們在學些WebGL基礎的時候每天都是在一直研究頂點位置，法向量，繪制下標什么的。雖然復雜，但是畢竟原生，性能沒得說。 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的實現(xiàn)面的方式。如果需要一個長方形，那就需要由兩個三角形組合而成。

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

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

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

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

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

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

這樣就實現(xiàn)了一個立方體的繪制：

全部代碼如下：

<!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() {
 //聲明一個保存需求修改的相關數(shù)據的對象
 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方法時，將此函數(shù)刪除
 //controls.addEventListener( 'change', render );
 // 使動畫循環(huán)使用時阻尼或自轉 意思是否有慣性
 controls.enableDamping = true;
 //動態(tài)阻尼系數(shù) 就是鼠標拖拽旋轉靈敏度
 //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ā)的函數(shù)
 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>

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用繪制的方

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦