XProfan

- Seite 17 -

HofK

Spiegel habe ich bereits in meinen Schauraum eingebaut.

Dank Mugen87 gibt es nun eine erweiterte Variante mit abklingender Spiegelung. [...]

- Demo und Code: [...]

Dazu wurde die Definition des Spiegels von ihm erweitert. Man bindet diese Version einfach als Script ein, z.B. habe ich das in meiner Kopie so gemacht:

<script src="three.min.95.js"></script>
<script src="OrbitControls.js"></script>
<script src="enhancedReflector.js"></script> <!-- @author Mugen87 -->

Die Nutzung ist sehr übersichtlich (aus dem jsfiddle kopiert) :

const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh( boxGeometry, boxMaterial );
scene.add( box );
//
const reflectorGeometry = new THREE.PlaneBufferGeometry( 8, 8 );

const reflector = new THREE.Reflector( reflectorGeometry, {

    textureWidth: 1024 * window.devicePixelRatio,
    textureHeight: 1024 * window.devicePixelRatio,
    color: 0x889999,
    recursion: 1

} );

reflector.rotation.x = Math.PI * - 0.5;
reflector.position.y = - 1;
scene.add( reflector );

24.08.2018 ▲

- Seite 18 -

HofK

Ob eine Sache wirklich handhabbar ist, kann man nur ermitteln, indem man ausreichend viele Tests durchführt.

Also habe ich einen etwas komplizierteren Schauraum auf Papier gezeichnet.

Es sind noch nicht alle Wände/Bauteile eingegeben (siehe Datei unten) :

Die Angabe der Wände/Bauelemente des Schauraums in der Form
x0,z0, y00,y01, x1,z1, y10,y11 (optional: , Dicke)
erwies sich als etwas "nervig".
Bei der übergroße Mehrheit der Zeilen sind die Werte für die Höhen y00,y01 und y10,y11 identisch, da die Bauteile nicht "schräg" sind.

Also habe ich nun y00,y01 optional gemacht. Das ist möglich, da die Anzahl der Elemente entweder 8 (oder 9 mit Dicke) bzw. 6 (oder 7) ist. Damit kann die exakte Zuordnung getroffen werden.
x0,z0, (y00,y01,) x1,z1, y10,y11 (, Dicke) ( ) optional

Es ist ein Default-Material anzugeben. Dieses wird benutzt, wenn keine Materialangabe erfolgt. Bei der schrittweisen Eingabe der Wände/Bauteile ist das sehr hilfreich.

// en / de

// material, if not defined / Material, wenn icht definiert ( not 'Video' - then white / nicht 'Video' - dann weiß )
defaultMaterial = [ 'Textur', 'uvgrid01.png', doubleSide ];

Weiterhin wurde die Besuchersteuerung überarbeitet. Sie enthält nun eine regelbare Geschwindigkeit bezogen auf "geradeaus vorwärts". Die Symbole sind noch provisorisch, aber die Farbe/Transparenz bereits so, dass sie auf allen Untergründen gut zu erkennen sind. Die aktive Funktion unter der Maus wir grün hervorgehoben.


// ----------- SHOWROOM DESIGN -------------------------

// en / de

// material, if not defined / Material, wenn icht definiert ( not 'Video' - then white / nicht 'Video' - dann weiß )
defaultMaterial = [ 'Textur', 'uvgrid01.png', doubleSide ];

// ground plan / Grundriss
plans = [
	// Points Ground plan lines counter-clockwise / Punkte Grundrisslinien gegen Uhrzeigersinn:
	// Lines corner-centre of gravity within the surface! / Linien Ecke-Schwerpunkt innerhalb der Fläche!
	// x,z, y0,y1    ...  
	[ 5,0, 0,5,  5,11, 0,5,  14,11, 0,5,  14,0, 0,5 ], 						// 01 main room / Hauptraum
	[ 14,1, 0.2,4.2,  14,11, 0.2,4.2,  18,11, 0.2,4.2,  18,1, 0.2,4.2 ], 	// 02 stage / Bühne
	[ 0,-2, 0,4,  0,14.5, 0,4,  5,14.5, 0,4,  5,-2, 0,4 ], 					// 03a foyer part 1 / Vorraum Teil 1
	[ 5,11, 0,4,   5,14.5, 0,4,  8.25,14.5, 0,4,  8.25,11, 0,4 ], 			// 03b foyer part 2 / Vorraum Teil 2
	[ 8.25,11, -0.2,3,  8.25,14.5, -0.2,3, 14,14.5, -0.2,3,  14,11, -0.2,3] // 04 side room / Nebenraum
];

// floor material / Bodenmaterial
floorsMaterial = [
// 'Textur',  'Grafikdatei', , ...Side, (optional wrap S.., wrap T.. ,     ...   'Basic' 'Phong' 'Lambert',  
	[ 'Textur', 'Granit.jpg', doubleSide ], // 01
	[ 'Textur', 'Granit.jpg', doubleSide ], // 02
	//[ 'Textur', 'uvgrid01.png', doubleSide ], // 03
];

// ceiling material / Deckenmaterial
ceilingsMaterial = [
// 'Textur',  'Grafikdatei', , ...Side, (optional wrap S.., wrap T.. ,     ...   'Basic' 'Phong' 'Lambert',  
	[ 'Textur', 'uvSpray.png', doubleSide ], // 01
	[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 02
	[ 'Phong', 0xfeff55, doubleSide, smoothShading ], // 03
];

plansUV = [			
	// main room / Hauptraum ( Textur 9:7 )			
	[], // auto uv's: [] , otherwise / sonst [ 0,0, 1,0, 1,1, 0,1 ], 
						// according to the circulation of the floor plan line /  entsprechend Umlauf der Grundrisslinie

];

walls = [
 	// main room, usually without thickness, only visible from the inside, counterclockwise /
	// Hauptraum, meist ohne Dicke, nur von innen sichtbar, gegen Uhrzeigersinn
	// bei unterschiedlichem Niveau zu Anfangspunkt Höhen y00,y01 einfügen 
	// x0,z0, (y00,y01,) x1,z1, y10,y11 ( ,thickness / Dicke)  ( ) optional
	
	// thin walls / dünne Wände 
	
	[ 8,11, 15,11, -0.2,5 ],		// 01 right wall main room / rechte Wand Hauptraum
	[ 18,8, 18,4, 0.2,1 ],			// 02a Stage back wall down / Bühne Rückwand unten
	[ 18,8, 18,4, 1,3.5 ],			// 02b film wall / Filmwand
	[ 18,8, 18,4, 3.5,4.2 ],		// 02c Stage back wall up / Bühne Rückwand oben
	[ 14,11, 14,1, 0,0.2 ],			// 02d Stage wall down / Bühne Wand unten
	[ 14,11, 14,1, 4.2,5 ],			// 02e Stage wall up / Bühne Wand oben
	[ 15,1, 13,1, 0,3 ],			// 03a  4 x between, next to archways / 4 x zwischen, neben Torbögen
	[ 11,1, 10.5,1, 0,3 ],			// 03b
	[ 8.5,1, 8,1, 0,3 ],			// 03c
	[ 6,1, 5,1, 0,3 ],				// 03d
	[ 15,1, 5,1, 3,5 ],				// 04 over archways / über Torbögen
	[ 13,0, 6,0, 0,3 ],				// 05 behind archways / hinter Torbögen
	[ 5,-2, 0,-2, 0,4 ],			// 06 foyer left / Vorraum links
	[ 0,-2, 0,3, 0,4 ],				// 07a 4 x wall entrance from left / 4 x Wand Eingang von links
	[ 0,4, 0,5, 0,4 ],				// 07b
	[ 0,7, 0,8, 0,4 ],				// 07c
	[ 0,9, 0,14.5, 0,4 ],			// 07d
	[ 0,3, 0,4, 0,1 ],				// 08a above, below window / über, unter Fenster
	[ 0,3, 0,4, 2.5,4 ],			// 08b
	[ 0,8, 0,9, 0,1 ],				// 08c
	[ 0,8, 0,9, 2.5,4 ],			// 08d
	[ 0,5, 0,7, 2.5,4 ],			// 08e above the entrance door / über der Eingangstür
	[ 0,14.5, 3,14.5, 0,4 ],		// 09a 2 x foyer right  / 2 x Vorraum rechts
	[ 5,14.5, 8.25,14.5, 0,4 ],		// 09b
	[ 8.25,14.5, 10,14.5, -0.2,3 ],	// 10a 3 x side room right /  3 x Nebenraum rechts
	[ 11,14.5, 14,14.5, -0.2,3 ],	// 10b
	[ 14,14.5, 14,11, -0.2,3 ],		// 10c
	
	// thick walls  / dicke Wände 
	
	[ 3,11.1, 8,11.1, 0,5, 0.2 ],	// 11
	
	
	// imagery / Bilder
	
	// ...
	
	// Interior walls, partition walls, structural components, blockings, platforms: .. + thickness /
	// Innenwände, Trennwände, Strukturbauteile, Aufblockungen, Podeste:  .. , + Dicke
	// [ with 6 materials each! /  mit je 6 Materialien! ]
	[ 5.8,4.7, 0,0.5,  7.1,4.7, 0,0.9,  0.333 ],  //...1
	[ 5.8,3.7, 		   7.1,3.7, 0,0.9,  0.333 ]   //...2
		
];

wallsMaterial = [
	// 'Textur',  'graphic file / Grafikdatei', ..Side, ( optional: wrap S, wrap T) 
	// 'Video'
	// 'Basic'  'Phong' 'Lambert',    color, ..Side, ..Shading
	[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],		// 01
	[ ], // [ 'Textur', 'Fliese02.png', doubleSide, 10, 2 ],	// 02a
	[ 'Video', '????????.xxx', backSide],				// 02b
	[ 'Phong', 0xcccc22, doubleSide, smoothShading ],	// 02c
	[ 'Phong', 0xcccc22, doubleSide, smoothShading ],	// 02d
	[ 'Phong', 0xcccc22, doubleSide, smoothShading ],	// 02e
	[ 'Textur', 'uvgrid01.png', doubleSide ],			// 03a
	[ 'Textur', 'uvgrid01.png', doubleSide ],			// 03b
	[ 'Textur', 'uvgrid01.png', doubleSide ],			// 03c
	[ 'Textur', 'uvgrid01.png', doubleSide ],			// 03d
	[ 'Textur', 'uvgrid01.png', doubleSide ],			// 04
	[ 'Phong', 0xffff44, doubleSide, smoothShading ],	// 05
	[ 'Textur', 'uvgrid01.png', backSide ],				// 06
	[ 'Textur', 'uvgrid01.png', backSide ],				// 07a
	[ 'Textur', 'uvgrid01.png', backSide ],				// 07b
	[ 'Textur', 'uvgrid01.png', backSide ],				// 07c
	[ 'Textur', 'uvgrid01.png', backSide ],				// 07d
	[ 'Textur', 'uvgrid01.png', backSide ],				// 08a
	[ 'Textur', 'uvgrid01.png', backSide ],				// 08b
	[ 'Textur', 'uvgrid01.png', backSide ],				// 08c
	[ 'Textur', 'uvgrid01.png', backSide ],				// 08d
	[ 'Textur', 'uvgrid01.png', backSide ],				// 08e
	[ 'Textur', 'uvgrid01.png', backSide ],				// 09a
	[ 'Textur', 'uvgrid01.png', backSide ],				// 09b
	[ 'Textur', 'uvgrid01.png', backSide ],				// 10a
	[ 'Textur', 'uvgrid01.png', backSide ],				// 10b
	[ 'Textur', 'uvgrid01.png', backSide ],				// 10c	
	[     												// 11	6 materials in the array / Materialien im Feld 	
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		//[],
		//[],
		//[],
		//[],
		//[ 'Textur', 'uvgrid01.png', doubleSide ],
		//[ 'Textur', 'uvgrid01.png', doubleSide ],
		//[ 'Textur', 'uvgrid01.png', doubleSide ],	
	],
	[     											// ...   6 materials in the array / Materialien im Feld 	
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],	
	],
	[     											// ...	 6 materials in the array / Materialien im Feld 	
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],
		[ 'Textur', 'Fliese02.png', doubleSide, 5, 4 ],	
	]
];

wallsUV = [
	
	[ 0,0, 0,1, 1,0, 1,1 ], // 01  wie autoUV zu xz0,y0, xz0,y1, xz1,y0, xz1,y1 
	[],						// 02a
	[],						// 02b
	[],						// 02c
	[],						// 02d
	[],						// 02e
	[],						// 03a
	[],						// 03b
	[],						// 03c
	[],						// 03d
	[],						// 04
	[],						// 05
	[],						// 06
	[],						// 07a
	[],						// 07b
	[],						// 07c
	[],						// 07d
	[],						// 08a
	[],						// 08b
	[],						// 08c
	[],						// 08d
	[],						// 08d
	[],						// 09a
	[],						// 09b
	[],						// 10a
	[],						// 10b
	[],						// 10c	
	[						// 11 thick wall
		// leer auto UVs
	],					
	[						// ... thick wall	(front, back) 	
		[ 0,0, 0,1, 1,0, 1,0.6 ],
		[ 0,0, 0,0.6, 1,0, 1,1 ],
	], 
		
	[						//... thick wall	
		// leer auto UVs
	], 
];

constructs = [


];
 
constructsMaterial = [


];

constructsUV = [


];

archways = [
	// archways / Torboegen:  x0,z0, x1,z1, y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau, thickness / Dicke	
		// [  with 3 materials each! /  mit je 3 Materialien! ] 
	[ 13,0.5, 11,0.5, 0,3,  1 ],  	// 01
	[ 10.5,0.5, 8.5,0.5, 0,3,  1 ], // 02
	[ 8,0.5, 6,0.5, 0,3,  1 ]  		// 03
];

archwaysMaterial = [
	[ 										// 01  [ 3 materials in the array / 3 Materialien im Feld ] 
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ]
	],
	[ 										// 02  [ 3 materials in the array / 3 Materialien im Feld ] 
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ]
	],
	[ 										// 03  [ 3 materials in the array / 3 Materialien im Feld ] 
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Textur', 'uvgrid01.png', doubleSide ]
	]
];

roundWalls = [
	// round walls / runde Wände:
	// center x, center z,  y0 lower niveau / unteres Niveau, y1 upper niveau / oberes Niveau,
					//rx radius ,rz radius,  radius segments, start angle / Startwinkel, angle / Winkel
	[ 15,8, 0.2,4.2, 3,3, 12, 0,1.57 ],      // 01 stage right / Bühne rechts
	[ 15,4, 0.2,4.2, 3,3, 12, 1.57,1.57 ]    // 02 stage left / Bühne left
];

roundWallsMaterial = [
	 
	 [ 'Textur', 'uvSpray.png', doubleSide ],
	 [ 'Textur', 'uvSpray.png', doubleSide ]
];

 rounds = [
	// round components / runde Bauteile: center x, center z,  y0,y1, rx,rz,  (Drehwinkel, Zuspitzung optional)
	[ 7,2, 0,0.5, 0.5,0.7 , 0.785, 1.1 ] //01
];

roundsMaterial = [
	[ 											// 01 // [ 3 Materialien ] 
		[ 'Phong', 0x8822dd, frontSide, flatShading  ],
		[ 'Textur', 'uvgrid01.png', doubleSide ],
		[ 'Phong', 0x00ff00f, doubleSide, smoothShading  ],
	]	
];

// Rahmenprofile für Rahmen: ...Shape (Querschnitt)
 doorShape =	[ 0,0, 0,0.05, 0.08,0.05, 0.08,0.03, 0.1,0.03, 0.1,0 ];	// Zarge
 pictureShape = [ 0,0, 0.01,0.04, 0.07,0.04, 0.1,0 ]; 				// Bilder
	
frames = [
	// Rahmen:  Profil, x0,z0, y00,y01,  x1,z1, y10,y11, optional geschlossen: 1
	[  doorShape, 2,0, 0,2.1, 3.2,0, 0,2.1 ], 							//01
	[  pictureShape, 3.91,0.25, 1.21,2.89, 6.09,0.25, 1.21,2.89, 1 ],	//02
	
];

framesMaterial = [	
	[ 'Phong', 0x4455ff,  doubleSide, smoothShading  ], //01
	[ 'Lambert', 0x00ffff,  doubleSide, smoothShading  ], //02
		
];

visitorAreas = [
	//Besucher, Rechtecke x0,z0, < x1,z1
	[ -5, -5, 20, 15 ]
	
	//[ 1, 1, 8, 6 ],
	
];

// Spiegel
 mirrors = [
	// Spiegel: Typ, ...
	// Typ 'wall':  x0,z0,  x1,z1,  y0,y1, (optional: color)
	// Typ 'polygon': Ecken, Radius, x,y,z-center position, x,y,z-Rotation, (optional: color)
//	[ 'wall',  6.225, 0.3,  8.75, 0.3,  0.4, 3.35 ],
//	[ 'polygon', 36, 1.6,  6, 1.8, 6.8888,  -0.05, 3.1416, 0 ]
];

// Ausstellungsobjekte
exhibits = [
	//Ausstellungsobjekte: 3D Format, Dateiname, x,y,z-Skalierung, x,y,z-Position,  x,y,z-Rotation
	[ 'json', 'flower', 0.01, 0.01, 0.01,  7, 0.0001, 3,  0, 0, 0 ],
	//[ 'json', 'nefertiti', 0.1, 0.1, 0.1,   7, 1, 2,   0, 2.1, 0 ],	
	[ 'obj', 'flower', 0.01, 0.01, 0.01,  5.5, 0.0001, 3,  0, 0, 0 ]  // dazu muss Datei flower.mtl (Material) vorhanden sein!
];

// Beleuchtung 
lights = [
	// Typ, Farbe 
	[ 'ambient', 0x999999 ],
	// Typ, Farbe, Position  x,y,z
	[ 'point', 0xffdddd, 10, 4, 6 ],
]

// Umgebung:

// Textur: 6 Texturen in Reihenfolge +x,-x,+y,-y,+z,-z
//var surroundingTextur = [ 'CubeMap/', 'posx.png', 'negx.png', 'posy.png', 'negy.png', 'posz.png', 'negz.png'];
surroundingTextur = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'];

// Groesse, x,y,z-Position  
surrounding = [ 80, 10, -0.5, -20 ];

// --------------  end of showroom design --------------------

29.08.2018 ▲

HofK

Mit dieser "frisch herein gekommenen" Bewegungssteuerung kann man einen definierten Rundgang durch den Schauraum organisieren. In 3D, also auch mit variabler Augenhöhe. Bei mir ist die Augenhöhe bisher konstant, nur die Blickrichtung lässt sich nach oben bzw. unten steuern.

Motion Guide [...]

Demo und Code: [...]

Teile kopiert und zusammengefügt in eine html. Einfach nun hier kopieren und ausprobieren.

<!DOCTYPE html>
<head>
<title> </title>
<meta charset="utf-8" />
<style>

body {

    background-color: #000;
    margin: 0px;
    overflow: hidden;

}

</style>
</head>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<body>
</body>
<script>
// @author: MateuszWis / Mugen87
//https://discourse.threejs.org/t/motion-guide-plugin/3946/4
// source  https://jsfiddle.net/qgu17w5o/129/
// Simple three.js example
var renderer, scene, camera, controls, alpha, boxMesh, curve, startTime;
init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    // scene
    scene = new THREE.Scene();
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set(0, 0, 40);
    // controls
    controls = new THREE.OrbitControls( camera );
    var path = new THREE.Path();
    curve = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( -10, 0, 10 ),
    new THREE.Vector3( -5, 5, 5 ),
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 5, -5, 5 ),
    new THREE.Vector3( 10, 0, 10 )
    ] );
    var points = curve.getPoints( 50 );
    var geometry = new THREE.BufferGeometry().setFromPoints( points );
    var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
    // Create the final object to add to the scene
    var curveObject = new THREE.Line( geometry, material );
    var boxGeo = new THREE.BoxGeometry( 1, 1, 1 );
    boxMesh = new THREE.Mesh(boxGeo);
    boxMesh.position.copy(curve.getPoint(0));
    console.log(Math.floor(2.45) - 2.45);
    console.log(new Date().getTime());
    scene.add(curveObject,boxMesh);
    startTime = new Date().getTime();

}

function animate() {

    requestAnimationFrame( animate );
    var time = (new Date().getTime() - startTime)/2000;
    alpha = -(Math.floor(time) - time);
    curve.getPoint( alpha, boxMesh.position );
    renderer.render( scene, camera );

}

</script>
</html>

29.08.2018 ▲

HofK

Kugel aus Längen- und Breitengraden

Auf eine Frage hin [...]

hat prisoner849 eine Lösung [...]

[...]

, die er bereits vor zwei Jahren erstellt hat gepostet.

Einfach den zusammengefassten Quelltext hier kopieren und ausprobieren.

<!DOCTYPE html>
<!--  https://discourse.threejs.org/t/sphere-geometry-just-wireframe-but-without-diagonal-lines/4027/5 -->
<head>
<title> longitude/latitude sphere</title>
<meta charset="utf-8" />
<style>

body {

    overflow: hidden;
    margin: 0;

}

</style>
</head>
<body>
</body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// @author prisoner 849 http://jsfiddle.net/prisoner849/4p9kp1p2/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-30, 60, -120);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var r = 20,
verticalLines = 32,/* must be divisible by 4! */
horizontalLines = 16;/* must be divisible by 2! */

var quadSphere_threeQuarters = createQuadSphere(r, 3 * verticalLines / 4, horizontalLines, {

    color: 0x0000ff

}, 0, 3 * Math.PI / 2);

scene.add(quadSphere_threeQuarters);

var quadSphere_oneEighth = createQuadSphere(r, verticalLines / 4, horizontalLines / 2, {

    color: 0xff0000

}, 3 * Math.PI / 2, Math.PI / 2, Math.PI / 2, Math.PI / 2);

quadSphere_oneEighth.position.x += 50;
scene.add(quadSphere_oneEighth);

var quadSphere_threeQuarters_right = createQuadSphere(r, 3 * verticalLines / 4, horizontalLines, {

    color: 0xff00ff

}, 0, 3 * Math.PI / 2);

quadSphere_threeQuarters_right.position.x -= 50;
scene.add(quadSphere_threeQuarters_right);

var quadSphere_oneEighth_right = createQuadSphere(r, verticalLines / 4, horizontalLines / 2, {

    color: 0xff00ff

}, 3 * Math.PI / 2, Math.PI / 2, Math.PI / 2, Math.PI / 2);

quadSphere_oneEighth_right.position.x -= 50;
scene.add(quadSphere_oneEighth_right);

function createQuadSphere(r, widthSegments, heightSegments, atts, phiStart, phiLen, thetaStart, thetaLen) {

    var sphere = new THREE.Group(),
    material = new THREE.LineBasicMaterial(atts);

    if (phiStart === undefined) {

        phiStart = Math.PI / 2;

    }

    if (phiLen === undefined) {

        phiLen = 2 * Math.PI;

    }

    if (thetaStart === undefined) {

        thetaStart = 0;

    }

    if (thetaLen === undefined) {

        thetaLen = Math.PI;

    }

    /* width segments (longitude) */

    for (var phiDelta = phiLen / widthSegments, phi = phiStart, arc = createVerticalArc(r, heightSegments, thetaStart + Math.PI / 2, thetaLen); phi <= phiStart + phiLen + phiDelta; phi += phiDelta) {

        var arcTmpGeometry = arc.clone();
        arcTmpGeometry.rotateY(phi);
        var arcLine = new THREE.Line(arcTmpGeometry, material);
        sphere.add(arcLine);

    }

    /* height segments (latitude) */

    for (var thetaDelta = thetaLen / heightSegments, theta = thetaStart; theta < thetaStart + thetaLen - thetaDelta; theta += thetaDelta) {

        if (theta === 0) {

            continue;

        }

        var arcR = r * Math.sin(theta),
        arcH = r * Math.cos(theta),
        arcTmpGeometry = createHorizontalArc(arcR, widthSegments, phiStart, phiLen);
        arcTmpGeometry.rotateX(Math.PI / 2);
        arcTmpGeometry.rotateY(Math.PI / 2);
        arcTmpGeometry.translate(0, arcH, 0);
        var arcLine = new THREE.Line(arcTmpGeometry, material);
        sphere.add(arcLine);

    }

    return sphere;

}

function createVerticalArc(r, segments, thetaStart, thetaLen) {

    var geometry = new THREE.CircleGeometry(r, segments, thetaStart, thetaLen);
    geometry.vertices.shift();
    return geometry;

}

function createHorizontalArc(r, segments, phiStart, phiLen) {

    var geometry = new THREE.CircleGeometry(r, segments, phiStart, phiLen);
    geometry.vertices.shift();

    if (phiLen >= 2 * Math.PI) {

        geometry.vertices.push(geometry.vertices[0].clone());

    }

    return geometry;

}

render();

function render() {

    requestAnimationFrame(render);
    renderer.render(scene, camera);

}

</script>
</html>

Als Kugel aus Längen- und Breitengraden in der Auflistung der Beispiele von prisoner 849 / Paul West weiter oben ergänzt.

05.09.2018 ▲

HofK

Interaktive Form

An den vier Quadern mit der Maus ziehen.

Und noch eine interessante geometrische Sache von prisoner849: [...]

- Demo und Code: [...]

Oder die zusammengefügte html Datei zum Test benutzen:

<!DOCTYPE html>
<!--   https://discourse.threejs.org/t/where-do-i-find-the-spline-editor/4037 -->
<head>
<title> interactiveShape </title>
<meta charset="utf-8" />
<style>

body{

    overflow:  hidden;
    margin: 0;

}

</style>
</head>
<body>
</body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// @author https://jsfiddle.net/prisoner849/snyqgmke/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x606060);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var dirLight = new THREE.DirectionalLight(0xffffff, .75);
dirLight.position.setScalar(10);
scene.add(dirLight);
scene.add(new THREE.AmbientLight(0x404040));
scene.add(new THREE.GridHelper(20, 20, 0x404040, 0x404040));
var plane = new THREE.Plane();
plane.setFromCoplanarPoints(new THREE.Vector3(), new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 1));
var controlPoints = [];
controlPoints.push(createPoint(new THREE.Vector3(-5, 0,  0), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 5, 0, -5), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 0, 0,  5), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 0, 0,  0), "white"));

function createPoint(position, color){

    var viewGeometry = new THREE.BoxGeometry(.5, 1.55, .5, 1, 3, 1);
    viewGeometry.translate(0, .75, 0);
    var viewMaterial = new THREE.MeshBasicMaterial({color: color, wireframe: false, transparent: true, opacity: .5});
    var view = new THREE.Mesh(viewGeometry, viewMaterial);
    view.position.copy(position);
    scene.add(view);
    return view;

}

function createCurveGeometry(){

    var pts = [];

    controlPoints.forEach(pt => {

        pts.push(pt.position);

    });

    var curve = new THREE.CatmullRomCurve3( pts );
    curve.closed = true;
    var curveGeometry = new THREE.Geometry();
    curveGeometry.vertices = curve.getPoints(75);
    curveGeometry.translate(0, 1, 0);
    return curveGeometry;

}

var curveMaterial = new THREE.LineBasicMaterial({color: "white"});
var curveLine = new THREE.Line(createCurveGeometry(), curveMaterial);
scene.add(curveLine);
var extrudeSettings = { amount: 1, bevelEnabled: false};
var points = [];
var shape = null;
var shapeGeometry;
var shapeMaterial = [
new THREE.MeshLambertMaterial({color:0xb5b5b5}),
new THREE.MeshLambertMaterial({color:"aqua"})
]
var shapeMesh = new THREE.Mesh(shapeGeometry, shapeMaterial);
scene.add(shapeMesh);

curveLine.geometry.vertices.forEach((vertex, index)=>{

    points.push(new THREE.Vector2(vertex.x, vertex.z));// fill the array of points with THREE.Vector2() for re-use

});

function extrudeMesh(){

    curveLine.geometry.vertices.forEach((vertex, index)=>{

        points[index].set(vertex.x, vertex.z);// re-use the array

    });

    shape = new THREE.Shape(points);
    shapeGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    shapeGeometry.rotateX(Math.PI * .5);
    shapeGeometry.translate(0, 1, 0);
    shapeMesh.geometry.dispose();
    shapeMesh.geometry = shapeGeometry;

}

extrudeMesh();
window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);
window.addEventListener("mousemove", onMouseMove, false);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
var dragging = false;
var dragObject;
var pointOfIntersection = new THREE.Vector3();
var planeNormal = new THREE.Vector3(0, 1, 0);
var shift = new THREE.Vector3();

function onMouseDown(event){

    intersects = raycaster.intersectObjects(controlPoints);

    if (intersects.length > 0){

        controls.enableRotate = false;
        dragObject = intersects[0].object;
        plane.setFromNormalAndCoplanarPoint(planeNormal, intersects[0].point);
        shift.subVectors(dragObject.position, intersects[0].point);
        dragging = true;

    }

}

function onMouseUp(event){

    controls.enableRotate = true;
    dragObject = null;
    dragging = false;

}

function onMouseMove(event){

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    if (intersects.length == 0 || !dragging) return;

        raycaster.ray.intersectPlane(plane, pointOfIntersection);
        dragObject.position.copy(pointOfIntersection).add(shift);
        curveLine.geometry.dispose();
        curveLine.geometry = createCurveGeometry();
        extrudeMesh();

    }

    var time = 0;
    var curShift = 0;
    render();

    function render(){

        time = Date.now() * 0.001;
        requestAnimationFrame(render);
        raycaster.setFromCamera(mouse, camera);

        controlPoints.forEach((cp, idx) => {

            curShift = (Math.PI / 2) * idx;
            cp.material.opacity = 0.6 + Math.sin(time - curShift) * .2;

        });

        renderer.render(scene, camera);

    }

    </script>
    </html>

Als Interaktive Form in der Auflistung der Beispiele von prisoner 849 / Paul West weiter oben ergänzt.

06.09.2018 ▲

HofK

Anfang 2017 hatte ich mich mal kurz mit den Shadern beschäftigt. [...]

Abgesehen von den einfachen Anfangsbeispielen ist das eine recht komplizierte Sache.

Das folgende Beispiel von prisoner849 [...]

Code: [...]

erzeugt mit Hilfe von Shader Material unsichtbare Teile einer Geometrie, so dass man hineinschauen kann. Das ist unabhängig von den Dreiecken, aus denen die Geometrie zusammengesetzt ist und in der Zeit variabel.

Die Funktion getMaterial(params) enthält das Wesentliche der Sache.

Unsichtbare Teile

Statt der Box habe ich andere Körper probiert, - klappt!

Bei Interesse einfach den zusammengefügten Code kopieren und testen:

<!DOCTYPE html>
<!--  https://discourse.threejs.org/t/in-the-orb-shaders/3286/3 -->
<head>
<title> invisibleParts </title>
<meta charset="utf-8" />
<style>

body {

    overflow: hidden;
    margin: 0;

}

</style>
</head>
<body>
</body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// @author prisoner849
// https://stackoverflow.com/questions/52172224/is-it-possible-to-make-only-parts-of-a-component-invisible/52187647#52187647

var sphereRadius = {

    value: 2.5

};

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-5, 8, -8).setLength(8);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 2, 0);
controls.update();
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-10, 10, 10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));
scene.add(new THREE.GridHelper(4, 4, 0x404040, 0x404040));
// boxes
var boxGeom = new THREE.BoxBufferGeometry();
boxGeom.translate(0, 0.5, 0);

var boxMaterial = new THREE.MeshLambertMaterial({

    color: "gray"

});

for (let x = 0; x <= 1; x++) {

    for (let z = 0; z <= 1; z++) {

        let box = new THREE.Mesh(boxGeom, boxMaterial);
        box.position.set(x - 0.5, 0, z - 0.5).multiplyScalar(1.5);
        box.scale.set(1, Math.abs(x) + Math.abs(z) + 1, 1);
        scene.add(box);

    }

}

// wrapping box
var wrappingBoxGeom = new THREE.BoxBufferGeometry(4, 4, 4);
//var wrappingBoxGeom      = 	new THREE.CylinderBufferGeometry(2, 2, 4, 32); // geometry changed
//var wrappingBoxGeom      = 	new THREE.SphereBufferGeometry(3, 24, 24); // geometry changed
wrappingBoxGeom.translate(0, 2, 0);

var wrappingBoxMaterial = getMaterial({

    diffuse: 0xaaaaaa,
    inside: false

});

var wrappingBox = new THREE.Mesh(wrappingBoxGeom, wrappingBoxMaterial);
scene.add(wrappingBox);
var clock = new THREE.Clock();
var time = 0;
render();

function render() {

    requestAnimationFrame(render);
    time += clock.getDelta();
    wrappingBoxMaterial.uniforms.clippingSphere.value.x = Math.sin(time) * 2;
    renderer.render(scene, camera);

}

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

function getMaterial(params) {

    var diffuse = params.diffuse === undefined ? 0xffffff : params.diffuse;
    var diffuseBack = params.diffuseBack === undefined ? diffuse : params.diffuseBack;
    var inside = params.inside === undefined ? true : params.inside;
    inside = inside ? 1 : -1;

    let lambert = new THREE.ShaderMaterial({

        uniforms: THREE.UniformsUtils.merge([THREE.ShaderLib.lambert.uniforms, {

            clippingSphere: {

                value: new THREE.Vector4()

            },

            diffuseBack: {

                value: new THREE.Color()

            }

        }]),

        vertexShader: THREE.ShaderLib.lambert.vertexShader
        .replace(/varying vec3 vLightFront;/g,'varying vec3 vLightFront;\nvarying vec4 worldPosition;')
        .replace(/#include <worldpos_vertex>/g,'worldPosition = modelMatrix * vec4( transformed, 1.0 );'),
        fragmentShader: THREE.ShaderLib.lambert.fragmentShader
        .replace(/uniform float opacity;/g,'uniform float opacity;\nuniform vec4 clippingSphere;\nuniform vec3 diffuseBack;')
        .replace(/varying vec3 vLightFront;/g,'varying vec3 vLightFront;\nvarying vec4 worldPosition;')
        .replace(/#include <clipping_planes_fragment>/g,'#include <clipping_planes_fragment>\n if (distance(worldPosition.xyz, clippingSphere.xyz) * sign(clippingSphere.w) > clippingSphere.w) discard;')
        .replace(/#include <dithering_fragment>/g,'#include <dithering_fragment>\n if (!gl_FrontFacing) gl_FragColor.xyz = diffuseBack;'),
        lights: true,
        side: THREE.DoubleSide

    });

    lambert.uniforms.clippingSphere.value.set(0, 3, -1, sphereRadius.value * inside);
    lambert.uniforms.diffuse.value.set(diffuse);
    lambert.uniforms.diffuseBack.value.set(diffuseBack);
    return lambert;

}

</script>
</html>

Als Unsichtbare Teile in der Auflistung der Beispiele von prisoner 849 / Paul West weiter oben ergänzt.

07.09.2018 ▲

HofK

Vor knapp zwei Jahren habe ich mal 3D Text probiert und hatte als Anfänger so meine Probleme: [...]

Mittlerweile ist three.js r96 aktuell und auf discourse zu Text eine Frage gestellt worden. [...]

Vom Moderator Mugen87 dazu der Hinweis auf ein jsfiddle. [...]

Hier wird ein Font im json Format benutzt.

Weitere findet man z.B. unter [...]

Man beachte die Lizenz.

Zum Test habe ich mal eine weitere Schrift (optimer_regular.typeface.js) heruntergeladen.

Wer es mal ausprobieren möchte:

<!DOCTYPE html>
<head>
<title> TEXT </title>
<meta charset="utf-8" />
<style>

body {

    margin: 0;

}

</style>
</head>
<body>
</body>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
// https://discourse.threejs.org/t/how-to-create-a-text-geometry/4141
// https://jsfiddle.net/f2Lommf5/14075/
var camera, scene, renderer;
init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
    camera.position.z = 8;
    scene = new THREE.Scene();
    var loader = new THREE.FontLoader();
    // fonts:
    // http://gero3.github.io/facetype.js/
    // https://thefiveplanets.org/b01/data/fonts/ https://thefiveplanets.org/b01/data/fonts/LICENSE
    //loader.load( 'optimer_regular.typeface.js', function ( font ) {
    loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
    var geometry = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 1,
    height: 0.5,
    curveSegments: 4,
    bevelEnabled: true,
    bevelThickness: 0.02,
    bevelSize: 0.05,
    bevelSegments: 3

} );

geometry.center();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );

}

function animate() {

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

}

</script>
</html>

16.09.2018 ▲

HofK

Etwas Arbeit hat es gemacht, aber nun finde ich auch selbst die Beispiele von
discourse.threejs.org schnell auf. [...]

Hier geht es unmittelbar zur Sammlung: [...]

Die erweiterten Beispiele sind als Unterseite >>> eXtended eXamples zu erreichen und als Linksammlung gestaltet.

Die Sammlung wird von Zeit zu Zeit ergänzt.

01.10.2018 ▲

HofK

Sammlung von Kugeldefinitionen.

Die Kugelgeometrie ist eine wichtige Grundgeometrie.

Kugeln und modifizierte Formen können auf vielfältige Weise hergestellt werden.
Beim Sammeln der Beispiele aus discourse.threejs.org
habe ich einige Varianten gefunden. [...]

Außerdem gibt es noch Links zu anderen Seiten.

04.10.2018 ▲

HofK

Bisher hatte ich im Schauraum immer volle Beleuchtung. Aber eigentlich gar keine Beleuchtung sondern ein Material, das auch ohne Lichtquelle vollständig hell dargestellt wird.

Das ist nicht sehr realistisch.

Nach einigen Fehlversuchen gibt es nun erste Lichtstimmung im Raum.
Dazu habe ich THREE.AmbientLight und THREE.PointLight benutzt.

Das Punktlicht breitet sich nach allen Seiten aus. Da es noch keine Leuchte mit Schirm gibt, eben wie bei einem "nackten" Leuchtmittel auch an die Decke.

Auch der Schattenwurf ist noch nicht programmiert.

In einem Test habe ich THREE.SpotLight. ausprobiert. [...]

vor 22 Tagen ▲

HofK

In den letzten Tagen habe ich die Beispielsammlung [...]

und [...]

kräftig aufgefüllt.

Da gibt es wieder einige neu hinzugekommene interessante Sachen.

Nicht nur neue Beispiele, sondern weiter unten auch nach intensiver Suche auf
discourse.threejs.org nun aufgefundene Sachen.

vor 5 Tagen ▲

HofK

Auf die Frage "How to remove interior faces while keeping exterior faces untouched?" in discourse.threejs.org [...]

hatte prisoner849 wieder eine effiziente Lösung.

Es ging um ein Labyrinth.

Zu der Lösung habe ich eine vereinfachte Basislösung erstellt. [...]

und [...]

Dann kam mir der Gedanke, dass man mit dieser Methode sehr leicht komplexere 3D Labyrinthe erstellen kann. Es brauchte nur noch einer geeigneten Designsymbolik.

Ein Ergebnis:

siehe [...]

[...]