當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Three.js中自定义控制几何体的点和面的属性

發(fā)布時(shí)間：2025/3/19 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 Three.js中自定义控制几何体的点和面的属性小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

場(chǎng)景

Three.js中引入dat.gui庫(kù)實(shí)現(xiàn)界面組件控制動(dòng)畫(huà)速度變量：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119391130

??? Three.js庫(kù)中的geometry和其他大多數(shù)三維庫(kù)中的一樣，基本上是三維空間中的點(diǎn)集，

以及一些將這些點(diǎn)連接起來(lái)的面。舉例來(lái)說(shuō)，一個(gè)方塊:

1、一個(gè)方塊有8個(gè)角。每個(gè)角都可以定義為X, y和z坐標(biāo)的一個(gè)組合。所以每個(gè)方塊

都是三維空間中的8個(gè)點(diǎn)。在Three.js庫(kù)中，這些點(diǎn)稱為頂點(diǎn)(vertice) 。

2、一個(gè)方塊有6個(gè)側(cè)面，每個(gè)角有一個(gè)頂點(diǎn)。在Three.js庫(kù)里，每個(gè)側(cè)面稱為面(face)。

??? 當(dāng)你使用Three. j s庫(kù)提供的這些幾何體時(shí)，你不必親自定義所有的這些頂點(diǎn)和面。對(duì)于

一個(gè)方塊來(lái)講，你只要定義長(zhǎng)寬高即可。Three js庫(kù)會(huì)利用這些信息，在正確的位置創(chuàng)建一

個(gè)擁有8個(gè)頂點(diǎn)的幾何體，并用正確的面連接起來(lái)。盡管你可以使用Three js庫(kù)提供的幾何

體，或者自動(dòng)生成，但是你仍然可以通過(guò)定義頂點(diǎn)和面，手工創(chuàng)建幾何體。創(chuàng)建方法可以參

考下面的代碼片段:

??????? //定義頂點(diǎn)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();//定義材質(zhì)var materials = [new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})];//合并多個(gè)材質(zhì)var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);mesh.children.forEach(function (e) {e.castShadow = true});//方塊添加進(jìn)場(chǎng)景scene.add(mesh);

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

上面用到的不是一個(gè)單一的材質(zhì)，而是有兩個(gè)元素的材質(zhì)數(shù)組。

除了顯示一個(gè)綠色透明的方塊之外，還顯示一個(gè)線框。

完整示例代碼

<!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 {/* 將邊距設(shè)置為0，溢出設(shè)置為隱藏，以實(shí)現(xiàn)全屏顯示 */margin: 0;overflow: hidden;}</style> </head> <body> <div id="WebGL-output"> </div><script type="text/javascript">// 初始化的方法function init() {// 創(chuàng)建一個(gè)場(chǎng)景，它將包含我們所有的元素，如物體，攝像機(jī)和燈光var scene = new THREE.Scene();// 創(chuàng)建一個(gè)相機(jī)，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創(chuàng)建渲染器并設(shè)置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設(shè)置為接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//設(shè)置大小renderer.setSize(window.innerWidth, window.innerHeight);// 創(chuàng)建平面，并定義平面的尺寸var planeGeometry = new THREE.PlaneGeometry(60, 20);//創(chuàng)建一個(gè)基本材質(zhì)，并設(shè)置顏色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把兩個(gè)對(duì)象合并到Mesh網(wǎng)格對(duì)象var plane = new THREE.Mesh(planeGeometry, planeMaterial);// 設(shè)置平面繞x軸旋轉(zhuǎn)90度plane.rotation.x = -0.5 * Math.PI;// 設(shè)置平面的坐標(biāo)位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 將平面添加進(jìn)場(chǎng)景scene.add(plane);// 定義相機(jī)的坐標(biāo)，即懸掛在場(chǎng)景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機(jī)能夠拍攝到這些物體，使用lookat函數(shù)指向場(chǎng)景的中心camera.lookAt(scene.position);// 添加環(huán)境光var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, 10);spotLight.castShadow = true;scene.add(spotLight);// 將renderer的輸出掛接到HTML終點(diǎn)div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染場(chǎng)景var step = 0;//定義頂點(diǎn)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();//定義材質(zhì)var materials = [new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})];//合并多個(gè)材質(zhì)var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);mesh.children.forEach(function (e) {e.castShadow = true});//方塊添加進(jìn)場(chǎng)景scene.add(mesh);//添加組件的方法function addControl(x, y, z) {var controls = new function () {this.x = x;this.y = y;this.z = z;};return controls;}//組件坐標(biāo)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的頂點(diǎn)位置坐標(biāo)在在三維空間笛卡爾坐標(biāo)系中中坐標(biāo)需要xyz三個(gè)分量，//所以頂點(diǎn)坐標(biāo)使用Vector3對(duì)象表示;//Three.js模型對(duì)象的縮放屬性可以在xyz三個(gè)方向上進(jìn)行縮放，也就是說(shuō)有三個(gè)分量需要表達(dá)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指向一個(gè)更新后的定點(diǎn)數(shù)組e.geometry.vertices = vertices;//告訴geometry對(duì)象，定點(diǎn)需要更新e.geometry.verticesNeedUpdate = true;//重新計(jì)算側(cè)面e.geometry.computeFaceNormals();});// 渲染requestAnimationFrame(render);renderer.render(scene, camera);}}window.onload = init;</script> </body> </html>

實(shí)現(xiàn)效果

總結(jié)

以上是生活随笔為你收集整理的Three.js中自定义控制几何体的点和面的属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Three.js中使用材质覆盖属性
下一篇： HBase在CentOS上分布集群安装