mrdoob/three.js — Issue #1456: Textures in Canvas/SVG-Renderer
Author: PseudoPsycho
Created: 2012-03-06 15:55:32+00:00
State: open

Hello together!
I've got a little problem with the renderers...
If I use WebGL-Renderer the script'll work fine; but with Canvas or SVG I haven't got any chance,
because the textures are not getting loaded. :(
What am I doing wrong???

Here's the script:

var renderer;
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();

function animate(lastTime, angularSpeed, three){
// update
var date = new Date();
var time = date.getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
three.sphere.rotation.y += angleChange;
lastTime = time;

// render
three.renderer.render(three.scene, three.camera);

// request new frame
requestAnimFrame(function(){
animate(lastTime, angularSpeed, three);
});
}

function fullscreen(){
if( THREEx.FullScreen.activated() ){
THREEx.FullScreen.cancel();
}else{
THREEx.FullScreen.request(document.getElementById('animation'));
} }

function screenshot(){
var dataUrl = renderer.domElement.toDataURL('image/png');
window.open(dataUrl, 'ScreenShot'); }

window.onload = function(){
var angularSpeed = 0.2;
var lastTime = 0;

// renderer
renderer = new THREE.WebGLRenderer({ clearAlpha: 0, clearColor: 0x000000, antialias: false, preserveDrawingBuffer: true });
renderer.setSize(window.innerWidth/2, window.innerHeight/2);
document.getElementById('animation').appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;

// scene
var scene = new THREE.Scene();
scene.add(camera);

// material
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('inc/test/image.jpg'),
});

// sphere
var sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 200, 200), material);
sphere.overdraw = true;
scene.add(sphere);

// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x000000);
//scene.add(ambientLight);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 5).normalize();
scene.add(directionalLight);

// create wrapper object that contains three.js objects
var three = {
renderer: renderer,
camera: camera,
scene: scene,
sphere: sphere
};

animate(lastTime, angularSpeed, three); }