# Addon to create special / extended geometries

**URL:** <https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855>\
**Category:** Resources\
**Tags:** buffergeometry, addon, geometry\
**Created:** [February 14, 2018, 5:36pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855 "2018-02-14T17:36:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 14, 2018, 5:36pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/1 "2018-02-14T17:36:54Z")

</div>

updated NOTE:  
_Modular bundling of multiple geometry definitions has some advantages, but also disadvantages if the overview and maintainability suffers._  
_Therefore I created newer geometry creations in extra files and collect them on Github at_ [GitHub - hofk/threejsResources: Resources for three.js](https://github.com/hofk/threejsResources) _There are also extra posts about it here in the forum._

* * *

**The THREEg addon is used to create special / extended geometries.**

* * *

![20180208-2112-21658](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4fe96785302d7a49ac90e298d04001ae9c549531.png)

The addon generates non indexed BufferGeometries. This allows an explosion representation.  
The first geometry in THREEg is an enlarged sphere. It is made up of eight parts. Multi material is supported.

```
	geometry = new THREE.BufferGeometry();
	geometry.createMagicSphere = THREEg.createMagicSphere; // insert the methode from THREEg.js
	geometry.createMagicSphere( parameters ); // apply the methode
	
	// mesh
	mesh = new THREE.Mesh( geometry, materials );
        scene.add( mesh );

```

Example:

```
geometry = new THREE.BufferGeometry();
geometry.createMagicSphere = THREEg.createMagicSphere; // insert the methode from THREEg.js
geometry.createMagicSphere( {
  
	equator: 8,
	contourmode: 'bezier',
	parts: [1, 1, 1, 0, 0, 1, 1, 1],
	radius: function( t ){ return 1.2 * ( 0.3 + Math.abs( Math.sin( 0.4 * t ) ) ) },
	pointX: function( t ){ return 0.6 * ( 1 + Math.sin( 0.4 * t) ) },
	pointY: function( t ){ return 0.4 * ( 1 + Math.sin( 0.3 * t) ) },
  
 } ); 

```

![20180214-1808-07909](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3790d249dd741d77668f49beee6c17d8d5a9bdb6.png)

Since there are not as many parameters as THREEf and THREEp, I created a very simple sandbox.  
On my side [http://sandbox.threejs.hofk.de/](http://sandbox.threejs.hofk.de/) or directly [http://sandboxthreeg.threejs.hofk.de/](http://sandboxthreeg.threejs.hofk.de/)  
Here you can add any number of parameter variants if you save the page locally. If you use Firefox, you get the textures locally without any manipulations. It is possible that parameters may still be retrofitted.

 ![20180214-1832-35636](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/274695eed16b1760c31e5c226a6fc34b3af9af01.png)

Further details are given on GitHub. [GitHub - hofk/THREEg.js: three.js addon to create special or extended geometries. The addon generates indexed or non indexed BufferGeometries.](https://github.com/hofk/THREEg.js)

_More detailed information unfortunately only in German on_  
\_[http://xprofan.net/intl/de/php,html,js/3d-grafik-webgl-mit-three-js/?q=94489&pg=-1#94489\_](http://xprofan.net/intl/de/php,html,js/3d-grafik-webgl-mit-three-js/?q=94489&pg=-1#94489_)

The next geometry in THREEg will be a magic box.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [February 15, 2018, 8:34pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/2 "2018-02-15T20:34:48Z")

</div>

What would one use this for?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 7, 2018, 1:55pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/3 "2018-03-07T13:55:35Z")

</div>

**The MagicBox**

![20180305-2023-09918](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/7/75684a9e79098bebcf9051a71945f5ff10a30cbe.png)

… is an enlarged box. It is made up of 26 parts. Multi material is supported.

```
parameters = { 
    smoothness: 12, 
    contourmode: 'bezier', 
    radius: function ( t ){ return 0.35 }, 
    pointX: function ( t ){ return 0.6 }, 
    pointY: function ( t ){ return 2.4 }, 
}

```

* * *

Some rounded boxes I know of are not completely symmetrical.

(1) [https://discourse.threejs.org/t/round-edged-box/1402](https://discourse.threejs.org/t/round-edged-box/1402)  
(2) [https://discourse.threejs.org/t/round-edged-box-2/1448](https://discourse.threejs.org/t/round-edged-box-2/1448)  
(3) [https://discourse.threejs.org/t/round-edged-box-3/1481](https://discourse.threejs.org/t/round-edged-box-3/1481)  
(4) [http://webglworkshop.com/demos/fillet/filletBox.html](http://webglworkshop.com/demos/fillet/filletBox.html)  
(5) [https://gam0022.net/webgl/#misc\_superellipsoid](https://gam0022.net/webgl/#misc_superellipsoid) ( completely symmetrical ? )

To the question (at (2)) of prisoner849 I had shown the code of a completely symmetrical corner. He thanked me in German. While mind kinda melted from onother. I hope not totally, because I’m not the fastest. It took me a long time, but now there is a MagicBox and in simple form it is also a Round-edged box. With totally symmetrical corners.

![20180307-0952-00802](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/2/2d6c3d532a7070310b07a117a8649c5705875ffb.png)

The segments are completely symmetrically divided into four faces. There is a center point (waffle point).

![20180307-1003-27668](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/5/5516298db1c6b86497cbede3241b87666e55c24f.png)

There are two exploded view modes for this box. Along the normal vectors or away from the centre (centre ray). The last variant is certainly the correct mode. The four faces of the segment are held together. The middle vertex is used for calculation.

The first geometry in the THREEg addon, the MagicSphere consists of 8 parts and these also form the corners of the box.

However, the code is stored independently. The Sphere was updated. There is now also explodemode ‘center’ and ‘normal’.

Check out GitHub [https://github.com/hofk/THREEg.js](https://github.com/hofk/THREEg.js)  
Try it on [http://sandbox.threejs.hofk.de/](http://sandbox.threejs.hofk.de/) or [http://sandboxthreeg.threejs.hofk.de/](http://sandboxthreeg.threejs.hofk.de/)  
Some examples react to mouse movement. For this I have manipulated function(t){} in parameters.

* * *

An application for beautiful design. _I’m not an artist!_

![20180307-1448-39182](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/107697268ca95f102decd8331b33758b0086cfcd.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [November 27, 2018, 9:11am UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/4 "2018-11-27T09:11:15Z")

</div>

_I’ve added another special geometry:_  
**Labyrinth geometry 3D and 2D**

Based on [How to remove interior faces while keeping exterior faces untouched? - #24 by Mardonis](https://discourse.threejs.org/t/how-to-remove-interior-faces-while-keeping-exterior-faces-untouched/4869/24)

It is realized as a single non-indexed BufferGeometry.  
Multi-material is supported and can be selected for each storey individually.

![20181126-1818-19872](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c8f3708d7b018189f839f2d938357f0de03fea57.png)

The example is on [http://sandboxthreeg.threejs.hofk.de/](http://sandboxthreeg.threejs.hofk.de/)

```
function createLabyrinth( dim, design, m ) {

/* parameters:  
 dim: '2D' or '3D'
 design : arays as in the examples
 m: arays for material index as in the examples

 */ ... }

```

(Description of the design in THREEg.js section Labyrinth-3D-2D. Unlike the initial solution, Material Index for 2D does not require a double square bracket. )

Enjoy it 🙂

It will be completed on Github.

```
// ..................................... Labyrinth-3D-2D .......................................

/*
	icons design 3D
	The characters on the keyboard have been chosen so that they roughly reflect the form.
	
	wall description
	sides l f r b is left front right back, with floor and roof
	
	char sides
	G	l f r b can only be achieved by beaming
	M	l f r
	C	b l f
	3	f r b
	U	l b r
	H	l r
	:	f b
	F	l f
	7	f r
	L	l b
	J	b r
	I	l 
	1	r
	-	f
	.	b
	
	without walls
	since extra character not possible on the wall
	* roof and floor
	^ roofless
	v floorless
	x roofless and floorless
	
	with four side walls but roofless and floorless
	#
	
	// _____________________________________________
	
	// EXAMPLES:
	
	var design3D = [
	// upper storey first
	//23456789.......
	[
	' M G', // 1
	' H ', // 2
	' H ', // 3
	' F-*--7 ', // 4
	' I*7**1 ', // 5
	' C:v*L.**:::7 ', // 6
	' L*...J U ', // 7
	' H ', // 8
	' L::::3 ' // 9	
	],[
	' ', // 1
	' ', // 2
	' G ', // 3
	' ', // 4
	' ', // 5
	' # ', // 6
	' ', // 7
	' ', // 8
	' ' // 9	
	],[
	'F::3 ', // 1
	'H F:::::7 ', // 2
	'H H H ', // 3
	'H F-*-7 H ', // 4
	'H I **** :::1 ', // 5
	'L::x***1 H ', // 6
	' I...J H ', // 7
	' H F:7 L:::7', // 8
	' L:::J L:::::J' // 9	
	]];
	
	var materialIndex = [
	// upper storey first
	// px, nx, py, ny, pz, nz 
	[0, 1, 2, 3, 4, 5], 
	[0, 0, 1, 1, 2, 2],
	[6, 7, 6, 7, 6, 7],
	];
	
//--------------------------------------------------------------
	
	design 2D 
	only icon + 
	All the neighboring boxes are connected. There is no way out!
	
	var design2D = [ // will be converted to design 3D
	' ++++++++++ ',
	' +++ ++ ++ ',
	' +++ +++ ',
	'++ ++ ++++++++',
	' +++++ + + +',
	' + ++ +++++',
	' ++++ + '
	];
	
	var materialIndex = [
	// px, nx, py, ny, pz, nz 
		0, 1, 2, 3, 4, 5 
	];
		
*/
```

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 15, 2018, 12:34pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/5 "2018-12-15T12:34:04Z")

</div>

Another geometry has been added.

**Line Grid** Easy to design with keyboard characters.  
_The characters on the keyboard have been chosen so that they roughly reflect the form._

![20181214-1349-54425](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3280f15cd8b52a5c36129573549e397e4fecab85.png)

_description:_  
lines l f r b is left front right back

```
char lines
G	l f r b // compatible to labyrinth design
M	l f r
C	b l f
3	f r b
U	l b r
H	l r
:	f b
F	l f
7	f r
L	l b
J	b r
I	l 
1	r
-	f
.	b

special signs
#	Grid with complete squares, equals G
+	All the neighboring squares are connected.

```

The line grid can either be created in the xy-plane, or you can design grids on the sides of a box.

The size of the box is determined by the design by default, but can also be specified as required.  
The length of the first line in the design of each side is decisive for the centering of the design. You can easily change the centering by using blanks at the beginning and end.

If the design results in double lines at one position, the surplus line is eliminated.

See also  
[Easy to design line grids, line labyrinths](https://discourse.threejs.org/t/easy-to-design-line-grids-line-labyrinths/5354)  
[http://threejs.hofk.de/LineGridDesign/LineGridDesign.html](http://threejs.hofk.de/LineGridDesign/LineGridDesign.html)

> **[hofk/THREEg.js](https://github.com/hofk/THREEg.js)**
>
> three. js addon to create special or extended geometries. The addon generates non indexed BufferGeometries. - hofk/THREEg.js

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 1, 2019, 7:30pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/6 "2019-03-01T19:30:42Z")

</div>

One more geometry added.  
The road (see [Create a curved plane surface which dynamically changes its size - #16 by hofk](https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161/16) ) in the THREEg version.

 ![20190301-2016-2450](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3f02ee2104213e9c75582b24ba9bf7f37c5b7ef5.png)

* * *

**Example:**

```
   <!DOCTYPE html>
<!-- see https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161/16 -->
<head>
	<title> RoadMarking </title>
	<meta charset="utf-8" />
	<style>	body { margin: 0;} </style>
</head>
<body> 	

</body>
	<script src="../js/three.min.102.js"></script>
	<script src="../js/OrbitControls.js"></script>
	<script src="../js/THREEg.js"></script>
	
<script>

// @author hofk

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.set( -1, 14, 24 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x11ff33, 1 );	
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement ); 
var controls = new THREE.OrbitControls( camera, renderer.domElement );

var light = new THREE.AmbientLight( 0xffffff ); 
scene.add( light );

var gridHelper = new THREE.GridHelper( 100, 100 );
scene.add( gridHelper );

var curvePoints = [
 -25, 0.2, -25,
 -24, 0.2, -24,
 -4, 2, -9,
 4, 1, -6,
 6, 0, 0,
 -3, 1, 1,
 -11, 0, 6,
 -12, 1, 1,
 -7, 1, -3,
 7, 8, -9,
 13, 2, -12,
];
var lengthSegments = 200;
var trackDistances = [-0.62, -0.6, -0.02, 0.02, 0.6, 0.62];

var g = new THREE.BufferGeometry( );
g.createRoad = THREEg.createRoad;
g.createRoad( curvePoints, lengthSegments, trackDistances );
//g.createRoad( ); // all parameters default

tex = new THREE.TextureLoader().load( 'CentralMarking.png' );
tex.wrapS = THREE.RepeatWrapping;
//tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set( lengthSegments / 2 );

var material = [
	
	new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide, wireframe: true} ),
	new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, wireframe: true} ),
	new THREE.MeshBasicMaterial( { map: tex, side: THREE.DoubleSide, wireframe: true } ),
	new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide} ),
	
];

var mesh = new THREE.Mesh( g, material );
scene.add( mesh );

animate();

//............................

function animate() {

	requestAnimationFrame( animate );	
	renderer.render( scene, camera );
	controls.update();
	
}
</script>

</html>

```

![20190220-0841-12142](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7e19a4a31a63e72e41ef5646447b2445d93c7a14.png) CentralMarking.png

* * *

**Addendum:**

The code has been cleaned up and tangents, normals and binormals are now stored in the geometry.

```
g.t = []; // tangents
g.n = []; // normals
g.b = []; // binormals

```

With this I created a basic application for a road race.

[THREEg.js/RoadRace.html at master · hofk/THREEg.js · GitHub](https://github.com/hofk/THREEg.js/blob/master/examples/RoadRace.html)  
on  
[GitHub - hofk/THREEg.js: three.js addon to create special or extended geometries. The addon generates indexed or non indexed BufferGeometries.](https://github.com/hofk/THREEg.js)

 ![20190304-1709-43288](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b62a97dec80e021b766b06aa5b58669f39849c0e.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 5, 2019, 1:14pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/7 "2019-03-05T13:14:09Z")

</div>

**There’s a bug fix.**

In the graphic above you can see:

![20190305-1339-33128](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/eda095bb3f09b313f39b559bf14caed9e0d7f375.png)

![20190305-1339-48138](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/49e83dd9209964d5a31e778023b05d2656f750d9.png) There were different road widths before.

* * *

➕

Additionally you can now create a wall. There are now

```
g.createWall = THREEEg.createWall;
g.createWall( curvePoints, lengthSegments, sidesDistances, widthDistance, hightDistance );

```

Internally, wall (with up to four sides) and street (area) are implemented with the `buildRoadWall( )` function.

Try there: [http://threejs.hofk.de/WallTHREEg/WallTHREEg.html](http://threejs.hofk.de/WallTHREEg/WallTHREEg.html)

 ![20190319-1735-39810](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/13414e61b700ec6cd76496b4608496050cf1d10d.jpeg)

_Just updated at GitHub._ 🙂

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 29, 2019, 6:31pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/8 "2019-04-29T18:31:30Z")

</div>

**Another geometry.**

Sphere with up to 6 coordinate planes parallel holes. There are two different designs of the faces. The variants:

- completely symmetrical
- efficiently

The geometry is realized as indexed BufferGeometry and supports MultiMaterial.

```
	geometry = new THREE.BufferGeometry();
	
	g.createSphereCut = THREEg.createSphereCut;
        g.createSphereCut( p );

	// mesh
	mesh = new THREE.Mesh( geometry, materials ); // multimaterial array with 8 materials
        scene.add( mesh );

```

From the geometry some values can be used for the connection with other forms.

`g.radius, g.cutRadius[], g.cutSegments[], g.cutDistance[]`

The parameter  
`symmetric // default is false`  
allows the two different designs of the faces.

 ![20190428-2110-46201](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cb1369784db097620e14dc4b6b1446fc125731c4.png)

![20190428-2104-33851](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/89f51427cab28fe12b4e9b131e440f8de2db9eeb.png)

See also [Sphere with up to 6 coordinate planes parallel holes](https://discourse.threejs.org/t/sphere-with-up-to-6-coordinate-planes-parallel-holes/7267)

* * *

_Just updated at GitHub._ 🙂

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [June 16, 2020, 7:07pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/9 "2020-06-16T19:07:31Z")

</div>

The addon [https://github.com/hofk/THREEg.js](https://github.com/hofk/THREEg.js) now also includes versions of ProfiledContourGeometry MultiMaterial

![2020-06-16 21.03.55](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/ff67349cfd8e9d1e2e2ef2774c408fdf32ffc4df.png)

and ProfiledContourUVs.

![2020-06-15 20.36.46](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/802529751d20af0a24b44cd04631ef74fe2a92e1.png)

( see also [ProfiledContourGeometry MultiMaterial](https://discourse.threejs.org/t/profiledcontourgeometry-multimaterial/5801) )

---

<div class="post-metadata">

**Author:** ![buffalo](https://avatars.discourse-cdn.com/v4/letter/b/c57346/32.png) [@buffalo](https://discourse.threejs.org/u/buffalo)\
**Post date:** [August 28, 2020, 12:31am UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/10 "2020-08-28T00:31:44Z")

</div>

Hello, friend.  
I readed the code using THREEg.js to show a road, and now I can show a road by THREEg.js. if I tried to show only 2 road with about 20 points, I can drive in a virtal car and moved on the road smoothly.  
But when I try add about 20 road into my scene with about 200 points. the image will be very slowly. and I can move smoothly.  
Is there anyway to improve it? thanks.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [August 28, 2020, 7:20am UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/11 "2020-08-28T07:20:56Z")

</div>

I don’t know how all your code is structured and can only guess what is happening.

To support multi material I have formed groups.

 ![2020-08-28 08.48.47](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c21f746a9a3979e09ec9b1989b57f69db6f75d46.png)

Very many groups are then a problem for the performance.

I had a similar problem with my showroom. [Jerky camera movement with many objects](https://discourse.threejs.org/t/jerky-camera-movement-with-many-objects/15168)

There I am still in the process of creating a collected geometry for each material I want to use instead of creating groups in a geometry. Independent of the affiliation to design objects. The performance became much better. But this only works if the objects are static, not moving. A road is mostly static.

Another option for the road is probably Instanced Mesh.  
[https://threejs.org/docs/index.html#api/en/objects/InstancedMesh](https://threejs.org/docs/index.html#api/en/objects/InstancedMesh)

I have not yet dealt with this in detail. But there are good examples and experts here in the forum.

[Clipping plane for InstancedBufferGeometry](https://discourse.threejs.org/t/clipping-plane-for-instancedbuffergeometry/18111)  
[Instancing Point Cloud](https://discourse.threejs.org/t/instancing-point-cloud/12280/6)  
[Multiple textures with instanced geometry](https://discourse.threejs.org/t/multiple-textures-with-instanced-geometry/5637)

See also my [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) , e.g.

[https://hofk.de/main/discourse.threejs/2020/AlphabetInstancedMesh/AlphabetInstancedMesh.html](https://hofk.de/main/discourse.threejs/2020/AlphabetInstancedMesh/AlphabetInstancedMesh.html)  
[https://hofk.de/main/discourse.threejs/2020/DynamicallyInstanceCount/DynamicallyInstanceCount.html](https://hofk.de/main/discourse.threejs/2020/DynamicallyInstanceCount/DynamicallyInstanceCount.html)  
[https://hofk.de/main/discourse.threejs/2020/EdgesGeometry-InstancedMesh/EdgesGeometry-InstancedMesh.html](https://hofk.de/main/discourse.threejs/2020/EdgesGeometry-InstancedMesh/EdgesGeometry-InstancedMesh.html)  
[https://hofk.de/main/discourse.threejs/2020/RaycastHighlightInstancedMesh/RaycastHighlightInstancedMesh.html](https://hofk.de/main/discourse.threejs/2020/RaycastHighlightInstancedMesh/RaycastHighlightInstancedMesh.html)  
[https://hofk.de/main/discourse.threejs/2019/RoundEdgedBoxesInstancing/RoundEdgedBoxesInstancing.html](https://hofk.de/main/discourse.threejs/2019/RoundEdgedBoxesInstancing/RoundEdgedBoxesInstancing.html)  
[https://hofk.de/main/discourse.threejs/2019/InstancingWithShadow/InstancingWithShadow.html](https://hofk.de/main/discourse.threejs/2019/InstancingWithShadow/InstancingWithShadow.html)  
[https://hofk.de/main/discourse.threejs/2019/TextureMappingInstanced/TextureMappingInstanced.html](https://hofk.de/main/discourse.threejs/2019/TextureMappingInstanced/TextureMappingInstanced.html)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [September 19, 2020, 6:22pm UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/12 "2020-09-19T18:22:08Z")

</div>

**Update** of ProfiledContourUV at GitHub [https://github.com/hofk/THREEg.js](https://github.com/hofk/THREEg.js)  
The caps can now also be given a texture.

![2020-09-19 20.18.11](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3353b833e950a20134cc8843f3e0d421c113fe1a.jpeg)

see also [ProfiledContourGeometry MultiMaterial](https://discourse.threejs.org/t/profiledcontourgeometry-multimaterial/5801/4)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 15, 2023, 9:16am UTC](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/14 "2023-02-15T09:16:45Z")

</div>

A new geometry: dynamic moon phase panel geometry.

Not in the addon, but on Github [GitHub - hofk/threejsResources: Resources for three.js](https://github.com/hofk/threejsResources) , see **updated NOTE** in the original post above.

![2023-02-15 10.12.24](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bbdc51f9d0a4903f327eb4cda09306d0b808fd83.png)