Struggling with applying a basic custom shader to a cube in Three.js. Whenever I attempt to use the shader, the cube mysteriously vanishes. No issues when using a standard Toon or Lambert Material - cube rotates and behaves as expected.
Oddly, Orbit Controls cease to function when the custom shader is applied. Despite studying numerous examples, I can't seem to figure it out.
// Setting up the Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z =3;
// Creating Light
var light = new THREE.PointLight(0xFE938C, 1.5);
light.position.set(0,5,20);
scene.add(light);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var uniforms = {
u_time: {type: 'f', value: 0.2},
u_resolution: {type: 'v2', value: new THREE.Vector2()},
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0);
scene.add(cube);
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
}
</script>