XProfan

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

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

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

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

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

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

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

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