kostenloser Webspace werbefrei: lima-city


Spielereien mit HTML, PhP, etc

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    h***********r

    Hallöchen ;)

    Da noch einige Tage Ferien sind, habe ich etwas Zeit sinnlosen Beschäftigungen nach zu gehen, nur damit man sieht was mal gemacht hat. Dabei habe ich mir einige Gedanken gemacht was so ganz lustig sein könnte, leider habe ich nicht wirklich Ideen wie man das umsetzen kann.

    Das erste was ich machen würde ist vermutlich schon nicht ganz so einfach. Ich habe eine Tabelle voller x,y und z Werte. Diese würde ich ganz gern Grafisch darstellen, sodass diese Punkte eine Art Relief erzeugen welches betrachtet werden kann. Aber wie wandle ich die Daten in eine Grafik um und vor allem, wie erzeugt man die 3D Wirkung?

    Das zweite wäre geometrische Formen in Bilder zu finden, unabhängig von deren Größe, Farbe und Rotation, um dann deren Position + Position bestimmter Punkte der Form, Rotation und Größe herraus zufinden. Letztendlich soll aus diesen Werten ein Bild aus gegebenen Formen wieder zusammen gesetzt werden können, welches dem Original evtl ähnelt. Hierbei habe ich aber keine Idee wie und ob das ganze mit halbwegs umsetzbar ist, vielleicht erst in anderen Farbraum konvertieren....

    Vielleicht fällt euch dazu etwas ein, wie man das ganze lösen könne. Dankeschön :)

    Beitrag zuletzt geändert: 28.12.2017 3:13:28 von horstexplorer
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Autor dieses Themas

    h***********r

    Dankeschön dafür :)
    PhP scheint zumindest fürs Darstellen nicht ganz geeignet. Ich habe da etwas schönes gefunden, bekomme es leider aber nicht bei mir zum laufen, evtl kann mir da jemand mit einem ganz einfachem Beispiel helfen (1 Punkt im Raum), bekomme den Code nicht richtig zusammen gebaut.
    https://threejs.org
    Bsp für Anwendungen
    https://threejs.org/examples/
  4. das ist Javascript, damit bin ich vorerst raus! Nicht meine Domäne

    Aber hab es grad mal ein weig durchforstet. Sieht echt interessant aus, werd mal das nutzen um ein wenig mit zu spielen bei Gelegenheit

    Beitrag zuletzt geändert: 29.12.2017 12:46:48 von tchiarcos
  5. Autor dieses Themas

    h***********r

    Haben da ein hübsches Beispiel:
    <html>
    	<head>
    		<title>My first three.js app</title>
    		<style>
    			body { margin: 0; }
    			canvas { width: 100%; height: 100% }
    		</style>
    	</head>
    	<body>
    		<script src="js/three.js"></script>
    		<script>
    			var scene = new THREE.Scene();
    			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setSize( window.innerWidth, window.innerHeight );
    			document.body.appendChild( renderer.domElement );
    
    			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    			var cube = new THREE.Mesh( geometry, material );
    			scene.add( cube );
    
    			camera.position.z = 5;
    
    			var animate = function () {
    				requestAnimationFrame( animate );
    
    				cube.rotation.x += 0.01;
    				cube.rotation.y += 0.01;
    
    				renderer.render(scene, camera);
    			};
    
    			animate();
    		</script>
    	</body>
    </html>

    Nur leider kann die Scene nicht per Maus rotiert werden. Evtl bekomme ich noch raus wie das geht.
    //Edit
    Das war einfacher als ich dachte:
    <html>
    	<head>
    		<title>My first three.js app</title>
    		<style>
    			body { margin: 0; }
    			canvas { width: 100%; height: 100% }
    		</style>
    	</head>
    	<body>
    		<script src="js/three.js"></script>
    		<script src="js/OrbitControls.js"></script>
    		<script>
    			var scene = new THREE.Scene();
    			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    
    			var renderer = new THREE.WebGLRenderer();
    			renderer.setSize( window.innerWidth, window.innerHeight );
    			document.body.appendChild( renderer.domElement );
    
    			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    			var cube = new THREE.Mesh( geometry, material );
    			scene.add( cube );
    
    			camera.position.z = 5;
    
    			var animate = function () {
    				requestAnimationFrame( animate );
    
    				cube.rotation.x += 0.00;
    				cube.rotation.y += 0.00;
    
    				renderer.render(scene, camera);
    			};
    
    			animate();
    			controls = new THREE.OrbitControls( camera, renderer.domElement );
    		</script>
    	</body>
    </html>

    Die andere js gibts hier https://gist.github.com/mrflix/8351020

    Beitrag zuletzt geändert: 29.12.2017 14:10:35 von horstexplorer
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!