Create a simple three-sided shape using Three.js

Question

Create a simple three-sided shape using Three.js

Currently, I am working on familiarizing myself with three.js in order to create a basic triangle. However, despite my efforts, the code I have written does not seem to be functioning properly.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 10;


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.Geometry();
geometry.vertices= [new THREE.Vector3(2,1,0), new THREE.Vector3(1,3,0), new THREE.Vector3(3,4,0)]; 
geometry.faces = [new THREE.Face3(0,1,2)];
var mesh= new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ color: 0xffff00 }) );
scene.add(mesh);


renderer.render(scene, camera);

I'm having trouble figuring out where I went wrong with my implementation. Any advice would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

Creating 3D Shapes

var geom = new THREE.Geometry();
var vertex1 = new THREE.Vector3(0, 0, 0);
var vertex2 = new THREE.Vector3(30, 0, 0);
var vertex3 = new THREE.Vector3(30, 30, 0);
var triangle = new THREE.Triangle(vertex1, vertex2, vertex3);
var normalVector = triangle.normal();
geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);
geom.faces.push(new THREE.Face3(0, 1, 2, normalVector));
var mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
scene.add(mesh);

Simple Outline Drawing

 var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
geometry.vertices.push(new THREE.Vector3(2, 30, 2));
geometry.vertices.push(new THREE.Vector3(30, 2, 2));
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));

var line = new THREE.Line(
  geometry,
  new THREE.LineBasicMaterial({ color: 0x00ff00 })
);
scene.add(line);

https://i.sstatic.net/pDMZY.png

Answer 2

Creating 3D Shapes

var geom = new THREE.Geometry();
var vertex1 = new THREE.Vector3(0, 0, 0);
var vertex2 = new THREE.Vector3(30, 0, 0);
var vertex3 = new THREE.Vector3(30, 30, 0);
var triangle = new THREE.Triangle(vertex1, vertex2, vertex3);
var normalVector = triangle.normal();
geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);
geom.faces.push(new THREE.Face3(0, 1, 2, normalVector));
var mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());
scene.add(mesh);

Simple Outline Drawing

 var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));
geometry.vertices.push(new THREE.Vector3(2, 30, 2));
geometry.vertices.push(new THREE.Vector3(30, 2, 2));
geometry.vertices.push(new THREE.Vector3(-30, 2, 2));

var line = new THREE.Line(
  geometry,
  new THREE.LineBasicMaterial({ color: 0x00ff00 })
);
scene.add(line);

https://i.sstatic.net/pDMZY.png

Answer 3

Answer №2

Isn't it interesting how challenging it was to locate an up-to-date solution? With Geometry being deprecated in recent Three.js versions, I discovered that utilizing the Shape primitive is the way to go when drawing a plane triangle.

const shape = new THREE.Shape();

const x = 0;
const y = 0;

shape.moveTo(x - 2, y - 2);
shape.lineTo(x + 2, y - 2);
shape.lineTo(x, y + 2);

const TriangleGeometry = new THREE.ShapeGeometry(shape);

Referenced from

Answer 4

Isn't it interesting how challenging it was to locate an up-to-date solution? With Geometry being deprecated in recent Three.js versions, I discovered that utilizing the Shape primitive is the way to go when drawing a plane triangle.

const shape = new THREE.Shape();

const x = 0;
const y = 0;

shape.moveTo(x - 2, y - 2);
shape.lineTo(x + 2, y - 2);
shape.lineTo(x, y + 2);

const TriangleGeometry = new THREE.ShapeGeometry(shape);

Referenced from

Answer 5

Answer №3

When adding vertices to a face, pay attention to the order in which you add them. If the order is clockwise, the surface's normal vector will point downwards, making the triangle invisible from your camera positioned above. However, if the order is counterclockwise, the normal will face towards your camera.

To ensure visibility, consider changing:

geometry.faces = [new THREE.Face3(0,1,2)];

To:

geometry.faces = [new THREE.Face3(1,0,2)];

An additional tip is to use the 'side' argument, allowing the face material to be applied on both sides of the face.

new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide };

Answer 6

When adding vertices to a face, pay attention to the order in which you add them. If the order is clockwise, the surface's normal vector will point downwards, making the triangle invisible from your camera positioned above. However, if the order is counterclockwise, the normal will face towards your camera.

To ensure visibility, consider changing:

geometry.faces = [new THREE.Face3(0,1,2)];

To:

geometry.faces = [new THREE.Face3(1,0,2)];

An additional tip is to use the 'side' argument, allowing the face material to be applied on both sides of the face.

new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide };

Answer 7

Answer №4

This code snippet provides a solution for 2023 and can also be utilized for 3D vertex coordinates.

const points = new Float32Array([
    -1.0, -1.0, 1.0,    // representing vertex 1
    1.0, -1.0, 1.0,     // representing vertex 2
    1.0, 1.0, 1.0,      // representing vertex 3
]);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(points, 3));
const material = new THREE.MeshBasicMaterial({ color: 'red' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Version r150

Answer 8

This code snippet provides a solution for 2023 and can also be utilized for 3D vertex coordinates.

const points = new Float32Array([
    -1.0, -1.0, 1.0,    // representing vertex 1
    1.0, -1.0, 1.0,     // representing vertex 2
    1.0, 1.0, 1.0,      // representing vertex 3
]);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(points, 3));
const material = new THREE.MeshBasicMaterial({ color: 'red' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Version r150

Create a simple three-sided shape using Three.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

customize Form Modal Bootstrap with AJAX Chained Dropdown for pre-selected options

What is the best way to validate a form using JavaScript?

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

Renewing Firebase User Token in Angular Using HTTP Interceptor

Is there a way to showcase a PHP code snippet within JavaScript?

The registration feature powered by JQuery is experiencing technical difficulties and not functioning

Is there a way for me to manage the appearance of the printed document's layout?

use d3 to dynamically color links in a react-force-graph based on their value

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

ng-view is the culprit behind the website's fatal error

Unlimited rotation - using setInterval function

Return a response from the controller method without using the express response object

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

Managing the orientation of the print grid panel in ext.net

Mastering advanced authentication with Passport and the JwtStrategy

Prioritizing reusability and scalability in the design of Vue.js application architecture

Creating a query string using a jQuery array that contains multiple values for a query variable

Modify route title and component if user is authenticated

Reorganize the layout of elements based on the array of element IDs

Is there a way to automatically retrieve CSV data using ashx on a web page?