diff --git a/src/chapter-01/01-basic-skeleton.html b/src/chapter-01/01-basic-skeleton.html index b5cce350..a289a4dc 100644 --- a/src/chapter-01/01-basic-skeleton.html +++ b/src/chapter-01/01-basic-skeleton.html @@ -1,26 +1,32 @@ - - + Example 01.01 - Basic skeleton - - + + - - + + - +
- - - \ No newline at end of file + + diff --git a/src/chapter-01/js/01-02.js b/src/chapter-01/js/01-02.js index 48f51432..7fe8552b 100644 --- a/src/chapter-01/js/01-02.js +++ b/src/chapter-01/js/01-02.js @@ -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); -} \ No newline at end of file + // 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); +} diff --git a/src/chapter-01/js/01-03.js b/src/chapter-01/js/01-03.js index c26f678e..247fc16a 100644 --- a/src/chapter-01/js/01-03.js +++ b/src/chapter-01/js/01-03.js @@ -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(); @@ -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; @@ -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); @@ -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); @@ -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); @@ -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); @@ -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; @@ -131,7 +137,7 @@ function createGroundPlane(scene) { plane.position.y = 0; plane.position.z = 0; - scene.add(plane) + scene.add(plane); } function createHouse(scene) { @@ -139,12 +145,18 @@ function createHouse(scene) { 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); @@ -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); @@ -185,4 +203,4 @@ function createTree(scene) { scene.add(trunkMesh); scene.add(leavesMesh); -} \ No newline at end of file +}