Three.js : 创建一个直角三棱柱答案

【问题标题】：Three.js : Creating a right triangular prismThree.js : 创建一个直角三棱柱
【发布时间】：2015-01-27 09:54:01
【问题描述】：

我正在尝试创建一个直角三棱柱。

到目前为止，这是我的代码：

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);

我能够得到我想要的，但我想知道是否有任何其他好的解决方案来获得直角三棱镜。

【问题讨论】：

标签： javascript math three.js

【解决方案1】：

创建类

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 );

例如here

【讨论】：

【解决方案2】：

我喜欢@Almaz Vildanov 的解决方案。效果很好。由于我使用 typescript，我将类定义移植到 .ts：

import {ExtrudeGeometry, Shape, Vector2} from "three";

class PrismGeometry extends ExtrudeGeometry {
  constructor(vertices: Vector2[], height) {
    super(new Shape(vertices), {depth: height, bevelEnabled: false});
  }
}

示例使用（如@Almaz Vildanov 的原版，但可能因为导入而省略了三个）：

var A = new Vector2( 0, 0 );
var B = new Vector2( 30, 10 );
var C = new Vector2( 20, 50 );

var height = 12;                   
var geometry = new PrismGeometry( [ A, B, C ], height ); 

var material = new MeshPhongMaterial( { color: 0x00b2fc, specular: 0x00ffff, shininess: 20 } );

var prism1 = new Mesh( geometry, material );
prism1.rotation.x = -Math.PI  /  2;

scene.add( prism1 );

【讨论】：