I'm struggling to achieve a simple setup in my scene where a plane serves as the background with a shader, and a box is placed on top with a lambert material. Despite my efforts, I can't seem to make both the plane and the box appear together. Any suggestions on what I might be misunderstanding or overlooking?
For those who want to take a look, here is the jsfiddle link: http://jsfiddle.net/5zTz3/
Index.html
<html>
<head>
<title>The Cube</title>
<style>
canvas { width: 100%; height: 100%; }
body{margin: 0px;}
</style>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position,1);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 resolution;
void main() {
vec2 coord = gl_FragCoord.xy;
float xmid = resolution.x/2.0;
float ymid = resolution.y/2.0;
float x = (coord.x - xmid)/resolution.x;
float y = (coord.y-ymid)/resolution.y;
float r = sqrt(x*x + y*y)+0.5;
vec4 color = vec4(1.0-vec2(r),1.3-r,1.0);
gl_FragColor = color;
}
</script>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="scene.js">
</script>
</body>
</html>
scene.js
//Code for scene setup
var scene = new THREE.Scene();
function render() {
requestAnimationFrame(render);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
//Define camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
//Plane material
var uniforms = {
resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth,window.innerHeight) }
};
var planeMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
} );
//Create plane
var geometry = new THREE.PlaneGeometry(1800*2, 1600,1,1);
var plane = new THREE.Mesh(geometry, planeMaterial);
plane.position.z = - 500;
scene.add(plane);
//Create cube
var geometry = new THREE.CubeGeometry(1,1,1);
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, cubeMaterial );
scene.add( cube );
//Define Render
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//Define light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,200,100);
scene.add(light);
//render
render();
As a workaround, changing the plane geometry to another CubeGeometry ( new THREE.CubeGeometry(2,2,2); ) achieves the desired result. However, the underlying issue with the plane not working remains unclear.