国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

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

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

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

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

前言

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

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

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

首先，我創建了一個空白的形狀：

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

立方體的形狀如下：

 // 創建一個立方體
 // v6----- v5
 // /| /|
 // v1------v0|
 // | | | |
 // | |v7---|-|v4
 // |/ |/
 // v2------v3

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

 //創建立方體的頂點
 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;

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

 //創建立方的面
 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);

 // 創建一個立方體
 // v6----- v5
 // /| /|
 // v1------v0|
 // | | | |
 // | |v7---|-|v4
 // |/ |/
 // v2------v3

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

 //創建立方體的頂點
 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;

 //創建立方的面
 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 );
 // 使動畫循環使用時阻尼或自轉 意思是否有慣性
 controls.enableDamping = true;
 //動態阻尼系數 就是鼠標拖拽旋轉靈敏度
 //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);
 }

 //窗口變動觸發的函數
 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>

總結

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

文檔

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

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

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 亚洲欧美日韩综合精品网 | 国产欧美一区二区三区精品 | 亚洲一区二区精品视频 | 亚洲视频在线观看免费 | 国产一区二区在线免费观看 | 国产高清免费不卡观看 | 日韩精品小视频 | 国产一区二区三区精品视频 | 欧美日韩综合 | a一级毛片| 国产精品国产亚洲精品看不卡 | 天天爽夜夜爽一区二区三区 | 欧美一区二区三区视频在线观看 | 欧美日韩欧美日韩 | 亚洲第一网站在线观看 | 欧美亚洲另类综合 | 亚洲一级二级三级 | 国产精品欧美激情在线播放 | 欧美第5页 | 亚洲一区综合 | 国产91久久久久久久免费 | 欧美日韩ay在线观看 | 日本不卡一区二区三区四区 | 九九精品视频一区二区三区 | 中文字幕日韩有码 | 亚洲国产精品成人久久 | 日本v片免费一区二区三区 欧洲精品欧美精品 | 亚洲综合一区二区精品久久 | 国产精品视_精品国产免费 国产精品视频第一区二区三区 | 最近韩国日本免费观看 | 欧美日本国产 | 99久久精品国产一区二区小说 | 美女视频黄全免费的 | 在线播放国产一区二区三区 | 精品一区二区三 | 国产精品夜夜爽范冰冰 | 久久久久久久国产a∨ | 免费观看一级成人毛片 | 精品一区二区三区三区 | 99视频在线免费看 | 美女视频黄a视频免费全过程在线 |