Skip to content

Commit 608e804

Browse files
author
hexiang
committed
feat: 增加注释
1 parent d76db62 commit 608e804

File tree

3 files changed

+146
-105
lines changed

3 files changed

+146
-105
lines changed

‎src/chapter-01/01-basic-skeleton.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<head>
3+
<head>
54
<title>Example 01.01 - Basic skeleton</title>
65
<meta charset="UTF-8" />
7-
<script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
8-
<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
6+
<script
7+
type="text/javascript"
8+
charset="UTF-8"
9+
src="../../libs/three/three.js"
10+
></script>
11+
<script
12+
type="text/javascript"
13+
charset="UTF-8"
14+
src="../../libs/three/controls/TrackballControls.js"
15+
></script>
916
<script type="text/javascript" src="./js/01-01.js"></script>
10-
<link rel="stylesheet" href="../../css/default.css">
11-
</head>
17+
<link rel="stylesheet" href="../../css/default.css" />
18+
</head>
1219

13-
<body>
20+
<body>
1421
<!-- Div which will hold the Output -->
1522
<div id="webgl-output"></div>
1623

1724
<!-- Javascript code that runs our Three.js examples -->
1825
<script type="text/javascript">
19-
(function () {
20-
// contains the code for the example
21-
init()
22-
})();
26+
(function () {
27+
// contains the code for the example
28+
init();
29+
})();
2330
</script>
24-
</body>
25-
26-
</html>
31+
</body>
32+
</html>

‎src/chapter-01/js/01-02.js‎

Lines changed: 84 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,85 @@
11
function init() {
2-
// create a scene, that will hold all our elements such as objects, cameras and lights.
3-
var scene = new THREE.Scene();
4-
5-
// create a camera, which defines where we're looking at.
6-
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
7-
8-
// create a render and set the size
9-
var renderer = new THREE.WebGLRenderer();
10-
renderer.setClearColor(new THREE.Color(0x000000));
11-
renderer.setSize(window.innerWidth, window.innerHeight);
12-
13-
// show axes in the screen
14-
var axes = new THREE.AxesHelper(20);
15-
scene.add(axes);
16-
17-
// create the ground plane
18-
var planeGeometry = new THREE.PlaneGeometry(60, 20);
19-
var planeMaterial = new THREE.MeshBasicMaterial({
20-
color: 0xAAAAAA
21-
});
22-
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
23-
24-
// rotate and position the plane
25-
plane.rotation.x = -0.5 * Math.PI;
26-
plane.position.set(15, 0, 0);
27-
28-
// add the plane to the scene
29-
scene.add(plane);
30-
31-
// create a cube
32-
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
33-
var cubeMaterial = new THREE.MeshBasicMaterial({
34-
color: 0xFF0000,
35-
wireframe: true
36-
});
37-
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
38-
39-
// position the cube
40-
cube.position.set(-4, 3, 0);
41-
42-
// add the cube to the scene
43-
scene.add(cube);
44-
45-
// create a sphere
46-
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
47-
var sphereMaterial = new THREE.MeshBasicMaterial({
48-
color: 0x7777FF,
49-
wireframe: true
50-
});
51-
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
52-
53-
// position the sphere
54-
sphere.position.set(20, 4, 2);
55-
56-
// add the sphere to the scene
57-
scene.add(sphere);
58-
59-
// position and point the camera to the center of the scene
60-
camera.position.set(-30, 40, 30);
61-
camera.lookAt(scene.position);
62-
63-
// add the output of the renderer to the html element
64-
document.getElementById("webgl-output").appendChild(renderer.domElement);
65-
66-
// render the scene
67-
renderer.render(scene, camera);
68-
}
2+
// create a scene, that will hold all our elements such as objects, cameras and lights.
3+
var scene = new THREE.Scene();
4+
5+
// create a camera, which defines where we're looking at.
6+
var camera = new THREE.PerspectiveCamera(
7+
//field of view, FOV, 相机视角
8+
//相机视锥体的垂直视场角，简称VFOV
9+
50,
10+
//视椎体的宽高比，和下面的setSize对应
11+
window.innerWidth / window.innerHeight,
12+
//near，近点视角必须大于0
13+
1,
14+
//far
15+
1000
16+
);
17+
18+
// create a render and set the size
19+
var renderer = new THREE.WebGLRenderer();
20+
renderer.setClearColor(new THREE.Color(0x000000));
21+
//这块会影响canvas的长宽
22+
renderer.setSize(window.innerWidth, window.innerHeight);
23+
24+
// show axes in the screen
25+
var axes = new THREE.AxesHelper(30);
26+
scene.add(axes);
27+
28+
// create the ground plane
29+
var planeGeometry = new THREE.PlaneGeometry(120, 40);
30+
var planeMaterial = new THREE.MeshBasicMaterial({
31+
color: 0xaaaaaa,
32+
});
33+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
34+
35+
// rotate and position the plane
36+
plane.rotation.x = -0.5 * Math.PI;
37+
38+
//平面的定位是以其中心点为基准的
39+
plane.position.set(0, 0, 0);
40+
41+
// add the plane to the scene
42+
scene.add(plane);
43+
44+
// create a cube
45+
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
46+
47+
//wireframe设置为true防止被渲染为实体
48+
var cubeMaterial = new THREE.MeshBasicMaterial({
49+
color: 0xff0000,
50+
wireframe: true,
51+
});
52+
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
53+
54+
// position the cube
55+
cube.position.set(40, 0, 0);
56+
57+
// add the cube to the scene
58+
scene.add(cube);
59+
60+
// create a sphere
61+
var sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
62+
var sphereMaterial = new THREE.MeshBasicMaterial({
63+
color: 0x7777ff,
64+
wireframe: true,
65+
});
66+
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
67+
68+
// position the sphere
69+
sphere.position.set(0, 0, 0);
70+
71+
// add the sphere to the scene
72+
scene.add(sphere);
73+
74+
// position and point the camera to the center of the scene
75+
camera.position.set(-30, 40, 30);
76+
77+
//场景的中心是0,0,0
78+
camera.lookAt(scene.position);
79+
80+
// add the output of the renderer to the html element
81+
document.getElementById("webgl-output").appendChild(renderer.domElement);
82+
83+
// render the scene
84+
renderer.render(scene, camera);
85+
}

‎src/chapter-01/js/01-03.js‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ function init() {
33
var scene = new THREE.Scene();
44

55
// create a camera, which defines where we're looking at.
6-
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
6+
var camera = new THREE.PerspectiveCamera(
7+
45,
8+
window.innerWidth / window.innerHeight,
9+
0.1,
10+
1000
11+
);
712

813
// create a render and configure it with shadows
914
var renderer = new THREE.WebGLRenderer();
@@ -19,7 +24,7 @@ function init() {
1924
// create a cube
2025
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
2126
var cubeMaterial = new THREE.MeshLambertMaterial({
22-
color: 0xFF0000
27+
color: 0xff0000,
2328
});
2429
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
2530
cube.castShadow = true;
@@ -33,7 +38,7 @@ function init() {
3338

3439
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
3540
var sphereMaterial = new THREE.MeshLambertMaterial({
36-
color: 0x7777ff
41+
color: 0x7777ff,
3742
});
3843
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
3944

@@ -46,7 +51,7 @@ function init() {
4651
// create the ground plane
4752
var planeGeometry = new THREE.PlaneGeometry(60, 20);
4853
var planeMaterial = new THREE.MeshLambertMaterial({
49-
color: 0xAAAAAA
54+
color: 0xaaaaaa,
5055
});
5156
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
5257

@@ -67,14 +72,16 @@ function init() {
6772
camera.lookAt(scene.position);
6873

6974
// add spotlight for the shadows
70-
var spotLight = new THREE.SpotLight(0xFFFFFF);
71-
spotLight.position.set(-40, 40, -15);
75+
var spotLight = new THREE.SpotLight(0xffffff);
76+
spotLight.position.set(-40, 20, 15);
7277
spotLight.castShadow = true;
78+
//这个类型是SpotLightShadow
7379
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
80+
//这里的camera是Camera类型
7481
spotLight.shadow.camera.far = 130;
7582
spotLight.shadow.camera.near = 40;
7683

77-
// If you want a more detailled shadow you can increase the
84+
// If you want a more detailled shadow you can increase the
7885
// mapSize used to draw the shadows.
7986
// spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
8087
scene.add(spotLight);
@@ -96,7 +103,7 @@ function createBoundingWall(scene) {
96103
var wallBottom = new THREE.CubeGeometry(2, 2, 50);
97104

98105
var wallMaterial = new THREE.MeshLambertMaterial({
99-
color: 0xa0522d
106+
color: 0xa0522d,
100107
});
101108

102109
var wallLeftMesh = new THREE.Mesh(wallLeft, wallMaterial);
@@ -113,14 +120,13 @@ function createBoundingWall(scene) {
113120
scene.add(wallRightMesh);
114121
scene.add(wallBottomMesh);
115122
scene.add(wallTopMesh);
116-
117123
}
118124

119125
function createGroundPlane(scene) {
120126
// create the ground plane
121127
var planeGeometry = new THREE.PlaneGeometry(70, 50);
122128
var planeMaterial = new THREE.MeshLambertMaterial({
123-
color: 0x9acd32
129+
color: 0x9acd32,
124130
});
125131
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
126132
plane.receiveShadow = true;
@@ -131,20 +137,26 @@ function createGroundPlane(scene) {
131137
plane.position.y = 0;
132138
plane.position.z = 0;
133139

134-
scene.add(plane)
140+
scene.add(plane);
135141
}
136142

137143
function createHouse(scene) {
138144
var roof = new THREE.ConeGeometry(5, 4);
139145
var base = new THREE.CylinderGeometry(5, 5, 6);
140146

141147
// create the mesh
142-
var roofMesh = new THREE.Mesh(roof, new THREE.MeshLambertMaterial({
143-
color: 0x8b7213
144-
}));
145-
var baseMesh = new THREE.Mesh(base, new THREE.MeshLambertMaterial({
146-
color: 0xffe4c4
147-
}));
148+
var roofMesh = new THREE.Mesh(
149+
roof,
150+
new THREE.MeshLambertMaterial({
151+
color: 0x8b7213,
152+
})
153+
);
154+
var baseMesh = new THREE.Mesh(
155+
base,
156+
new THREE.MeshLambertMaterial({
157+
color: 0xffe4c4,
158+
})
159+
);
148160

149161
roofMesh.position.set(25, 8, 0);
150162
baseMesh.position.set(25, 3, 0);
@@ -167,12 +179,18 @@ function createTree(scene) {
167179
var leaves = new THREE.SphereGeometry(4);
168180

169181
// create the mesh
170-
var trunkMesh = new THREE.Mesh(trunk, new THREE.MeshLambertMaterial({
171-
color: 0x8b4513
172-
}));
173-
var leavesMesh = new THREE.Mesh(leaves, new THREE.MeshLambertMaterial({
174-
color: 0x00ff00
175-
}));
182+
var trunkMesh = new THREE.Mesh(
183+
trunk,
184+
new THREE.MeshLambertMaterial({
185+
color: 0x8b4513,
186+
})
187+
);
188+
var leavesMesh = new THREE.Mesh(
189+
leaves,
190+
new THREE.MeshLambertMaterial({
191+
color: 0x00ff00,
192+
})
193+
);
176194

177195
// position the trunk. Set y to half of height of trunk
178196
trunkMesh.position.set(-10, 4, 0);
@@ -185,4 +203,4 @@ function createTree(scene) {
185203

186204
scene.add(trunkMesh);
187205
scene.add(leavesMesh);
188-
}
206+
}

0 commit comments

Comments
 (0)