Three.js - Texturen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

anti-atomkraft hat kostenlosen Webspace.

23:35, 13.2.2012

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

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city