Skip to content

feat: 增加注释 #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: 增加注释 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions src/chapter-01/01-basic-skeleton.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,32 @@
<!DOCTYPE html>
<html>

<head>
<head>
<title>Example 01.01 - Basic skeleton</title>
<meta charset="UTF-8" />
<script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
<script
type="text/javascript"
charset="UTF-8"
src="../../libs/three/three.js"
></script>
<script
type="text/javascript"
charset="UTF-8"
src="../../libs/three/controls/TrackballControls.js"
></script>
<script type="text/javascript" src="./js/01-01.js"></script>
<link rel="stylesheet" href="../../css/default.css">
</head>
<link rel="stylesheet" href="../../css/default.css" />
</head>

<body>
<body>
<!-- Div which will hold the Output -->
<div id="webgl-output"></div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
(function () {
// contains the code for the example
init()
})();
(function () {
// contains the code for the example
init();
})();
</script>
</body>

</html>
</body>
</html>
151 changes: 84 additions & 67 deletions src/chapter-01/js/01-02.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,85 @@
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);

// show axes in the screen
var axes = new THREE.AxesHelper(20);
scene.add(axes);

// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xAAAAAA
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);

// add the plane to the scene
scene.add(plane);

// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xFF0000,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// position the cube
cube.position.set(-4, 3, 0);

// add the cube to the scene
scene.add(cube);

// create a sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x7777FF,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// position the sphere
sphere.position.set(20, 4, 2);

// add the sphere to the scene
scene.add(sphere);

// position and point the camera to the center of the scene
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

// add the output of the renderer to the html element
document.getElementById("webgl-output").appendChild(renderer.domElement);

// render the scene
renderer.render(scene, camera);
}
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(
//field of view, FOV, 相机视角
//相机视锥体的垂直视场角，简称VFOV
50,
//视椎体的宽高比，和下面的setSize对应
window.innerWidth / window.innerHeight,
//near，近点视角必须大于0
1,
//far
1000
);

// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
//这块会影响canvas的长宽
renderer.setSize(window.innerWidth, window.innerHeight);

// show axes in the screen
var axes = new THREE.AxesHelper(30);
scene.add(axes);

// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(120, 40);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xaaaaaa,
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;

//平面的定位是以其中心点为基准的
plane.position.set(0, 0, 0);

// add the plane to the scene
scene.add(plane);

// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

//wireframe设置为true防止被渲染为实体
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// position the cube
cube.position.set(40, 0, 0);

// add the cube to the scene
scene.add(cube);

// create a sphere
var sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x7777ff,
wireframe: true,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// position the sphere
sphere.position.set(0, 0, 0);

// add the sphere to the scene
scene.add(sphere);

// position and point the camera to the center of the scene
camera.position.set(-30, 40, 30);

//场景的中心是0,0,0
camera.lookAt(scene.position);

// add the output of the renderer to the html element
document.getElementById("webgl-output").appendChild(renderer.domElement);

// render the scene
renderer.render(scene, camera);
}
66 changes: 42 additions & 24 deletions src/chapter-01/js/01-03.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ function init() {
var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);

// create a render and configure it with shadows
var renderer = new THREE.WebGLRenderer();
Expand All @@ -19,7 +24,7 @@ function init() {
// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000
color: 0xff0000,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
Expand All @@ -33,7 +38,7 @@ function init() {

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff
color: 0x7777ff,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

Expand All @@ -46,7 +51,7 @@ function init() {
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xAAAAAA
color: 0xaaaaaa,
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

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

// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40, 40, -15);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 20, 15);
spotLight.castShadow = true;
//这个类型是SpotLightShadow
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
//这里的camera是Camera类型
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;

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

var wallMaterial = new THREE.MeshLambertMaterial({
color: 0xa0522d
color: 0xa0522d,
});

var wallLeftMesh = new THREE.Mesh(wallLeft, wallMaterial);
Expand All @@ -113,14 +120,13 @@ function createBoundingWall(scene) {
scene.add(wallRightMesh);
scene.add(wallBottomMesh);
scene.add(wallTopMesh);

}

function createGroundPlane(scene) {
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(70, 50);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0x9acd32
color: 0x9acd32,
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
Expand All @@ -131,20 +137,26 @@ function createGroundPlane(scene) {
plane.position.y = 0;
plane.position.z = 0;

scene.add(plane)
scene.add(plane);
}

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

// create the mesh
var roofMesh = new THREE.Mesh(roof, new THREE.MeshLambertMaterial({
color: 0x8b7213
}));
var baseMesh = new THREE.Mesh(base, new THREE.MeshLambertMaterial({
color: 0xffe4c4
}));
var roofMesh = new THREE.Mesh(
roof,
new THREE.MeshLambertMaterial({
color: 0x8b7213,
})
);
var baseMesh = new THREE.Mesh(
base,
new THREE.MeshLambertMaterial({
color: 0xffe4c4,
})
);

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

// create the mesh
var trunkMesh = new THREE.Mesh(trunk, new THREE.MeshLambertMaterial({
color: 0x8b4513
}));
var leavesMesh = new THREE.Mesh(leaves, new THREE.MeshLambertMaterial({
color: 0x00ff00
}));
var trunkMesh = new THREE.Mesh(
trunk,
new THREE.MeshLambertMaterial({
color: 0x8b4513,
})
);
var leavesMesh = new THREE.Mesh(
leaves,
new THREE.MeshLambertMaterial({
color: 0x00ff00,
})
);

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

scene.add(trunkMesh);
scene.add(leavesMesh);
}
}