three.js中幾何對象

sshe 發布于2019-08-21 18:35 / 3186人閱讀

摘要：和幾何對象是用必要的數據點頂點面等來描述三維模型。在擠壓樣條的深度上細分區段的點數個數。一個三維的樣條路徑，在這個過程中，形狀應該被擠壓出來如果沒有定義幀，就會創建幀。提供發生器功能的對象這個物體將二維形狀擠壓到三維幾何圖形中。

CircleGeometry 、 CubeGeometry、CylinderGeometry 和 ExtrudeGeometry

幾何對象是用必要的數據（點、頂點、面等）來描述三維模型。我們將創建平面的圓、立方體和圓柱體。Extrude Geometry是用來制作從路徑凸出的形狀。我們要做個凸出的三角形：

cube.castShadow = cube.receiveShadow = true;
this.scene.add(cube);

// 添加不規則的物體
var extrudeSettings = {
    amount: 10,
    steps: 10,
    bevelSegments: 10,
    bevelSize: 10,
    bevelThickness: 10
};
var triangleShape = new THREE.Shape();
triangleShape.moveTo(  0, -50 );
triangleShape.lineTo(  -50, 50 );
triangleShape.lineTo( 50, 50 );
triangleShape.lineTo(  0, -50 );

var extrude = new THREE.Mesh(new THREE.ExtrudeGeometry(triangleShape, extrudeSettings), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
extrude.rotation.y = Math.PI / 2;
extrude.position.x = -300;
extrude.position.y = 150;
extrude.position.z = 300;
extrude.castShadow = extrude.receiveShadow = true;
this.scene.add(extrude);

ExtrudeBufferGeometry

Constructor

ExtrudeBufferGeometry(shapes, options)

shapes — Shape or an array of shapes.
options — Object that can contain the following parameters.可以包含以下參數的對象。

curveSegments — int. Number of points on the curves. Default is 12.曲線上的點數。默認是12。

steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.在擠壓樣條的深度上細分區段的點數個數。默認值為1。

amount — int. Depth to extrude the shape. Default is 100.深度擠壓成形。默認是100。

bevelEnabled — bool. Apply beveling to the shape. Default is true.將斜面涂在形狀上。默認是正確的。

bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.斜角的形狀有多深。默認是6。

bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.斜面延伸的形狀輪廓的距離。默認是斜面- 2。

bevelSegments — int. Number of bevel layers. Default is 3.斜層。默認是3。

extrudePath — THREE.CurvePath. A 3D spline path along which the shape should be extruded (creates Frames if frames aren"t defined).一個三維的樣條路徑，在這個過程中，形狀應該被擠壓出來(如果沒有定義幀，就會創建幀)。

frames — An object containing arrays of tangents, normals, binormals for each step along the extrudePath.一種包含有切線、法線、雙氣門的對象，用于每一步的擠壓。

UVGenerator — Object. object that provides UV generator functions提供UV發生器功能的對象

This object extrudes a 2D shape to a 3D geometry.這個物體將二維形狀擠壓到三維幾何圖形中。
When creating a Mesh with this geometry, if you"d like to have a separate material used for its face and its extruded sides, you can use an array of materials. The first material will be applied to the face; the second material will be applied to the sides.如果你想要一個多帶帶的材料用于它的面和它的擠壓面，你可以使用一系列材料。第一種材料將應用于面部;第二種材料將被應用到兩邊。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90610.html

WebGL three.js學習筆記自定義頂點建立幾何體

摘要：自定義頂點建立幾何體與克隆本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，也是可以的。并且不僅要更新頂點，還要更新線條的連接方式，否則是沒有效果的。自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的。基本效果...

joyvw 2019-08-23 17:06 評論0 收藏0
three.js 實現立體幾何的文本標簽

摘要：最近在做一個基于實現立體幾何的項目，碰到一個問題，如何給球體加上文字標簽，探索了幾種實現方法。最近在做一個基于three.js實現立體幾何的項目，碰到一個問題，如何給球體加上文字標簽，探索了幾種實現方法。二維文字標簽 1.通過CSS2DObject創建二維對象 var earthDiv = document.createElement( div ); earthDiv.class...

Hancock_Xu 2019-08-23 18:38 評論0 收藏0
看完這篇，你也可以實現一個360度全景插件

摘要：兩種相機的區別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。上面的圖很清楚的解釋了兩種相機的區別右側是正交投影相機他不具有透視效果，即物體的大小不受遠近距離的影響，對應的是投影中的正交投影。導讀本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發一個功能齊全的全景插件。我們先來看一下插件的效果： showImg(https://user...

Michael_Lin 2019-05-23 16:25 評論0 收藏0
看完這篇，你也可以實現一個360度全景插件

摘要：導讀本文從繪圖基礎開始講起，詳細介紹了如何使用開發一個功能齊全的全景插件。兩種相機的區別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。導讀本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發一個功能齊全的全景插件。我們先來看一下插件的效果： showImg(https://segmentfault.com/img/remote/...

XiNGRZ 2019-08-23 17:16 評論0 收藏0