Skip to content

Commit 046ebc8

Browse files
author
Jos Dirksen
committed
reformat code
1 parent 3c557cd commit 046ebc8

File tree

5 files changed

+1184
-1210
lines changed

5 files changed

+1184
-1210
lines changed

‎chapter-12/01-basic-scene.html

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@
66
<title>Rigid body - Physijs</title>
77

88

9-
109
<script type="text/javascript" src="../libs/three.js"></script>
1110
<script type="text/javascript" src="../libs/stats.js"></script>
1211
<script type="text/javascript" src="../libs/physi.js"></script>
1312
<script type="text/javascript" src="../libs/chroma.js"></script>
1413
<script type="text/javascript" src="../libs/dat.gui.js"></script>
1514

1615

17-
1816
<script type="text/javascript">
1917

2018
'use strict';
@@ -28,164 +26,164 @@
2826
ground_material, box_material,
2927
projector, renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];
3028

31-
initScene = function() {
29+
initScene = function () {
3230
projector = new THREE.Projector;
3331

3432
renderer = new THREE.WebGLRenderer({ antialias: true });
35-
renderer.setSize( window.innerWidth, window.innerHeight );
33+
renderer.setSize(window.innerWidth, window.innerHeight);
3634

3735
renderer.setClearColorHex(0x000000);
38-
document.getElementById( 'viewport' ).appendChild( renderer.domElement );
36+
document.getElementById('viewport').appendChild(renderer.domElement);
3937

4038
render_stats = new Stats();
4139
render_stats.domElement.style.position = 'absolute';
4240
render_stats.domElement.style.top = '1px';
4341
render_stats.domElement.style.zIndex = 100;
44-
document.getElementById( 'viewport' ).appendChild( render_stats.domElement );
42+
document.getElementById('viewport').appendChild(render_stats.domElement);
4543

4644
physics_stats = new Stats();
4745
physics_stats.domElement.style.position = 'absolute';
4846
physics_stats.domElement.style.top = '50px';
4947
physics_stats.domElement.style.zIndex = 100;
50-
document.getElementById( 'viewport' ).appendChild( physics_stats.domElement );
48+
document.getElementById('viewport').appendChild(physics_stats.domElement);
5149

5250
scene = new Physijs.Scene;
53-
scene.setGravity(new THREE.Vector3( 0, -50, 0 ));
51+
scene.setGravity(new THREE.Vector3(0, -50, 0));
5452

5553
camera = new THREE.PerspectiveCamera(
5654
35,
5755
window.innerWidth / window.innerHeight,
5856
1,
5957
1000
6058
);
61-
camera.position.set( 50, 30, 50 );
62-
camera.lookAt( new THREE.Vector3(10,0,10) );
63-
scene.add( camera );
59+
camera.position.set(50, 30, 50);
60+
camera.lookAt(new THREE.Vector3(10, 0, 10));
61+
scene.add(camera);
6462

6563
// Light
66-
light = new THREE.SpotLight( 0xFFFFFF );
67-
light.position.set( 20, 100, 50 );
64+
light = new THREE.SpotLight(0xFFFFFF);
65+
light.position.set(20, 100, 50);
6866

6967

70-
scene.add( light );
68+
scene.add(light);
7169

7270
createGround();
7371

7472
var points = getPoints();
7573
var stones = [];
7674

7775

78-
requestAnimationFrame( render );
76+
requestAnimationFrame(render);
7977

80-
var controls = new function() {
78+
var controls = new function () {
8179
this.gravityX = 0;
8280
this.gravityY = -50;
8381
this.gravityZ = 0;
8482

8583

86-
this.resetScene = function() {
84+
this.resetScene = function () {
8785

88-
scene.setGravity(new THREE.Vector3(controls.gravityX,controls.gravityY,controls.gravityZ));
89-
stones.forEach(function(st){
86+
scene.setGravity(new THREE.Vector3(controls.gravityX, controls.gravityY, controls.gravityZ));
87+
stones.forEach(function (st) {
9088
scene.remove(st)
9189
});
92-
stones=[];
90+
stones = [];
9391

9492

95-
points.forEach(function(point) {
96-
var stoneGeom = new THREE.CubeGeometry(0.6,6,2);
93+
points.forEach(function (point) {
94+
var stoneGeom = new THREE.CubeGeometry(0.6, 6, 2);
9795

9896
var stone = new Physijs.BoxMesh(stoneGeom, Physijs.createMaterial(new THREE.MeshPhongMaterial(
9997
{
10098
color: scale(Math.random()).hex(),
101-
transparent:true, opacity:0.8,
99+
transparent: true, opacity: 0.8,
102100
// map: THREE.ImageUtils.loadTexture( '../assets/textures/general/darker_wood.jpg' )
103101
})));
104-
stone.position=point.clone();
102+
stone.position = point.clone();
105103
stone.lookAt(scene.position);
106104
stone.__dirtyRotation = true;
107-
stone.position.y=3.5;
105+
stone.position.y = 3.5;
108106

109107
scene.add(stone);
110108
stones.push(stone);
111109

112110
});
113111

114112
// let the first one fall down
115-
stones[0].rotation.x=0.2;
113+
stones[0].rotation.x = 0.2;
116114
stones[0].__dirtyRotation = true;
117115

118116
};
119117
}
120118

121119
var gui = new dat.GUI();
122-
gui.add(controls, 'gravityX',-100,100);
123-
gui.add(controls, 'gravityY',-100,100);
124-
gui.add(controls, 'gravityZ',-100,100);
120+
gui.add(controls, 'gravityX', -100, 100);
121+
gui.add(controls, 'gravityY', -100, 100);
122+
gui.add(controls, 'gravityZ', -100, 100);
125123
gui.add(controls, 'resetScene');
126124

127125
controls.resetScene();
128126
};
129127

130128
var stepX;
131129

132-
render = function() {
133-
requestAnimationFrame( render );
134-
renderer.render( scene, camera );
130+
render = function () {
131+
requestAnimationFrame(render);
132+
renderer.render(scene, camera);
135133
render_stats.update();
136134

137-
scene.simulate(undefined,1 );
135+
scene.simulate(undefined, 1);
138136

139137

140138
};
141139

142140

143141
function getPoints() {
144142
var points = [];
145-
var r=27;
143+
var r = 27;
146144
var cX = 0;
147145
var cY = 0;
148146

149147
var circleOffset = 0;
150-
for (var i = 0 ; i < 1000 ; i+=6+circleOffset) {
148+
for (var i = 0; i < 1000; i += 6 + circleOffset) {
151149

152-
circleOffset = 4.5*(i/360);
150+
circleOffset = 4.5 * (i / 360);
153151

154-
var x = (r/1440)*(1440-i)*Math.cos(i*(Math.PI/180)) + cX;
155-
var z = (r/1440)*(1440-i)*Math.sin(i*(Math.PI/180)) + cY;
152+
var x = (r / 1440) * (1440 - i) * Math.cos(i * (Math.PI / 180)) + cX;
153+
var z = (r / 1440) * (1440 - i) * Math.sin(i * (Math.PI / 180)) + cY;
156154
var y = 0;
157155

158-
points.push(new THREE.Vector3(x,y,z));
156+
points.push(new THREE.Vector3(x, y, z));
159157
}
160158

161159
return points;
162160
}
163161

164162
function createGround() {
165163
var ground_material = Physijs.createMaterial(
166-
new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture( '../assets/textures/general/wood-2.jpg' ) }),
164+
new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('../assets/textures/general/wood-2.jpg') }),
167165
.9, .3);
168166

169167
var ground = new Physijs.BoxMesh(new THREE.CubeGeometry(60, 1, 60), ground_material, 0);
170168

171169
var borderLeft = new Physijs.BoxMesh(new THREE.CubeGeometry(2, 3, 60), ground_material, 0);
172-
borderLeft.position.x=-31;
173-
borderLeft.position.y=2;
170+
borderLeft.position.x = -31;
171+
borderLeft.position.y = 2;
174172
ground.add(borderLeft);
175173

176174
var borderRight = new Physijs.BoxMesh(new THREE.CubeGeometry(2, 3, 60), ground_material, 0);
177-
borderRight.position.x=31;
178-
borderRight.position.y=2;
175+
borderRight.position.x = 31;
176+
borderRight.position.y = 2;
179177
ground.add(borderRight);
180178

181-
var borderBottom = new Physijs.BoxMesh(new THREE.CubeGeometry(64, 3, 2), ground_material,0);
182-
borderBottom.position.z=30;
183-
borderBottom.position.y=2;
179+
var borderBottom = new Physijs.BoxMesh(new THREE.CubeGeometry(64, 3, 2), ground_material, 0);
180+
borderBottom.position.z = 30;
181+
borderBottom.position.y = 2;
184182
ground.add(borderBottom);
185183

186184
var borderTop = new Physijs.BoxMesh(new THREE.CubeGeometry(64, 3, 2), ground_material, 0);
187-
borderTop.position.z=-30;
188-
borderTop.position.y=2;
185+
borderTop.position.z = -30;
186+
borderTop.position.y = 2;
189187
ground.add(borderTop);
190188

191189
scene.add(ground);

0 commit comments

Comments
 (0)