Three.js中自定义控制几何体的点和面的属性
生活随笔
收集整理的這篇文章主要介紹了
Three.js中自定义控制几何体的点和面的属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Three.js中引入dat.gui庫實現界面組件控制動畫速度變量：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119391130
??? Three.js庫中的geometry和其他大多數三維庫中的一樣，基本上是三維空間中的點集，
以及一些將這些點連接起來的面。舉例來說，一個方塊:
1、一個方塊有8個角。每個角都可以定義為X, y和z坐標的一個組合。所以每個方塊
都是三維空間中的8個點。在Three.js庫中，這些點稱為頂點(vertice) 。
2、一個方塊有6個側面，每個角有一個頂點。在Three.js庫里，每個側面稱為面(face)。
??? 當你使用Three. j s庫提供的這些幾何體時，你不必親自定義所有的這些頂點和面。對于
一個方塊來講，你只要定義長寬高即可。Three js庫會利用這些信息，在正確的位置創建一
個擁有8個頂點的幾何體，并用正確的面連接起來。盡管你可以使用Three js庫提供的幾何
體，或者自動生成，但是你仍然可以通過定義頂點和面，手工創建幾何體。創建方法可以參
考下面的代碼片段:
??????? //定義頂點var vertices = [new THREE.Vector3(1, 3, 1),new THREE.Vector3(1, 3, -1),new THREE.Vector3(1, -1, 1),new THREE.Vector3(1, -1, -1),new THREE.Vector3(-1, 3, -1),new THREE.Vector3(-1, 3, 1),new THREE.Vector3(-1, -1, -1),new THREE.Vector3(-1, -1, 1)];//定義面var faces = [new THREE.Face3(0, 2, 1),new THREE.Face3(2, 3, 1),new THREE.Face3(4, 6, 5),new THREE.Face3(6, 7, 5),new THREE.Face3(4, 5, 1),new THREE.Face3(5, 0, 1),new THREE.Face3(7, 6, 2),new THREE.Face3(6, 3, 2),new THREE.Face3(5, 7, 0),new THREE.Face3(7, 2, 0),new THREE.Face3(1, 3, 4),new THREE.Face3(3, 6, 4),];//定義方塊var geom = new THREE.Geometry();geom.vertices = vertices;geom.faces = faces;geom.computeFaceNormals();//定義材質var materials = [new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})];//合并多個材質var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);mesh.children.forEach(function (e) {e.castShadow = true});//方塊添加進場景scene.add(mesh);注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
上面用到的不是一個單一的材質，而是有兩個元素的材質數組。
除了顯示一個綠色透明的方塊之外，還顯示一個線框。
完整示例代碼
<!DOCTYPE html><html><head><title>dat.gui的使用</title><script type="text/javascript" src="./js/three.js"></script><script type="text/javascript" src="./js/dat.gui.js"></script><style>body {/* 將邊距設置為0，溢出設置為隱藏，以實現全屏顯示 */margin: 0;overflow: hidden;}</style> </head> <body><!-- 顯示的div --> <div id="WebGL-output"> </div><script type="text/javascript">// 初始化的方法function init() {// 創建一個場景，它將包含我們所有的元素，如物體，攝像機和燈光var scene = new THREE.Scene();// 創建一個相機，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創建渲染器并設置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設置為接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//設置大小renderer.setSize(window.innerWidth, window.innerHeight);// 創建平面，并定義平面的尺寸var planeGeometry = new THREE.PlaneGeometry(60, 20);//創建一個基本材質，并設置顏色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把兩個對象合并到Mesh網格對象var plane = new THREE.Mesh(planeGeometry, planeMaterial);// 設置平面繞x軸旋轉90度plane.rotation.x = -0.5 * Math.PI;// 設置平面的坐標位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 將平面添加進場景scene.add(plane);// 定義相機的坐標，即懸掛在場景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機能夠拍攝到這些物體，使用lookat函數指向場景的中心camera.lookAt(scene.position);// 添加環境光var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, 10);spotLight.castShadow = true;scene.add(spotLight);// 將renderer的輸出掛接到HTML終點div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染場景var step = 0;//定義頂點var vertices = [new THREE.Vector3(1, 3, 1),new THREE.Vector3(1, 3, -1),new THREE.Vector3(1, -1, 1),new THREE.Vector3(1, -1, -1),new THREE.Vector3(-1, 3, -1),new THREE.Vector3(-1, 3, 1),new THREE.Vector3(-1, -1, -1),new THREE.Vector3(-1, -1, 1)];//定義面var faces = [new THREE.Face3(0, 2, 1),new THREE.Face3(2, 3, 1),new THREE.Face3(4, 6, 5),new THREE.Face3(6, 7, 5),new THREE.Face3(4, 5, 1),new THREE.Face3(5, 0, 1),new THREE.Face3(7, 6, 2),new THREE.Face3(6, 3, 2),new THREE.Face3(5, 7, 0),new THREE.Face3(7, 2, 0),new THREE.Face3(1, 3, 4),new THREE.Face3(3, 6, 4),];//定義方塊var geom = new THREE.Geometry();geom.vertices = vertices;geom.faces = faces;geom.computeFaceNormals();//定義材質var materials = [new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})];//合并多個材質var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);mesh.children.forEach(function (e) {e.castShadow = true});//方塊添加進場景scene.add(mesh);//添加組件的方法function addControl(x, y, z) {var controls = new function () {this.x = x;this.y = y;this.z = z;};return controls;}//組件坐標var controlPoints = [];controlPoints.push(addControl(3, 5, 3));controlPoints.push(addControl(3, 5, 0));controlPoints.push(addControl(3, 0, 3));controlPoints.push(addControl(3, 0, 0));controlPoints.push(addControl(0, 5, 0));controlPoints.push(addControl(0, 5, 3));controlPoints.push(addControl(0, 0, 0));controlPoints.push(addControl(0, 0, 3));//gui組件var gui = new dat.GUI();for (var i = 0; i < 8; i++) {f1 = gui.addFolder('Vertices ' + (i + 1));f1.add(controlPoints[i], 'x', -10, 10);f1.add(controlPoints[i], 'y', -10, 10);f1.add(controlPoints[i], 'z', -10, 10);}render();function render() {//幾何體Geometry的頂點位置坐標在在三維空間笛卡爾坐標系中中坐標需要xyz三個分量，//所以頂點坐標使用Vector3對象表示;//Three.js模型對象的縮放屬性可以在xyz三個方向上進行縮放，也就是說有三個分量需要表達var vertices = [];for (var i = 0; i < 8; i++) {vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));}mesh.children.forEach(function (e) {//將vertices指向一個更新后的定點數組e.geometry.vertices = vertices;//告訴geometry對象，定點需要更新e.geometry.verticesNeedUpdate = true;//重新計算側面e.geometry.computeFaceNormals();});// 渲染requestAnimationFrame(render);renderer.render(scene, camera);}}window.onload = init;</script> </body> </html>實現效果
?
總結
以上是生活随笔為你收集整理的Three.js中自定义控制几何体的点和面的属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Three.js中使用材质覆盖属性
- 下一篇： HBase在CentOS上分布集群安装