Developing a right triangular prism with Three.js

Question

Developing a right triangular prism with Three.js

I am working on creating a right triangular prism.

Here is the current code I have:

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 create a rectangle, aiming to create it 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 have achieved the desired outcome, but I am curious to explore other possible solutions for creating a right triangular prism.

javascript math three.js

Answer 1

Answer №1

Construct a New Class

PrismShape = function ( vertices, height ) {

    var Shape = new THREE.Shape();

    ( function createShape( 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 );

};

PrismShape.prototype = Object.create( THREE.ExtrudeGeometry.prototype );

Usage example

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 PrismShape( [ 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 );

Demo available here

Answer 2

Construct a New Class

PrismShape = function ( vertices, height ) {

    var Shape = new THREE.Shape();

    ( function createShape( 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 );

};

PrismShape.prototype = Object.create( THREE.ExtrudeGeometry.prototype );

Usage example

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 PrismShape( [ 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 );

Demo available here

Answer 3

Answer №2

I found @Almaz Vildanov's solution to be really helpful. It works perfectly for my needs. As a TypeScript user, I decided to convert the class definition into a .ts file:

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

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

Here's an example of how you can use it (similar to @Almaz Vildanov's original example, but without the need for THREE due to imports):

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

Answer 4

I found @Almaz Vildanov's solution to be really helpful. It works perfectly for my needs. As a TypeScript user, I decided to convert the class definition into a .ts file:

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

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

Here's an example of how you can use it (similar to @Almaz Vildanov's original example, but without the need for THREE due to imports):

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

Developing a right triangular prism with Three.js

Answer №1

Answer №2

Similar questions

Transmitting an array through Socket.IO using the emit() method

Ways to effectively test a custom hook event using Enzyme and Jest: A guide on testing the useKeyPress hook

Error encountered when attempting to create an index in ElasticSearch due to

Not adhering to directive scope when transclusion is used, despite explicit instructions to do so

Enhance User Experience with a Responsive Website Dropdown Menu

Is there an issue with .addClass not working on imported HTML from .load in jQuery?

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

Cannot find the appended element in an AJAX call using jQuery

Learn how to showcase video information in a vue.js template

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

How can a ThreeJS cube be illuminated by a point light with various texture faces using a canvas renderer?

Angular and AngularJS directives work together to indicate events on a line chart

Are the props.children handled differently within the <Route> component compared to other React components?

Angular's jQuery timepicker allows users to easily select a

What is the syntax for accessing an element within an array in a function?

Error encountered: Unexpected token when defining inline style in React

Baffled by the data visualization produced by Google Chart using information from

Utilize various addMethods on a field in the event a radio button is chosen through the jQuery validator plugin

Authenticating child in Azure JWT token using the kid value hardcoded

Building a custom DSL expression parser and rule engine