Hey, I'm currently working on incorporating a background image into my Three JS project.
Although the code is functioning properly, the background isn't being displayed. Here is my init function:
function init(){
// Creating a new scene
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
BOXWIDTH = 20;
// Renderer
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH,HEIGHT);
document.body.appendChild(renderer.domElement);
// PerspectiveCamera (Field of view, Aspect ratio, Near distance, Far distance)
camera = new THREE.PerspectiveCamera(45,WIDTH/HEIGHT,1,20000000);
camera.position.set(0,8000,0);
scene.add(camera);
// Resizer
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Setting the background color of the scene.
// Loading the background texture
var texture = THREE.ImageUtils.loadTexture( 'images/background.jpg' );
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
map: texture
}));
backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;
// Creating the background scene
backgroundScene = new THREE.Scene();
backgroundCamera = new THREE.Camera();
backgroundScene.add(backgroundCamera);
backgroundScene.add(backgroundMesh);
// Creating a light, setting its position, and adding it to the scene.
var light = new THREE.PointLight(0xaaaaaa);
light.position.set(-100,200,100);
scene.add(light);
// Initializing object for world/screen calculations
projector = new THREE.Projector();
// Adding OrbitControls for mouse panning.
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 0;
controls.maxDistance = 7000000;
// To update mouse position on move
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
Here is my render function
function animate() {
// Learn more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Rendering the scene
renderer.autoClear = false;
renderer.clear();
renderer.render(backgroundScene, backgroundCamera);
renderer.render(scene, camera);
controls.update();
// Updating tweens from TWEEN library
TWEEN.update();
update();
}
Could there be a step that I overlooked?