Skip to content

Commit 30e9341

Browse files
author
Jos Dirksen
committed
First set of examples for chapter 5
1 parent 2a07f9b commit 30e9341

7 files changed

+1076
-0
lines changed

‎chapter-05/01-basic-2d-geometries-plane.html

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<title>Example 05.01 - Basic 2D geometries - Plane</title>
7+
<script type="text/javascript" src="../libs/three.js"></script>
8+
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
9+
<script type="text/javascript" src="../libs/stats.js"></script>
10+
<script type="text/javascript" src="../libs/dat.gui.js"></script>
11+
<style>
12+
body{
13+
/* set margin to 0 and overflow to hidden, to go fullscreen */
14+
margin: 0;
15+
overflow: hidden;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<div id="Stats-output">
22+
</div>
23+
<!-- Div which will hold the Output -->
24+
<div id="WebGL-output">
25+
</div>
26+
27+
<!-- Javascript code that runs our Three.js examples -->
28+
<script type="text/javascript">
29+
30+
// once everything is loaded, we run our Three.js stuff.
31+
$(function () {
32+
33+
var stats = initStats();
34+
35+
// create a scene, that will hold all our elements such as objects, cameras and lights.
36+
var scene = new THREE.Scene();
37+
38+
// create a camera, which defines where we're looking at.
39+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
40+
41+
// create a render and set the size
42+
var webGLRenderer = new THREE.WebGLRenderer();
43+
webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);
44+
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
45+
webGLRenderer.shadowMapEnabled = true;
46+
47+
var plane = createMesh(new THREE.PlaneGeometry(10,14,4,4));
48+
// add the sphere to the scene
49+
scene.add(plane);
50+
51+
// position and point the camera to the center of the scene
52+
camera.position.x = -20;
53+
camera.position.y = 30;
54+
camera.position.z = 40;
55+
camera.lookAt(new THREE.Vector3(10,0,0));
56+
57+
58+
// add spotlight for the shadows
59+
var spotLight = new THREE.SpotLight( 0xffffff );
60+
spotLight.position.set( -40, 60, -10 );
61+
scene.add( spotLight );
62+
63+
// add the output of the renderer to the html element
64+
$("#WebGL-output").append(webGLRenderer.domElement);
65+
66+
// call the render function
67+
var step=0;
68+
69+
70+
// setup the control gui
71+
var controls = new function() {
72+
// we need the first child, since it's a multimaterial
73+
74+
75+
this.width = plane.children[0].geometry.width;
76+
this.height = plane.children[0].geometry.height;
77+
78+
this.widthSegments = plane.children[0].geometry.widthSegments;
79+
this.heightSegments = plane.children[0].geometry.heightSegments;
80+
81+
this.redraw = function() {
82+
// remove the old plane
83+
scene.remove(plane);
84+
// create a new one
85+
plane = createMesh(new THREE.PlaneGeometry(controls.width,controls.height,Math.round(controls.widthSegments),Math.round(controls.heightSegments)));
86+
// add it to the scene.
87+
scene.add(plane);
88+
};
89+
}
90+
91+
var gui = new dat.GUI();
92+
gui.add(controls,'width',0,40).onChange(controls.redraw);
93+
gui.add(controls,'height',0,40).onChange(controls.redraw);;
94+
gui.add(controls,'widthSegments',0,10).onChange(controls.redraw);;
95+
gui.add(controls,'heightSegments',0,10).onChange(controls.redraw);;
96+
97+
98+
99+
render();
100+
101+
function createMesh(geom) {
102+
103+
// assign two materials
104+
var meshMaterial = new THREE.MeshNormalMaterial();
105+
meshMaterial.side = THREE.DoubleSide;
106+
var wireFrameMat = new THREE.MeshBasicMaterial();
107+
wireFrameMat.wireframe = true;
108+
109+
// create a multimaterial
110+
var plane = THREE.SceneUtils.createMultiMaterialObject(geom,[meshMaterial,wireFrameMat]);
111+
112+
return plane;
113+
}
114+
115+
function render() {
116+
stats.update();
117+
118+
plane.rotation.y=step+=0.01;
119+
120+
// render using requestAnimationFrame
121+
requestAnimationFrame(render);
122+
webGLRenderer.render(scene, camera);
123+
}
124+
125+
function initStats() {
126+
127+
var stats = new Stats();
128+
stats.setMode(0); // 0: fps, 1: ms
129+
130+
// Align top-left
131+
stats.domElement.style.position = 'absolute';
132+
stats.domElement.style.left = '0px';
133+
stats.domElement.style.top = '0px';
134+
135+
$("#Stats-output").append( stats.domElement );
136+
137+
return stats;
138+
}
139+
});
140+
141+
142+
143+
</script>
144+
</body>
145+
</html>

‎chapter-05/02-basic-2d-geometries-circle.html

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<title>Example 05.02 - Basic 2D geometries - Circle</title>
7+
<script type="text/javascript" src="../libs/three.js"></script>
8+
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
9+
<script type="text/javascript" src="../libs/stats.js"></script>
10+
<script type="text/javascript" src="../libs/dat.gui.js"></script>
11+
<style>
12+
body{
13+
/* set margin to 0 and overflow to hidden, to go fullscreen */
14+
margin: 0;
15+
overflow: hidden;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<div id="Stats-output">
22+
</div>
23+
<!-- Div which will hold the Output -->
24+
<div id="WebGL-output">
25+
</div>
26+
27+
<!-- Javascript code that runs our Three.js examples -->
28+
<script type="text/javascript">
29+
30+
// once everything is loaded, we run our Three.js stuff.
31+
$(function () {
32+
33+
var stats = initStats();
34+
35+
// create a scene, that will hold all our elements such as objects, cameras and lights.
36+
var scene = new THREE.Scene();
37+
38+
// create a camera, which defines where we're looking at.
39+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
40+
41+
// create a render and set the size
42+
var webGLRenderer = new THREE.WebGLRenderer();
43+
webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);
44+
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
45+
webGLRenderer.shadowMapEnabled = true;
46+
47+
var circle = createMesh(new THREE.CircleGeometry(4,10,0.3*Math.PI*2,0.3*Math.PI*2));
48+
// add the sphere to the scene
49+
scene.add(circle);
50+
51+
// position and point the camera to the center of the scene
52+
camera.position.x = -20;
53+
camera.position.y = 30;
54+
camera.position.z = 40;
55+
camera.lookAt(new THREE.Vector3(10,0,0));
56+
57+
58+
// add spotlight for the shadows
59+
var spotLight = new THREE.SpotLight( 0xffffff );
60+
spotLight.position.set( -40, 60, -10 );
61+
scene.add( spotLight );
62+
63+
// add the output of the renderer to the html element
64+
$("#WebGL-output").append(webGLRenderer.domElement);
65+
66+
// call the render function
67+
var step=0;
68+
69+
70+
// setup the control gui
71+
var controls = new function() {
72+
// we need the first child, since it's a multimaterial
73+
74+
75+
console.log(circle.children[0].geometry);
76+
this.radius = 4;
77+
78+
this.thetaStart = 0.3*Math.PI*2;
79+
this.thetaLength = 0.3*Math.PI*2;;
80+
this.segments = 10;
81+
82+
this.redraw = function() {
83+
// remove the old plane
84+
scene.remove(circle);
85+
// create a new one
86+
circle = createMesh(new THREE.CircleGeometry(controls.radius,controls.segments,controls.thetaStart, controls.thetaLength));
87+
// add it to the scene.
88+
scene.add(circle);
89+
};
90+
}
91+
92+
var gui = new dat.GUI();
93+
gui.add(controls,'radius',0,40).onChange(controls.redraw);
94+
gui.add(controls,'segments',0,40).onChange(controls.redraw);;
95+
gui.add(controls,'thetaStart',0,2*Math.PI).onChange(controls.redraw);;
96+
gui.add(controls,'thetaLength',0,2*Math.PI).onChange(controls.redraw);;
97+
98+
99+
100+
render();
101+
102+
function createMesh(geom) {
103+
104+
// assign two materials
105+
var meshMaterial = new THREE.MeshNormalMaterial();
106+
meshMaterial.side = THREE.DoubleSide;
107+
var wireFrameMat = new THREE.MeshBasicMaterial();
108+
wireFrameMat.wireframe = true;
109+
110+
// create a multimaterial
111+
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,[meshMaterial,wireFrameMat]);
112+
113+
return mesh;
114+
}
115+
116+
function render() {
117+
stats.update();
118+
119+
circle.rotation.y=step+=0.01;
120+
121+
// render using requestAnimationFrame
122+
requestAnimationFrame(render);
123+
webGLRenderer.render(scene, camera);
124+
}
125+
126+
function initStats() {
127+
128+
var stats = new Stats();
129+
stats.setMode(0); // 0: fps, 1: ms
130+
131+
// Align top-left
132+
stats.domElement.style.position = 'absolute';
133+
stats.domElement.style.left = '0px';
134+
stats.domElement.style.top = '0px';
135+
136+
$("#Stats-output").append( stats.domElement );
137+
138+
return stats;
139+
}
140+
});
141+
142+
143+
144+
</script>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)