Three.js:创建一个直角三棱镜 [英] Three.js : Creating a right triangular prism
本文介绍了Three.js:创建一个直角三棱镜的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个直角三棱镜.
I'm trying to create a right triangular prism.
到目前为止,这是我的代码:
Here is my code so far :
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 1.2));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.5, 1.2));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.5, 1.2));
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
triangleGeometry.faces.push(new THREE.Face3(3, 4, 5));
// Points 1,4,3 and 6 form a rectangle which I'm trying to construct using triangles 0,2,5 and 0,3,5
triangleGeometry.faces.push(new THREE.Face3(0, 2, 5));
triangleGeometry.faces.push(new THREE.Face3(0, 3, 5));
var triangleMaterial = new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleMesh.position.set(1, 0.0, 0.0);
scene.add(triangleMesh);
我能够得到想要的东西,但是我想知道是否还有其他好的解决方案来获得直角三棱镜.
I'm able to get what I want, but I want to know if there is any other good solution to get a right triangular prism.
推荐答案
创建课程
PrismGeometry = function ( vertices, height ) {
var Shape = new THREE.Shape();
( function f( ctx ) {
ctx.moveTo( vertices[0].x, vertices[0].y );
for (var i=1; i < vertices.length; i++) {
ctx.lineTo( vertices[i].x, vertices[i].y );
}
ctx.lineTo( vertices[0].x, vertices[0].y );
} )( Shape );
var settings = { };
settings.amount = height;
settings.bevelEnabled = false;
THREE.ExtrudeGeometry.call( this, Shape, settings );
};
PrismGeometry.prototype = Object.create( THREE.ExtrudeGeometry.prototype );
示例用途
var A = new THREE.Vector2( 0, 0 );
var B = new THREE.Vector2( 30, 10 );
var C = new THREE.Vector2( 20, 50 );
var height = 12;
var geometry = new PrismGeometry( [ A, B, C ], height );
var material = new THREE.MeshPhongMaterial( { color: 0x00b2fc, specular: 0x00ffff, shininess: 20 } );
var prism1 = new THREE.Mesh( geometry, material );
prism1.rotation.x = -Math.PI / 2;
scene.add( prism1 );
示例此处
这篇关于Three.js:创建一个直角三棱镜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文