Habe vor kurzem mit [Only registered and activated users can see links. Click Here To Register...] angefangen und verzweifle gerade an den Texturen:
Ich habe einfach mal die Farbe durch eine Textur ersetzt:
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???
Code:
<!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>
Code:
var texture = THREE.ImageUtils.loadTexture('image.jpg');
var sphereMaterial = new THREE.MeshLambertMaterial({
map:texture
//color:0xCC0000
});
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???
