This is the right triangle shape which is made by extrude geometry. So i want to implement the different color for each faces. But i get the difficulties because it is made by extrude geometry, it gives only two face main faces and extrude faces. So please help me to implement this. And is it possible to implement the different color for each face of the shape made by the extrude geometry?
1 Like
Do you need something like this?
You can create the geometry with it: Construction of frames with contour/profile
1 Like
Yes i want to implement like this.
Thank you for your response
You can also create a self-defined geometry. You only need 6 easy-to-define points and a total of 8 triangles. This is similar to these examples
BufferGeometryIndexed
BufferGeometryNonIndexed
from the Collection of examples from discourse.threejs.org .
@hofk
I am successfully creating the right triangular shape. So when I apply color for the shape, it is working but when i apply the color for each face It is not woking. Please see the bellow code:
import * as THREE from ‘three’;
import { OrbitControls } from “three/examples/jsm/controls/OrbitControls.js”;
// Create a scene
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;
// Create a renderer and append it to the DOM
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
// Define the vertices of a right triangle
const vertices = new Float32Array([
// Front face
-2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, -2.5,
2.5, -2.5, 2.5,
// Back face
-2.5, 2.5, 2.5,
-2.5, -2.5, 2.5,
-2.5, -2.5, -2.5,
2.5, -2.5, -2.5,
// Top face
-2.5, -2.5, 2.5,
2.5, -2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, -2.5, 2.5,
// Bottom face
2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,
// Right face
-2.5, 2.5, 2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,
-2.5, -2.5, -2.5,
// Left face
-2.5, 2.5, 2.5,
-2.5, -2.5, -2.5,
-2.5, -2.5, 2.5,
-2.5, 2.5, 2.5,
]);
// Create a BufferGeometry and set the attributes
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(‘position’, new THREE.BufferAttribute(vertices, 3)); // 3 values per vertex
// Create a material for the rightTriangle
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// const materials = [
// new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red
// new THREE.MeshBasicMaterial({ color: 0x00ff00}), // Green
// new THREE.MeshBasicMaterial({ color: 0x0000ff}), // Blue
// new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow
// new THREE.MeshBasicMaterial({ color: 0xff00ff }) // Magenta
// ];
// Create the mesh using the geometry and material
const rightTriangle = new THREE.Mesh(geometry, material);
// Add the rightTriangle to the scene
scene.add(rightTriangle);
// Create the animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate the cube for a simple animation
// rightTriangle.rotation.x += 0.01;
// rightTriangle.rotation.y += 0.01;
controls.update();
// Render the scene
renderer.render(scene, camera);
}
animate();
The vertices are not correct. You need 3 x 3 values per triangle, whereby the rotation must be counterclockwise when viewed from the outside.
<!DOCTYPE html>
<head>
<title>Prism</title>
<meta charset="utf-8" />
<style>
body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body> </body>
<script type="module">
import * as THREE from "../jsm/three.module.167.js";
import { OrbitControls } from "../jsm/OrbitControls.167.js";
// Create a scene
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;
// Create a renderer and append it to the DOM
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
// Define the vertices of a right triangle
const vertices = new Float32Array([
// Front face
-2.5, -2.5, 2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, 2.5,
// Back face
-2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, -2.5,
/* **** Needs to be corrected ***************************
// Top face
-2.5, -2.5, 2.5,
2.5, -2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, -2.5, 2.5,
// Bottom face
2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,
// Right face
-2.5, 2.5, 2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,
-2.5, -2.5, -2.5,
// Left face
-2.5, 2.5, 2.5,
-2.5, -2.5, -2.5,
-2.5, -2.5, 2.5,
-2.5, 2.5, 2.5,
*/
]);
// Create a BufferGeometry and set the attributes
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // 3 values per vertex
//geometry.addGroup( 0,
// Create a material for the rightTriangle
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // , wireframe: true
//const materials = [
//new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red
//new THREE.MeshBasicMaterial({ color: 0x00ff00}), // Green
//new THREE.MeshBasicMaterial({ color: 0x0000ff}), // Blue
//new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow
//new THREE.MeshBasicMaterial({ color: 0xff00ff }) // Magenta
//];
// Create the mesh using the geometry and material
const rightTriangle = new THREE.Mesh(geometry, material);
// Add the rightTriangle to the scene
scene.add(rightTriangle);
// Create the animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate the cube for a simple animation
//rightTriangle.rotation.x += 0.01;
//rightTriangle.rotation.y += 0.01;
controls.update();
// Render the scene
renderer.render(scene, camera);
}
animate();
</script>
</html>
It makes sense to use material groups for the different materials.
.groups : Array
Split the geometry into groups, each of which will be rendered in a separate WebGL draw call. This allows an array of materials to be used with the geometry.
Each group is an object of the form:
{ start: Integer, count: Integer, materialIndex: Integer }
where start specifies the first element in this draw call – the first vertex for non-indexed geometry, otherwise the first triangle index. Count specifies how many vertices (or indices) are included, and materialIndex specifies the material array index to use.
Use .addGroup to add groups, rather than modifying this array directly.
see three.js docs
1 Like
Just came across this post again and noticed that there is no solution yet.
This is one possibility:
The code:
<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/6 -->
<head>
<title>Prism</title>
<meta charset="utf-8" />
<style>
body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body></body>
<script type="module">
import * as THREE from "../jsm/three.module.172.js";
import { OrbitControls } from "../jsm/OrbitControls.172.js";
const scene = new THREE.Scene( );
const axesHelper = new THREE.AxesHelper( 2.5 );
scene.add( axesHelper );
const camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 20;
const renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
// define the vertices
// bottom
const A = [ -2.5, -2.5, 2.5 ];
const B = [ 2.5, -2.5, 2.5 ];
const C = [ 2.5, -2.5, -2.5 ];
const D = [ -2.5, -2.5, -2.5 ];
// top
const E = [ -2.5, 2.5, 2.5 ];
const F = [ -2.5, 2.5, -2.5 ];
const vert = [];
function pushV( V1, V2, V3 ) {
vert.push( V1[ 0 ], V1[ 1 ], V1[ 2 ] );
vert.push( V2[ 0 ], V2[ 1 ], V2[ 2 ] );
vert.push( V3[ 0 ], V3[ 1 ], V3[ 2 ] );
}
// Front face
pushV( A, B, E );
// Back face
pushV( C, D, F );
// Left faces
pushV( A, E, F );
pushV( A, F, D );
// Bottom faces
pushV( A, C, B );
pushV( A, D, C );
// Top faces
pushV( E, B, C );
pushV( E, C, F );
const vertices = new Float32Array( vert );
const geometry = new THREE.BufferGeometry( );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); // 3 values per vertex
// start, count, material Index
geometry.addGroup( 0, 3, 0 ); // 0 Front
geometry.addGroup( 3, 3, 1 ); // 1 Back
geometry.addGroup( 6, 6, 2 ); // 2 Left
geometry.addGroup( 12, 6, 3 ); // 3 Top
geometry.addGroup( 18, 6, 4 ); // 3 Bottom
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 , wireframe: true } );
const materials = [
new THREE.MeshBasicMaterial( { color: 0xff0000 } ), // Red
new THREE.MeshBasicMaterial( { color: 0x00ff00} ), // Green
new THREE.MeshBasicMaterial( { color: 0x0000ff} ), // Blue
new THREE.MeshBasicMaterial( { color: 0xffff00 } ), // Yellow
new THREE.MeshBasicMaterial( { color: 0xff00ff } ) // Magenta
];
const prismWire = new THREE.Mesh( geometry, material );
const prism = new THREE.Mesh( geometry, materials );
scene.add( prism, prismWire );
function animate( ) {
requestAnimationFrame(animate);
// Rotate the cube for a simple animation
prism.rotation.x += 0.01;
prism.rotation.y += 0.01;
controls.update( );
renderer.render(scene, camera);
}
animate();
</script>
</html>