kostenloser Webspace werbefrei: lima-city


Three.js - Texturen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    anti-atomkraft

    Kostenloser Webspace von anti-atomkraft

    anti-atomkraft hat kostenlosen Webspace.

    Habe vor kurzem mit Three.js angefangen und verzweifle gerade an den Texturen:
    <!Doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Sample Three.js</title>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    	<script src="js/Three.js"></script>
    	<script type="application/javascript">
    $(document).ready(function(){
    	// set the scene size
    	var WIDTH = 400,
    	    HEIGHT = 300;
    
    	// set some camera attributes
    	var VIEW_ANGLE = 45,
    	    ASPECT = WIDTH / HEIGHT,
    	    NEAR = 0.1,
    	    FAR = 10000;
    
    	// get the DOM element to attach to
    	// - assume we've got jQuery to hand
    	var $container = $('#container');
    
    	// create a WebGL renderer, camera
    	// and a scene
    	//var renderer = new THREE.WebGLRenderer();
                        var renderer=new THREE.CanvasRenderer();
    	var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
    	                                ASPECT,
    	                                NEAR,
    	                                FAR  );
    	var scene = new THREE.Scene();
    
    	// the camera starts at 0,0,0 so pull it back
    	camera.position.z = 300;
    
    	// start the renderer
    	renderer.setSize(WIDTH, HEIGHT);
    
    	// attach the render-supplied DOM element
    	$container.append(renderer.domElement);
    
    	// create the sphere's material
    var texture = THREE.ImageUtils.loadTexture('image.jpg');
    	var sphereMaterial = new THREE.MeshLambertMaterial({
    map:texture
    //color:0xCC0000
     });
    
    
    	// set up the sphere vars
    	var radius = 50, segments = 16, rings = 16;
    
    	// create a new mesh with sphere geometry -
    	// we will cover the sphereMaterial next!
    	var sphere = new THREE.Mesh(
    	   new THREE.SphereGeometry(radius, segments, rings),
    	   sphereMaterial);
    sphere.overdraw=true;
    
    	// add the sphere to the scene
    	scene.add(sphere);
    
    	// create a point light
    	var pointLight = new THREE.PointLight( 0xFFFFFF );
    
    	// set its position
    	pointLight.position.x = 10;
    	pointLight.position.y = 50;
    	pointLight.position.z = 130;
    
    	// add to the scene
    	scene.add(pointLight);
    
    	// draw!
    	renderer.render(scene, camera);
    });
    	</script>
    
    		<style>
    			#container {
    				background: #000;
    				width: 400px;
    				height: 300px;
    			}
    		</style>
    	</head>
    	<body><div id="container"></div></body>
    </html>


    Ich habe einfach mal die Farbe durch eine Textur ersetzt:
    var texture = THREE.ImageUtils.loadTexture('image.jpg');
    	var sphereMaterial = new THREE.MeshLambertMaterial({
    map:texture
    //color:0xCC0000
     });

    und sowohl mit CanvasRenderer, wie auch WebGLRenderer getestet.
    In ersterem wird die Anweisung ignoriert und der Kugel keine Farbe zugewiesen, beim WebGL-Renderer verschwindet sie einfach...
    Wenn ich stattdessen die Farbe verwende, funktioniert alles.
    Was habe ich falsch gemacht???
  2. 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!