Addon to create special / extended geometries

[hofk]

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

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

The next geometry in THREEg will be a magic box.

[pailhead]

What would one use this for?

[hofk]

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.

(1) https://discourse.threejs.org/t/round-edged-box/1402
(2) https://discourse.threejs.org/t/round-edged-box-2/1448
(3) https://discourse.threejs.org/t/round-edged-box-3/1481
(4) http://webglworkshop.com/demos/fillet/filletBox.html
(5) 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.

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!

[hofk]

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

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 
	];
		
*/

[hofk]

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.

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
http://threejs.hofk.de/LineGridDesign/LineGridDesign.html

hofk/THREEg.js

[hofk]

One more geometry added.
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 -->
<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>

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
on
GitHub - hofk/THREEg.js: three.js addon to create special or extended geometries. The addon generates indexed or non indexed BufferGeometries.

[hofk]

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.

Try there: http://threejs.hofk.de/WallTHREEg/WallTHREEg.html

Just updated at GitHub.

[hofk]

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.

See also Sphere with up to 6 coordinate planes parallel holes

---

Just updated at GitHub.

[hofk]

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

and ProfiledContourUVs.

( see also ProfiledContourGeometry MultiMaterial )

[buffalo]

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.

[hofk]

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.

Clipping plane for InstancedBufferGeometry
Instancing Point Cloud
Multiple textures with instanced geometry

See also my Collection of examples from discourse.threejs.org , e.g.

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/EdgesGeometry-InstancedMesh/EdgesGeometry-InstancedMesh.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/InstancingWithShadow/InstancingWithShadow.html
https://hofk.de/main/discourse.threejs/2019/TextureMappingInstanced/TextureMappingInstanced.html

[hofk]

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

see also ProfiledContourGeometry MultiMaterial