Skip to content

Commit f3da181

Browse files
committed
9.3.2 Shader with internal script
1 parent 5d8d0cd commit f3da181

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

Chapter9/9.3.2.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html>
3+
<head>
4+
<script id="vs" type="x-shader/x-vertex">
5+
varying vec2 vUv;
6+
void main()
7+
{
8+
// passing texture to fragment shader
9+
vUv = uv;
10+
11+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
12+
}
13+
</script>
14+
15+
<script id="fs" type="x-shader/x-fragment">
16+
varying vec2 vUv;
17+
void main() {
18+
gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);
19+
}
20+
</script>
21+
22+
<script type="text/javascript" src="../lib/three.js"></script>
23+
24+
<script type="text/javascript">
25+
var scene = null;
26+
var camera = null;
27+
var renderer = null;
28+
29+
var material = null;
30+
var cube = null;
31+
32+
function init() {
33+
renderer = new THREE.WebGLRenderer({
34+
canvas: document.getElementById('mainCanvas')
35+
});
36+
scene = new THREE.Scene();
37+
38+
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
39+
camera.position.set(5, 15, 25);
40+
camera.lookAt(new THREE.Vector3(0, 0, 0));
41+
scene.add(camera);
42+
43+
var light = new THREE.DirectionalLight();
44+
light.position.set(3, 2, 5);
45+
scene.add(light);
46+
47+
// shader material
48+
material = new THREE.ShaderMaterial({
49+
vertexShader: document.getElementById('vs').textContent,
50+
fragmentShader: document.getElementById('fs').textContent
51+
});
52+
53+
cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), material);
54+
cube.position.x = 2;
55+
scene.add(cube);
56+
57+
draw();
58+
}
59+
60+
function draw() {
61+
cube.rotation.y += 0.01;
62+
if (cube.rotation.y > Math.PI * 2) {
63+
cube.rotation.y -= Math.PI * 2;
64+
}
65+
66+
renderer.render(scene, camera);
67+
68+
requestAnimationFrame(draw);
69+
}
70+
</script>
71+
</head>
72+
73+
<body onload="init()">
74+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)