# Addon to create special / extended geometries

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 There are also extra posts about it here in the forum.

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

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

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) ) },

} );
``````

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/ or directly 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.

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.

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_

The next geometry in THREEg will be a magic box.

2 Likes

What would one use this for?

The MagicBox

… 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.

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.

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

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
Try it on http://sandbox.threejs.hofk.de/ or 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!

2 Likes

Labyrinth geometry 3D and 2D

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

The example is on 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
];

*/``````
1 Like

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

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.

1 Like

The road (see Create a curved plane surface which dynamically changes its size - #16 by hofk ) in the THREEg version.

Example:

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

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

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( ); // all parameters default

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

animate();

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

function animate() {

requestAnimationFrame( animate );
renderer.render( scene, camera );
controls.update();

}
</script>

</html>
``````

CentralMarking.png

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.

2 Likes

There’s a bug fix.

In the graphic above you can see:

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.

Just updated at GitHub.

1 Like

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
``````

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.

Just updated at GitHub.

1 Like

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

and ProfiledContourUVs.

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.

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.

Very many groups are then a problem for the performance.

I had a similar problem with my showroom. Jerky camera movement with many objects

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

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