3D im Internet

3D im Internet: three.js webgl – materials – cube reflection

Allgemein Schlagwörter: , 0 Kommentare

Zum Wochenausklang habe ich noch ein paar fantastische 3D Animationen für Euch. Die animierten 3D- Darstellungen stammen aus der Bespielsammlung von three.js. Mit der JavaScript-Bibliothek three.js lassen sich im Browser animierte Darstellungen in 3D erstellen. three.js erzeugt mit Hilfe der Anaglyphenbildtechnik einen räumlichen Eindruck.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels "3D im Internet: three.js webgl - materials - cube reflection" schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Download Blogbeitrag von R23 als PDF Download PDF

Meine Stammleser können sich sicherlich noch an die 3D Teekanne auf einer Brücke erinnern?

Navigationshilfe

3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen
Verschieben: die mittleren Maustaste gedrückt halten und die Maus bewegen

Die Beispiele kannst du dir in einem neuen Browser-Fenster anzeigen lassen.
https://blog.r23.de/3d/loader/cubemap.html

Auf der Brücke drehen wir heute in der Luft die Autos: Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 und Chevrolet Camaro. In den 3D Animationen können wir die Lackierung per Klick ändern. Bugatti Veyron wurde von Troyano, Lamborghini Gallardo wurde von machman_3d, Ferrari F50 wurde von daniel sathya und Chevrolet Camaro wurde von dskfnwn erstellt.

Bevor wir uns die 3D Animation ansehen noch etwas Physik.

Das Einkörperproblem

Stellen Sie sich ein Universum vor, das abgesehen von einem einzigen Himmelskörper (Masse) wie einem Stern oder Planeten gänzlich leer ist. Bei einem solchen Universum stellt sich folgendes Einkörperproblem:

Wie können Sie anhand einer anfänglichen Position und Geschwindigkeit für die Masse die Bewegung der Masse als Funktion der Zeit vorhersagen?

Die Antwort ist, wie Sie vielleicht wissen, einfach:

  • Wenn die Geschwindigkeit v der Masse 0 ist, bewegt sich die Masse nie (keine Bewegung).
  • Wenn die Geschwindigkeit v der Masse nicht 0 ist, bewegt sich die Masse mit einer konstanten Geschwindigkeit und Richtung entsprechend v.

Obwohl es beim Einkörperproblem keine interessante Dynamik gibt, bietet es doch die Möglichkeit, ein Three.js-"Universum" einzurichten.

Das Beispiel kannst du dir in einem neuen Browser-Fenster anzeigen lassen.
https://blog.r23.de/r23webvr/three.js-r86/examples/webgl_materials_cars.html

Code

Der Quellcode für die 3D-Oberflächenmodelle ist verfügbar.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - materials - cube reflection [cars]</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background:#000;
				color:#fff;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:georgia;
				text-align:center;
			}
			h1 { }
			a { color:skyblue; text-decoration:none }
			canvas { pointer-events:none; z-index:10; position:relative; }

			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }

			.bwrap { margin:0.5em 0 0 0 }
			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
			button:hover { background:#333 }
			#buttons_cars button { color:#fa0 }

			#car_info { text-align:center; }
			#car_name { font-size:1em }
			#car_author { font-size:1em }

			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
		</style>
	</head>

	<body>
		<div id="d">
			<div id="info">
				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl demo :
				texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> :
				<span id="car_info">
					<span id="car_name">Bugatti Veyron model</span>
					by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a></span>
				</span>

			</div>

			<div id="buttons_cars" class="bwrap">
				<button id="veyron">Bugatti Veyron</button>
				<button id="gallardo">Lamborghini Gallardo</button>
				<button id="f50">Ferrari F50</button>
				<button id="camaro">Chevrolet Camaro</button>
			</div>

			<div id="buttons_materials" class="bwrap"></div>
		</div>

		<script src="../build/three.js"></script>

		<script src="js/loaders/BinaryLoader.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var STATS_ENABLED = false;

			var CARS = {

				"veyron": 	{

					name:	"Bugatti Veyron",
					url: 	"obj/veyron/VeyronNoUv_bin.js",
					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>',
					init_rotation: [ 0, 0, 0 ],
					scale: 5.5,
					init_material: 4,
					body_materials: [ 2 ],

					object: null,
					buttons: null,
					materials: null

				},

				"gallardo": {

					name: 	"Lamborghini Gallardo",
					url:	"obj/gallardo/GallardoNoUv_bin.js",
					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>',
					init_rotation: [ 0, 0, 0 ],
					scale: 3.7,
					init_material: 9,
					body_materials: [ 3 ],

					object:	null,
					buttons: null,
					materials: null

				},

				"f50": {

					name: 	"Ferrari F50",
					url:	"obj/f50/F50NoUv_bin.js",
					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>',
					init_rotation: [ 0, 0, 0 ],
					scale: 0.175,
					init_material: 2,
					body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],

					object:	null,
					buttons: null,
					materials: null

				},

				"camaro": {

					name: 	"Chevrolet Camaro",
					url:	"obj/camaro/CamaroNoUv_bin.js",
					author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>',
					init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
					scale: 75,
					init_material: 0,
					body_materials: [ 0 ],

					object:	null,
					buttons: null,
					materials: null

				}

			};


			var container, stats;

			var camera, scene, renderer;

			var m, mi;

			var directionalLight, pointLight;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var loader = new THREE.BinaryLoader();

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// CAMERAS

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );

				// SCENE

				var textureCube = new THREE.CubeTextureLoader()
					.setPath( 'textures/cube/Bridge2/')
					.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );

				scene = new THREE.Scene();
				scene.background = textureCube;

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0x050505 );
				scene.add( ambient );

				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
				directionalLight.position.set( 2, 1.2, 10 ).normalize();
				scene.add( directionalLight );

				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
				directionalLight.position.set( -2, 1.2, -10 ).normalize();
				scene.add( directionalLight );

				pointLight = new THREE.PointLight( 0xffaa00, 2 );
				pointLight.position.set( 2000, 1200, 10000 );
				scene.add( pointLight );

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setFaceCulling( THREE.CullFaceNone );

				container.appendChild( renderer.domElement );

				if ( STATS_ENABLED ) {

					stats = new Stats();
					container.appendChild( stats.dom );

				}

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

				// common materials

				var mlib = {

				"Orange": 	new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
				"Blue": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
				"Red": 		new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
				"Black": 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
				"White":	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),

				"Carmine": 	new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Gold": 	new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Bronze":	new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
				"Chrome": 	new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),

				"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Blue metal": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Red metal": 	new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Green metal": 	new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
				"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),

				"Pure chrome": 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
				"Dark chrome":	new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
				"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),

				"Black glass": 	new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
				"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
				"Blue glass":	new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
				"Light glass":	new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),

				"Red glass":	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
				"Yellow glass":	new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
				"Orange glass":	new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),

				"Orange glass 50":	new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
				"Red glass 50": 	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),

				"Fullblack rough":	new THREE.MeshLambertMaterial( { color: 0x000000 } ),
				"Black rough":		new THREE.MeshLambertMaterial( { color: 0x050505 } ),
				"Darkgray rough":	new THREE.MeshLambertMaterial( { color: 0x090909 } ),
				"Red rough":		new THREE.MeshLambertMaterial( { color: 0x330500 } ),

				"Darkgray shiny":	new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
				"Gray shiny":		new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )

				};

				// Gallardo materials

				CARS[ "gallardo" ].materials = {

					body: [

						[ "Orange", 	mlib[ "Orange" ] ],
						[ "Blue", 		mlib[ "Blue" ] ],
						[ "Red", 		mlib[ "Red" ] ],
						[ "Black", 		mlib[ "Black" ] ],
						[ "White", 		mlib[ "White" ] ],

						[ "Orange metal", 	mlib[ "Orange metal" ] ],
						[ "Blue metal", 	mlib[ "Blue metal" ] ],
						[ "Green metal", 	mlib[ "Green metal" ] ],
						[ "Black metal", 	mlib[ "Black metal" ] ],

						[ "Carmine", 	mlib[ "Carmine" ] ],
						[ "Gold", 		mlib[ "Gold" ] ],
						[ "Bronze", 	mlib[ "Bronze" ] ],
						[ "Chrome", 	mlib[ "Chrome" ] ]

					]

				};

				m = CARS[ "gallardo" ].materials;
				mi = CARS[ "gallardo" ].init_material;

				CARS[ "gallardo" ].mmap = {

					0: mlib[ "Pure chrome" ], 	// wheels chrome
					1: mlib[ "Black rough" ],   // tire
					2: mlib[ "Black glass" ], 	// windshield
					3: m.body[ mi ][ 1 ], 		// body
					4: mlib[ "Red glass" ],    	// back lights
					5: mlib[ "Yellow glass" ],  // front lights
					6: mlib[ "Dark chrome" ]	// windshield rim

				};

				// Veyron materials

				CARS[ "veyron" ].materials = {

					body: [

						[ "Orange metal", 	mlib[ "Orange metal" ] ],
						[ "Blue metal", 	mlib[ "Blue metal" ] ],
						[ "Red metal", 		mlib[ "Red metal" ] ],
						[ "Green metal",	mlib[ "Green metal" ] ],
						[ "Black metal", 	mlib[ "Black metal" ] ],

						[ "Gold", 		mlib[ "Gold" ] ],
						[ "Bronze", 	mlib[ "Bronze" ] ],
						[ "Chrome", 	mlib[ "Chrome" ] ]

					]

				};

				m = CARS[ "veyron" ].materials;
				mi = CARS[ "veyron" ].init_material;

				CARS[ "veyron" ].mmap = {

					0: mlib[ "Black rough" ],		// tires + inside
					1: mlib[ "Pure chrome" ],		// wheels + extras chrome
					2: m.body[ mi ][ 1 ], 			// back / top / front torso
					3: mlib[ "Dark glass" ],		// glass
					4: mlib[ "Pure chrome" ],		// sides torso
					5: mlib[ "Pure chrome" ],		// engine
					6: mlib[ "Red glass 50" ],		// backlights
					7: mlib[ "Orange glass 50" ]	// backsignals

				};

				// F50 materials

				CARS[ "f50" ].materials = {

					body: [

						[ "Orange", 	mlib[ "Orange" ] ],
						[ "Blue", 		mlib[ "Blue" ] ],
						[ "Red", 		mlib[ "Red" ] ],
						[ "Black", 		mlib[ "Black" ] ],
						[ "White", 		mlib[ "White" ] ],

						[ "Orange metal", 	mlib[ "Orange metal" ] ],
						[ "Blue metal", 	mlib[ "Blue metal" ] ],
						[ "Black metal", 	mlib[ "Black metal" ] ],

						[ "Carmine", 	mlib[ "Carmine" ] ],
						[ "Gold", 		mlib[ "Gold" ] ],
						[ "Bronze", 	mlib[ "Bronze" ] ],
						[ "Chrome", 	mlib[ "Chrome" ] ]

					]

				};

				m = CARS[ "f50" ].materials;
				mi = CARS[ "f50" ].init_material;

				CARS[ "f50" ].mmap = {

					0:  mlib[ "Dark chrome" ], 		// interior + rim
					1:  mlib[ "Pure chrome" ], 		// wheels + gears chrome
					2:  mlib[ "Blue glass" ], 		// glass
					3:  m.body[ mi ][ 1 ], 			// torso mid + front spoiler
					4:  mlib[ "Darkgray shiny" ], 	// interior + behind seats
					5:  mlib[ "Darkgray shiny" ], 	// tiny dots in interior
					6:  m.body[ mi ][ 1 ], 			// back torso
					7:  m.body[ mi ][ 1 ], 			// right mirror decal
					8:  m.body[ mi ][ 1 ], 			// front decal
					9:  m.body[ mi ][ 1 ], 			// front torso
					10: m.body[ mi ][ 1 ], 			// left mirror decal
					11: mlib[ "Pure chrome" ], 		// engine
					12: mlib[ "Darkgray rough" ],	// tires side
					13: mlib[ "Darkgray rough" ],	// tires bottom
					14: mlib[ "Darkgray shiny" ], 	// bottom
					15: mlib[ "Black rough" ],		// ???
					16: mlib[ "Orange glass" ],		// front signals
					17: mlib[ "Dark chrome" ], 		// wheels center
					18: mlib[ "Red glass" ], 		// back lights
					19: mlib[ "Black rough" ], 		// ???
					20: mlib[ "Red rough" ], 		// seats
					21: mlib[ "Black rough" ], 		// back plate
					22: mlib[ "Black rough" ], 		// front light dots
					23: m.body[ mi ][ 1 ], 			// back torso
					24: m.body[ mi ][ 1 ] 			// back torso center

				};


				// Camero materials

				CARS[ "camaro" ].materials = {

					body: [

						[ "Orange", 	mlib[ "Orange" ] ],
						[ "Blue", 		mlib[ "Blue" ] ],
						[ "Red", 		mlib[ "Red" ] ],
						[ "Black", 		mlib[ "Black" ] ],
						[ "White", 		mlib[ "White" ] ],

						[ "Orange metal", 	mlib[ "Orange metal" ] ],
						[ "Blue metal", 	mlib[ "Blue metal" ] ],
						[ "Red metal", 		mlib[ "Red metal" ] ],
						[ "Green metal", 	mlib[ "Green metal" ] ],
						[ "Black metal", 	mlib[ "Black metal" ] ],

						[ "Gold", 		mlib[ "Gold" ] ],
						[ "Bronze", 	mlib[ "Bronze" ] ],
						[ "Chrome", 	mlib[ "Chrome" ] ]

					]

				};

				m = CARS[ "camaro" ].materials;
				mi = CARS[ "camaro" ].init_material;

				CARS[ "camaro" ].mmap = {

					0: m.body[ mi ][ 1 ], 			//  body
					1: mlib[ "Pure chrome" ], 		// wheels chrome
					2: mlib[ "Pure chrome" ], 		// grille chrome
					3: mlib[ "Dark chrome" ], 		// door lines
					4: mlib[ "Light glass" ], 		// windshield
					5: mlib[ "Gray shiny" ],        // interior
					6: mlib[ "Black rough" ],       // tire
					7: mlib[ "Fullblack rough" ],   // tireling
					8: mlib[ "Fullblack rough" ]    // behind grille

				};

				loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );

				for( var c in CARS ) initCarButton( c );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function initCarButton( car ) {

				$( car ).addEventListener( 'click', function() {

					if ( ! CARS[ car ].object ) {

						loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );

					} else {

						switchCar( car );

					}

				}, false );

			}

			function $( id ) { return document.getElementById( id ) }
			function button_name( car, index ) { return "m_" + car  + "_" + index }

			function switchCar( car ) {

				for ( var c in CARS ) {

					if ( c != car && CARS[ c ].object ) {

						CARS[ c ].object.visible = false;
						CARS[ c ].buttons.style.display = "none";

					}
				}

				CARS[ car ].object.visible = true;
				CARS[ car ].buttons.style.display = "block";

				$( "car_name" ).innerHTML = CARS[ car ].name + " model";
				$( "car_author" ).innerHTML = CARS[ car ].author;

			}

			function createButtons( materials, car ) {

				var buttons, i, src = "";

				for( i = 0; i < materials.length; i ++ ) {

					src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';

				}

				buttons = document.createElement( "div" );
				buttons.innerHTML = src;

				$( "buttons_materials" ).appendChild( buttons );

				return buttons;

			}

			function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {

				for( var i = 0; i < materials.length; i ++ ) {

					$( button_name( car, i ) ).counter = i;
					$( button_name( car, i ) ).addEventListener( 'click', function() {

						for ( var j = 0; j < material_indices.length; j ++ ) {

							faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];

						}

					}, false );

				}

			}

			function createScene( geometry, car ) {

				geometry.sortFacesByMaterialIndex();

				var m = [],
					s = CARS[ car ].scale * 1,
					r = CARS[ car ].init_rotation,
					materials = CARS[ car ].materials,
					mi = CARS[ car ].init_material,
					bm = CARS[ car ].body_materials;

				for ( var i in CARS[ car ].mmap ) {

					m[ i ] = CARS[ car ].mmap[ i ];

				}

				var mesh = new THREE.Mesh( geometry, m );

				mesh.rotation.x = r[ 0 ];
				mesh.rotation.y = r[ 1 ];
				mesh.rotation.z = r[ 2 ];

				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;

				scene.add( mesh );

				CARS[ car ].object = mesh;

				CARS[ car ].buttons = createButtons( materials.body, car );
				attachButtonMaterials( materials.body, m, bm, car );

				switchCar( car );

			}

			function onDocumentMouseMove(event) {

				mouseY = ( event.clientY - window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				var timer = -0.0002 * Date.now();

				camera.position.x = 1000 * Math.cos( timer );
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.position.z = 1000 * Math.sin( timer );

				camera.lookAt( scene.position );

				renderer.render( scene, camera );

				if ( STATS_ENABLED ) stats.update();

			}

		</script>

	</body>
</html>

Nützliche Links

Aktivieren Sie JavaScript um das Video zu sehen.
Video-Link: https://blog.r23.de/software/open-source/3d-im-internet-openctm-camaro/
Aktivieren Sie JavaScript um das Video zu sehen.
Video-Link: https://blog.r23.de/software/open-source/blender/panorama-cube-mapping-oder-cubic-environment-mapping/

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Egal ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.

3D im Internet: three.js webgl - materials - cube reflection 1

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Hat Ihnen dieser Artikel gefallen?

Mit Ihrer Bewertung helfen Sie uns, unsere Inhalte noch weiter zu verbessern.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23

Verwandte Artikel

Azure Kinect DK
weiterlesen +

Azure Kinect DK

Azure Kinect DK ist ein Entwicklerkit mit einer erstklassigen 1-Megapixel-Tiefenkamera, einer …

Was Web-AR bedeutet (Augmented Reality on the Web)
weiterlesen +

Was Web-AR bedeutet (Augmented Reality on the Web)

Die 3D-Modelle in dem Online-Shop auf r23:Blog stehen in der Regel als interaktives Augmented …

Wie kann man 3D-Modelle im Polygon File Format im Web darstellen?
weiterlesen +

Wie kann man 3D-Modelle im Polygon File Format im Web darstellen?

Unsere Atelier für Virtual Reality und interaktive Markenerlebnisse in Hagen erstellt zurzeit …


Tutorial: Kinect für Windows SDK Tutorial:
weiterlesen +

Tutorial: Kinect für Windows SDK Tutorial:

Am letzten Wochenende haben wir Kinect for Windows – wie berichtet – in unserem …

3D-Scans mit Windows 10
weiterlesen +

3D-Scans mit Windows 10

Wir richten zurzeit ein Motion Capture Studio für Blender-Anwender ein. Unter Motion …

Facebook 3D Posts: Den News Feed in 3D.
weiterlesen +

Facebook 3D Posts: Den News Feed in 3D.

Geht es um Virtual Reality sprechen wir von immersive experiences. Für Facebook bedeutet dies …


Ralf Dreiundzwanzig (R23) Hagen

VR / AR / XR - 3D Modelle bereit für Metaverse, Augmented Reality, Virtual Reality und Echtzeit-Applikationen

Wir sind ein Atelier für Metaverse Inhalte und interaktive Markenerlebnisse. Unsere 3D-Modelle werden am besten in Echtzeitanwendungen eingesetzt, die eine schnelle Verarbeitung erfordern, wie Virtual Reality (VR), Augmented Reality (AR), Mixed Reality (MR) und Cross Reality (XR) . Sparen Sie Entwicklungszeit und -kosten, machen Sie Prototypenerfahrungen oder verwenden Sie unsere 3D-Modelle in Ihrem V/AR Projekt.

3D-Visualisierung
3D-Scan - Dienstleistung

Angebot anfordern

Versuchen Sie "@Ralf Dreiundzwanzig@blog.r23.de" zu folgen, indem Sie bei Mastodon, Friendica und Co danach suchen.

R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23