kramann.info
© Guido Kramann

Login: Passwort:










2.9 Dreidimensionale Animationen mit Hilfe der Library three.js

2.9 Three-dimensional animations using the library three.js (EN google-translate)

2.9 Trójwymiarowe animacje korzystające z biblioteki three.js (PL google-translate)

Es existieren verschiedene Libraries, die die Fähifkeiten von Javascript um die Möglichkeit 3D-Objekte darzustellen und zu animieren erweitern.

There are several libraries that have the capabilities of Javascript for the possibility Expand and enhance 3D objects.

Istnieje kilka bibliotek, które mają możliwości Javascriptu z tej możliwości Rozwijaj i ulepszaj obiekty 3D.

Exemplarisch soll hier die Library "Three" verwendet werden, da diese mit Hilfe der Methoden zu Generierung von Primitiven relativ einfach benutzt werden kann und auch eine gute Dokumentation (API) bietet.

By way of example, the Library Three is to be used here, since this is using the Methods for generating primitives can be relatively easily used as well a good documentation (API) offers.

Tytułem przykładu należy tu użyć Biblioteki trzeciej, ponieważ używa ona Metody generowania prymitywów również mogą być stosunkowo łatwo wykorzystane dobra dokumentacja (API).

Siehe insbesondere: https://threejs.org/

Die komplette Library und die Dokumentation lassen sich über den Download offline verfügbar machen:

The complete library and documentation can be made available offline via the download:

Kompletną bibliotekę i dokumentację można udostępnić w trybie offline poprzez pobranie:

Download von three.js: https://github.com/mrdoob/three.js/archive/master.zip

Zur Motivation: Einige interessante Beispiele von threejs.org

Motivation: Some interesting examples from threejs.org

Motywacja: kilka interesujących przykładów z threejs.org

Die nachfolgenden Beispiele stehen auch alle im Ordner examples in master.zip zur Verfügung.

The examples below are also all available in the folder examples in master.zip.

Poniższe przykłady są również dostępne w przykładach folderów w master.zip.

Alle Beispiele: https://threejs.org/examples/index.html
Erde: canvas_geometry_earth.html
Wüfel in 3D-Raum einfügen: canvas_interactive_voxelpainter.html
Kugelhaufen: webgl_postprocessing_msaa_unbiased.html
Molekülmodelle: css3d_molecules.html
Periodensystem anordnen: css3d_periodictable.html
Innenraum als Hintergrund mit spiegelnden Objekten darin: webgl_materials_cubemap_dynamic2.html
Meer: webgl_shaders_ocean.html
Seifenblasen: webgl_materials_shaders_fresnel.html
Vogelschwärme: canvas_geometry_birds.html
Stereoskopische Darstellung, z.B. zur Benutzeung mit einer VR-Brille, in die ein Smartphone eingesetzt wird: webgl_effects_stereo.html

Text darstellen:

Show text:

Pokaż tekst:

Text1: webgl_geometry_text.html
Text2: webgl_geometry_text_earcut.html
Text3: webgl_geometry_text_pnltri.html

Stimmung / Wetter / Schatten

Mood / Weather / Shadow

Nastrój / Pogoda / Cień

Schatten: webgl_shadowmap.html
Nebel: webgl_postprocessing_godrays.html

Getting Started

Getting Started

Pierwsze kroki

Die nachfolgenden Beispiele funktionieren unter der Voraussetzung, dass unterhalb von htdocs auf dem (XAMPP-) Server der Inhalt des Ordners ..../three.js-master in techne/three abgelegt wurde.

The following examples work on the assumption that below htdocs on the (XAMPP) server the contents of the .... / three.js-master folder was filed in techne / three.

Poniższe przykłady działają przy założeniu, że poniżej htdocs na serwerze (XAMPP) zawartość folderu .... / three.js-master został złożony w techne / trzy.

Eine Einführung in Beispielen

An introduction to examples

Wprowadzenie do przykładów

Beispiel 1:

Example 1:

Przykład 1


<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script src="http://localhost/techne/three/build/three.js"></script>
        <script src="http://localhost/techne/three/examples/js/renderers/Projector.js"></script>
        <script src="http://localhost/techne/three/examples/js/renderers/CanvasRenderer.js"></script>
        <script src="http://localhost/techne/three/examples/js/libs/stats.min.js"></script>
        <script language:javascript>

        function KUBUSANIMATION()
        {
                        const BREITE = 400;
                        const HOEHE  = 300;

                        var kubus;

                        var renderer,scene,camera;

                        function erzeugeKubus()
                        {
				var geometry = new THREE.BoxGeometry( 200, 200, 200 );

				for ( var i = 0; i < geometry.faces.length; i += 2 ) {

					var hex = Math.random() * 0xffffff;
					geometry.faces[ i ].color.setHex( hex );
					geometry.faces[ i + 1 ].color.setHex( hex );

				}

				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );

				var cube = new THREE.Mesh( geometry, material );
				cube.position.y = 150;
                                return cube;
                        }

                        function erzeugeSceneInID(ID)
                        {
				camera = new THREE.PerspectiveCamera( 70, BREITE / HOEHE, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;

				scene = new THREE.Scene();

				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0xf0f0f0 );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( BREITE, HOEHE );

				document.getElementById(ID).appendChild( renderer.domElement );

                                return scene;
                        }

			this.init = function() 
                        {
                                scene = erzeugeSceneInID("container");

                                kubus = erzeugeKubus();
				scene.add( kubus );


                                animate();
			}

			function animate() 
                        {
				requestAnimationFrame( animate );
				render();
			}

			function render() 
                        {
                                kubus.rotation.y+=0.02;
				renderer.render( scene, camera );
			}
        }       

        var kubusanimation = new KUBUSANIMATION();

        </script>
    </head>
    <body>
        <input style="width:200px" type="button" id="snap" value="malen" onclick="javascript:kubusanimation.init()"/>
        <div id="container"></div>
    </body>
</html>

Code 2.9-1: Quelltext zu obigem Beispiel.

Beispiel 2:

There are several libraries that have the capabilities of Javascript for the possibility Expand and enhance 3D objects.

Istnieje kilka bibliotek, które mają możliwości Javascriptu z tej możliwości Rozwijaj i ulepszaj obiekty 3D.

<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script src="http://localhost/techne/three/build/three.js"></script>
        <script src="http://localhost/techne/three/examples/js/renderers/Projector.js"></script>
        <script src="http://localhost/techne/three/examples/js/renderers/CanvasRenderer.js"></script>
        <script src="http://localhost/techne/three/examples/js/libs/stats.min.js"></script>
        <script language:javascript>

            const SPEED = 10;

            let HEXA = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];

            var muenzwurf_x = 0.901;

            function muenzwurf()
            {
                muenzwurf_x = 3.92*muenzwurf_x*(1.0-muenzwurf_x);
                return (Math.round(muenzwurf_x*1000.0))%2;
            }

            function zufall(max)
            {
                var x = 0;
                var y = 0;
                var z = 0;
                for(var i=0;i<1000;i++)
                {
                    x+=muenzwurf();
                    y+=muenzwurf();
                    z+=muenzwurf();
                }
                return (x+y*103+z*911)%max;
            }

            //Farbbeispiele: http://html-color-codes.com/rgb.html
            function farbe(r,g,b)
            {
                return "#"+HEXA[Math.floor(r/16)]+HEXA[r%16]+HEXA[Math.floor(g/16)]+HEXA[g%16]+HEXA[Math.floor(b/16)]+HEXA[b%16];         
            }


        function KUGELANIMATION()
        {
                        const BREITE = 400;
                        const HOEHE  = 300;

                        var kugel = new Array();
                        var kugelxyz = new Array();

                        var renderer,scene,camera;


                        var xz    = [0,0];
                        var xzrot = [0,0];
                        var phi   = 0.0;

                        function dreheUmYachse(xz,phi,xzrot)
                        {
                            xzrot[0] =  Math.cos(phi)*xz[0] + Math.sin(phi)*xz[1];
                            xzrot[1] = -Math.sin(phi)*xz[0] + Math.cos(phi)*xz[1];
                        }
                        

                        function erzeugeSphere(RADIUS,ROT,GRUEN,BLAU,X,Y,Z,rotX,rotY,rotZ)
                        {
				var geometry = new THREE.SphereGeometry( RADIUS, 32, 32 );
                                var hex = Math.random() * 0xffffff;
				for ( var i = 0; i < geometry.faces.length; i += 2 ) {

					geometry.faces[ i ].color.setHex( hex );
					geometry.faces[ i + 1 ].color.setHex( hex );

				}


				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );

				var sphere = new THREE.Mesh( geometry, material );
                                sphere.position.x=X;
                                sphere.position.y=Y;
                                sphere.position.z=Z;

                                sphere.rotation.x=rotX;
                                sphere.rotation.y=rotY;
                                sphere.rotation.z=rotZ;

                                return sphere;
                        }

                        function erzeugeSceneInID(ID)
                        {
				camera = new THREE.PerspectiveCamera( 70, BREITE / HOEHE, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;

				scene = new THREE.Scene();

				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0xf0f0f0 );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( BREITE, HOEHE );

				document.getElementById(ID).appendChild( renderer.domElement );

                                return scene;
                        }

                        function erzeugeZufallskugel()
                        {
                            var r = 10+zufall(20);

                            var rot   = zufall(256);
                            var gruen = zufall(256);
                            var blau  = zufall(256);

                            return erzeugeSphere(r,rot,gruen,blau,0,0,0,0,0,0);
                        }

			this.init = function() 
                        {
                                scene = erzeugeSceneInID("container_kugel");


                                for(var i=0;i<10;i++)
                                {
                                    var kneu = erzeugeZufallskugel();
                                    scene.add( kneu );
                                    kugel[kugel.length]=kneu;

                                    var xyz = new Array(0,0,0);
                                    xyz[0] = zufall(200)-100;
                                    xyz[1] = zufall(200)-100 + 200;
                                    xyz[2] = zufall(200)-100;
                                    kugelxyz[kugelxyz.length] = xyz;
                                }
                                animate();
			}

			function animate() 
                        {
				requestAnimationFrame( animate );
				render();
			}

			function render() 
                        {
 
                            for(var i=0;i<5;i++)
                            {
                                var nr = zufall(kugel.length);      
                                var aktion = zufall(6);
                                var xyz = kugelxyz[nr];
                                if(aktion==0)
                                    xyz[0]+=SPEED;
                                else if(aktion==1)
                                    xyz[0]-=SPEED;
                                else if(aktion==2)
                                    xyz[1]+=SPEED;
                                else if(aktion==3)
                                    xyz[1]-=SPEED;
                                else if(aktion==4)
                                    xyz[2]+=SPEED;
                                else //if(aktion==5)
                                    xyz[2]-=SPEED;
                            }

                                for(var i=0;i<kugel.length;i++)
                                {
                                    xz[0] = kugelxyz[i][0];  
                                    xz[1] = kugelxyz[i][2];  

                                    dreheUmYachse(xz,phi,xzrot);

                                    kugel[i].position.x = xzrot[0];
                                    kugel[i].position.y = kugelxyz[i][1];
                                    kugel[i].position.z = xzrot[1];
                                }
                                
				renderer.render( scene, camera );

                                phi+=0.03;
			}
        }       

        var kugelanimation = new KUGELANIMATION();

        </script>
    </head>
    <body>
        <input style="width:200px" type="button" id="snap" value="malen" onclick="javascript:kugelanimation.init()"/>
        <div id="container_kugel"></div>
    </body>
</html>

Code 2.9-1: Quelltext zu obigem Beispiel.

Reengineering

There are several libraries that have the capabilities of Javascript for the possibility Expand and enhance 3D objects.

Istnieje kilka bibliotek, które mają możliwości Javascriptu z tej możliwości Rozwijaj i ulepszaj obiekty 3D.

Zur Einarbeitung in three.js wurde das Beispiel canvas_geometry_cube.html so lange vereinfacht und umgeschrieben, bis der entstandene Code sich in dem Autor vertrauten Strukturen darbot.

By way of example, the Library Three is to be used here, since this is using the Methods for generating primitives can be relatively easily used as well a good documentation (API) offers.

Tytułem przykładu należy tu użyć Biblioteki trzeciej, ponieważ używa ona Metody generowania prymitywów również mogą być stosunkowo łatwo wykorzystane dobra dokumentacja (API).

reengineering.zip - Alle Varianten, die im Verlauf dieser Arbeit entstanden sind.