Addon to create special / extended geometries

geometry
addon
buffergeometry
#1

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

20180208-2112-21658

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

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.

2 Likes
Create a curved plane surface which dynamically changes its size
Sphere without use of trigonometric functions
Procedurally Generated Heart In Three.JS
ProfiledContourGeometry MultiMaterial
#2

What would one use this for?

#3

The MagicBox

20180305-2023-09918

… 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) Round-edged box
(2) Round-edged box 2
(3) Round-edged box 3
(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!

20180307-1448-39182

2 Likes
GridBoxGeometry
Round-edged box
#4

I’ve added another special geometry:
Labyrinth geometry 3D and 2D

Based on How to remove interior faces while keeping exterior faces untouched?

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

20181126-1818-19872

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 :slightly_smiling_face:

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
Sphere with up to 6 coordinate planes parallel holes
#5

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

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

1 Like
#6

One more geometry added.
The road (see Create a curved plane surface which dynamically changes its size ) 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>

20190220-0841-12142 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.

RoadRace.html on https://github.com/hofk/THREEg.js

2 Likes
#7

There’s a bug fix.

In the graphic above you can see:

20190305-1339-33128

20190305-1339-48138 There were different road widths before.


:heavy_plus_sign:

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

1 Like
#8

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-2104-33851

See also Sphere with up to 6 coordinate planes parallel holes


Just updated at GitHub. :slightly_smiling_face:

1 Like