当前位置:  开发笔记 > 编程语言 > 正文

如何在Three.js中拉伸圆几何?

如何解决《如何在Three.js中拉伸圆几何?》经验,为你挑选了1个好方法。

如何在Three.js中拉伸四分之一圆几何(THREE.CircleGeometry)?

我这样创建四分之一圈:

var circle = new THREE.Mesh( 
    new THREE.CircleGeometry( 25, 32, 0, Math.PI/2 ), 
    new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide })
);
scene.add( circle );

但是我希望它不只是在平面上拉伸,我只是找到了THREE.ExtrudeGeometry,但不知道是否可以将其用于我的目的或如何使用。



1> jered..:

这是一个如何拉伸形状的示例,在这种情况下为沿直线的三角形。这几乎是Shape类的目的。https://jsfiddle.net/wb412ymk/

// Create a 2D triangular shape
// The Shape() class has methods for drawing a 2D shape
var triangleShape = new THREE.Shape();
triangleShape.moveTo(-2, -2);
triangleShape.lineTo(0, 2);
triangleShape.lineTo(2, -2);
triangleShape.lineTo(-2, -2);

// Create a new geometry by extruding the triangleShape
// The option: 'amount' is how far to extrude, 'bevelEnabled: false' prevents beveling
var extrudedGeometry = new THREE.ExtrudeGeometry(triangleShape, {amount: 5, bevelEnabled: false});

// Geometry doesn't do much on its own, we need to create a Mesh from it
var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({color: 0xff0000}));
scene.add(extrudedMesh);

这里的关键概念:

2D形状可以是可以使用Shape类绘制的任何形状

使用数量选项并禁用bevelEnabled,ExtrudeGeometry()可以轻松地沿直线拉伸。如果需要复杂的拉伸路径,请尝试SplineCurve3。

ExtrudeGeometry()返回原始几何,换句话说就是Vector3点的数组。在您使用它与材质一起构造网格之前,它并不会做很多事情。

在THREE.js文档中阅读更多信息:

https://threejs.org/docs/#api/extras/core/Shape

https://threejs.org/docs/#api/geometries/ExtrudeGeometry

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有