Skip to content

Commit 6d286e0

Browse files
author
Jos Dirksen
committed
new examples and a couple of other textures
1 parent e4ddde1 commit 6d286e0

File tree

1 file changed

+248
-0
lines changed

1 file changed

+248
-0
lines changed

‎chapter-05/##-binary-operations.html

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<title>Example 05.11 - Basic 3D geometries - Sphere</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+
<script type="text/javascript" src="../libs/coffee-script.js"></script>
12+
<script type="text/coffeescript" src="../libs/ThreeBSP.coffee"></script>
13+
<style>
14+
body{
15+
/* set margin to 0 and overflow to hidden, to go fullscreen */
16+
margin: 0;
17+
overflow: hidden;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
23+
<div id="Stats-output">
24+
</div>
25+
<!-- Div which will hold the Output -->
26+
<div id="WebGL-output">
27+
</div>
28+
29+
30+
<!-- Javascript code that runs our Three.js examples -->
31+
<script type="text/javascript">
32+
33+
// once everything is loaded, we run our Three.js stuff.
34+
function onReady() {
35+
36+
console.log(ThreeBSP);
37+
38+
var stats = initStats();
39+
40+
// create a scene, that will hold all our elements such as objects, cameras and lights.
41+
var scene = new THREE.Scene();
42+
43+
// create a camera, which defines where we're looking at.
44+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
45+
46+
// create a render and set the size
47+
var webGLRenderer = new THREE.WebGLRenderer();
48+
webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);
49+
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
50+
webGLRenderer.shadowMapEnabled = true;
51+
52+
var sphere1 = createMesh(new THREE.SphereGeometry(5,20,30));
53+
sphere1.position.x=-2;
54+
55+
56+
var sphere2 = createMesh(new THREE.SphereGeometry(5,20,30));
57+
sphere2.position.set(3,0,0);
58+
59+
var cube = createMesh(new THREE.CubeGeometry(5,5,5));
60+
cube.position.x=-7;
61+
62+
var result;
63+
64+
65+
66+
// add the sphere to the scene
67+
scene.add(sphere1);
68+
scene.add(sphere2);
69+
scene.add(cube);
70+
71+
// position and point the camera to the center of the scene
72+
camera.position.x = 0;
73+
camera.position.y = 20;
74+
camera.position.z = 20;
75+
camera.lookAt(new THREE.Vector3(0,0,0));
76+
77+
78+
// add the output of the renderer to the html element
79+
$("#WebGL-output").append(webGLRenderer.domElement);
80+
81+
// call the render function
82+
var step=0;
83+
84+
85+
// setup the control gui
86+
var controls = new function() {
87+
88+
this.sphere1PosX = sphere1.position.x;
89+
this.sphere1PosY = sphere1.position.y;
90+
this.sphere1PosZ = sphere1.position.z;
91+
this.sphere1Scale = 1;
92+
93+
this.sphere2PosX = sphere2.position.x;
94+
this.sphere2PosY = sphere2.position.y;
95+
this.sphere2PosZ = sphere2.position.z;
96+
this.sphere2Scale = 1;
97+
98+
this.cubePosX = cube.position.x;
99+
this.cubePosY = cube.position.y;
100+
this.cubePosZ = cube.position.z;
101+
this.scaleX = 1;
102+
this.scaleY = 1;
103+
this.scaleZ = 1;
104+
105+
this.actionCube = "subtract"; // add, substract, intersect
106+
this.actionSphere = "subtract"
107+
108+
this.showResult = function() {
109+
redrawResult();
110+
};
111+
112+
this.hideWireframes = false;
113+
this.rotateResult = false;
114+
115+
116+
}
117+
118+
var gui = new dat.GUI();
119+
var guiSphere1 = gui.addFolder("Sphere1");
120+
guiSphere1.add(controls,"sphere1PosX",-15,15).onChange(function() {sphere1.position.set(controls.sphere1PosX,controls.sphere1PosY,controls.sphere1PosZ)});
121+
guiSphere1.add(controls,"sphere1PosY",-15,15).onChange(function() {sphere1.position.set(controls.sphere1PosX,controls.sphere1PosY,controls.sphere1PosZ)});
122+
guiSphere1.add(controls,"sphere1PosZ",-15,15).onChange(function() {sphere1.position.set(controls.sphere1PosX,controls.sphere1PosY,controls.sphere1PosZ)});
123+
guiSphere1.add(controls,"sphere1Scale",0,10).onChange(function(e){sphere1.scale.set(e,e,e)});
124+
125+
var guiSphere2 = gui.addFolder("Sphere2");
126+
guiSphere2.add(controls,"sphere2PosX",-15,15).onChange(function() {sphere2.position.set(controls.sphere2PosX,controls.sphere2PosY,controls.sphere2PosZ)});
127+
guiSphere2.add(controls,"sphere2PosY",-15,15).onChange(function() {sphere2.position.set(controls.sphere2PosX,controls.sphere2PosY,controls.sphere2PosZ)});
128+
guiSphere2.add(controls,"sphere2PosZ",-15,15).onChange(function() {sphere2.position.set(controls.sphere2PosX,controls.sphere2PosY,controls.sphere2PosZ)});
129+
guiSphere2.add(controls,"sphere2Scale",0,10).onChange(function(e){sphere2.scale.set(e,e,e)});
130+
guiSphere2.add(controls,"actionSphere",["subtract","intersect","union","none"]);
131+
132+
var guiCube = gui.addFolder("cube");
133+
guiCube.add(controls,"cubePosX",-15,15).onChange(function() {cube.position.set(controls.cubePosX,controls.cubePosY,controls.cubePosZ)});
134+
guiCube.add(controls,"cubePosY",-15,15).onChange(function() {cube.position.set(controls.cubePosX,controls.cubePosY,controls.cubePosZ)});
135+
guiCube.add(controls,"cubePosZ",-15,15).onChange(function() {cube.position.set(controls.cubePosX,controls.cubePosY,controls.cubePosZ)});
136+
guiCube.add(controls,"scaleX",0,10).onChange(function(e){cube.scale.x=e});
137+
guiCube.add(controls,"scaleY",0,10).onChange(function(e){cube.scale.y=e});
138+
guiCube.add(controls,"scaleZ",0,10).onChange(function(e){cube.scale.z=e});
139+
guiCube.add(controls,"actionCube",["subtract","intersect","union","none"]);
140+
141+
gui.add(controls,"showResult");
142+
gui.add(controls,"rotateResult");
143+
gui.add(controls,"hideWireframes").onChange(function() {
144+
if (controls.hideWireframes) {
145+
sphere1.material.visible = false;
146+
sphere2.material.visible = false;
147+
cube.material.visible = false;
148+
} else {
149+
sphere1.material.visible = true;
150+
sphere2.material.visible = true;
151+
cube.material.visible = true;
152+
}
153+
});
154+
155+
render();
156+
157+
function redrawResult() {
158+
scene.remove(result);
159+
var sphere1BSP = new ThreeBSP(sphere1);
160+
var sphere2BSP = new ThreeBSP(sphere2);
161+
var cube2BSP = new ThreeBSP(cube);
162+
163+
var substractBSP;
164+
165+
// first do the sphere
166+
switch (controls.actionSphere) {
167+
case "subtract": substractBSP = sphere1BSP.subtract(sphere2BSP);break;
168+
case "intersect": substractBSP = sphere1BSP.intersect(sphere2BSP);break;
169+
case "union": substractBSP = sphere1BSP.union(sphere2BSP);break;
170+
case "none": // noop;
171+
}
172+
173+
// next do the cube
174+
if (!substractBSP) substractBSP = sphere1BSP;
175+
switch (controls.actionCube) {
176+
case "subtract": substractBSP = substractBSP.subtract(cube2BSP);break;
177+
case "intersect": substractBSP = substractBSP.intersect(cube2BSP);break;
178+
case "union": substractBSP = substractBSP.union(cube2BSP);break;
179+
case "none": // noop;
180+
}
181+
182+
183+
if (controls.actionCube == "none" && controls.actionSphere == "none") {
184+
// do nothing
185+
} else {
186+
result = substractBSP.toMesh();
187+
result.geometry.computeVertexNormals();
188+
scene.add(result);
189+
}
190+
}
191+
192+
function createMesh(geom) {
193+
194+
// assign two materials
195+
var meshMaterial = new THREE.MeshNormalMaterial();
196+
meshMaterial.side = THREE.DoubleSide;
197+
var wireFrameMat = new THREE.MeshBasicMaterial({transparency:true, opacity:0.5, wireframeLinewidth: 0.5});
198+
wireFrameMat.wireframe = true;
199+
200+
// create a multimaterial
201+
var mesh = new THREE.Mesh(geom,wireFrameMat);
202+
203+
return mesh;
204+
}
205+
206+
function render() {
207+
stats.update();
208+
209+
// sphere.rotation.y=step+=0.01;
210+
211+
// if (typeof ThreeBSP!='undefined') {console.log(ThreeBSP)};
212+
// console.log(ThreeBSP);
213+
214+
if (controls.rotateResult && result) {
215+
result.rotation.y+=0.04;
216+
// result.rotation.x+=0.04;
217+
result.rotation.z-=0.005;
218+
}
219+
220+
// render using requestAnimationFrame
221+
requestAnimationFrame(render);
222+
webGLRenderer.render(scene, camera);
223+
}
224+
225+
function initStats() {
226+
227+
var stats = new Stats();
228+
stats.setMode(0); // 0: fps, 1: ms
229+
230+
// Align top-left
231+
stats.domElement.style.position = 'absolute';
232+
stats.domElement.style.left = '0px';
233+
stats.domElement.style.top = '0px';
234+
235+
$("#Stats-output").append( stats.domElement );
236+
237+
return stats;
238+
}
239+
240+
}
241+
242+
243+
</script>
244+
<script type="text/coffeescript">
245+
onReady();
246+
</script>
247+
</body>
248+
</html>

0 commit comments

Comments
 (0)