three.js中几何对象

sshe 发布于2019-08-21 18:35 / 3100人阅读

摘要：和几何对象是用必要的数据点顶点面等来描述三维模型。在挤压样条的深度上细分区段的点数个数。一个三维的样条路径，在这个过程中，形状应该被挤压出来如果没有定义帧，就会创建帧。提供发生器功能的对象这个物体将二维形状挤压到三维几何图形中。

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.如果你想要一个多带带的材料用于它的面和它的挤压面，你可以使用一系列材料。第一种材料将应用于面部;第二种材料将被应用到两边。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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