Multiple size and color in a single extrusion

Shen · April 23, 2018, 9:28pm

I’m trying to achieve the following effect with three.js in 3d for a visualizer for 3d printing. I need to be able to gradually change the color and the size(or shape) of the extrusion along a single extruded path. It is possible?
zKWKaRJjybNEDzGS9kGa9C8JcTxaRRqIUZwz3-iuHyo

Mugen87 · April 24, 2018, 7:51am

How do you generate your geometry right now? With THREE.Shape and THREE.ExtrudeBufferGeometry? Changing the size of the extrusion is only possible if you recreate the geometry (which is an expensive process). Besides, the built-in geometries don’t generate a color attribute which could be useful in your case.

So it seems you have to generate these data and the respective changes by yourself.

Shen · April 24, 2018, 8:18am

Thank you for the information. Yes, those are the functions I’m using. Can you point me to the functions I should be looking into to generate the data? I’m completely new to three.js and 3d graphics.

Mugen87 · April 24, 2018, 8:43am

There are no functions for this. You have to write this code by yourself.

It will be not trivial to implement something like this under these circumstances. Maybe you start with generating a color attribute for your extrude geometry. You can study the official examples to see how this is done. For example:

github.com

mrdoob/three.js/blob/ba4489ded66212ac9e6d3017a6bb856023bd026f/examples/webgl_interactive_buffergeometry.html#L188


      
          					colors[ i + 5 ] = color.b;
          
          					colors[ i + 6 ] = color.r;
          					colors[ i + 7 ] = color.g;
          					colors[ i + 8 ] = color.b;
          
          				}
          
          				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
          				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
          				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
          
          				geometry.computeBoundingSphere();
          
          				var material = new THREE.MeshPhongMaterial( {
          						color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
          						side: THREE.DoubleSide, vertexColors: THREE.VertexColors
          				} );
          
          				mesh = new THREE.Mesh( geometry, material );
          				scene.add( mesh );

Topic		Replies	Views
How to make an extrude geometry same color (front & back)? Questions extrude-geometry	4	1068	August 20, 2021
Extrusion with varying heights Questions geometry , extrude-geometry	5	2454	December 27, 2020
Simple Rectangular Geometry Extrusion (Anyone?) Questions geometry , extrude-geometry	19	11372	June 19, 2020
Extrude Geometry, side material separate from front and rear? Questions svg , svg-loader , extrude-geometry	3	1820	November 7, 2021
Smooth shading and vertex colors with ExtrudeBufferGeometry Questions materials , buffergeometry , vertex-colors	5	2879	March 23, 2022

Multiple size and color in a single extrusion

Related topics