Skip to content

add index.html #5

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 5 commits into
base: master
Choose a base branch
from
Open

add index.html #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
420c17d
add autorun.sh that work as a web server.
FolderLevel Nov 21, 2016
97a3526
add the index.html to repository.
FolderLevel Nov 21, 2016
3251ce8
rm autorun.sh
FolderLevel Nov 21, 2016
48d9d30
hacking chapter-01
FolderLevel Nov 22, 2016
7360d9b
update README.md
FolderLevel Nov 22, 2016
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
5 changes: 0 additions & 5 deletions README
View file
Open in desktop

This file was deleted.

59 changes: 59 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
> This repository contains the examples from the book Essential Three.js I'm currently writing for Packt. This
> book shows, using a couple of complex examples, how to work with the most common features of Three.js.
>
> This repo will contain the source code for the 6 large examples (chapters 2 to 7) and the examples to get you
> started will be in chapter 1.

[Convert markdown to HTML](http://www.atool.org/html2markdown.php)

[See the effect directly](http://zengjfos.github.io/essential-threejs)

essential-three.js

* chapter-01:
* 01.01-basic-scene.html[ [source] ](chapter-01/01.01-basic-scene.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.01-basic-scene.html)
* 01.02-simple-mesh.html[ [source] ](chapter-01/01.02-simple-mesh.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.02-simple-mesh.html)
* 01.03-vertices.html [ [source] ](chapter-01/01.03-vertices.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.03-vertices.html)
* 01.04-faces.html [ [source] ](chapter-01/01.04-faces.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.04-faces.html)
* 01.05-controls.html [ [source] ](chapter-01/01.05-controls.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.05-controls.html)
* 01.06-statistics.html [ [source] ](chapter-01/01.06-statistics.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-01/01.06-statistics.html)
* chapter-02:
* 02.01-globe-and-camera.html [ [source] ](chapter-02/02.01-globe-and-camera.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.01-globe-and-camera.html)
* 02.02-basic-textures.html [ [source] ](chapter-02/02.02-basic-textures.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.02-basic-textures.html)
* 02.03-add-lighting.html [ [source] ](chapter-02/02.03-add-lighting.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.03-add-lighting.html)
* 02.04-starry-background.html [ [source] ](chapter-02/02.04-starry-background.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.04-starry-background.html)
* 02.05-advanced-textures.html [ [source] ](chapter-02/02.05-advanced-textures.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.05-advanced-textures.html)
* 02.06-canvas-overlay.html [ [source] ](chapter-02/02.06-canvas-overlay.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.06-canvas-overlay.html)
* 02.07-add-an-object-overlay.html [ [source] ](chapter-02/02.07-add-an-object-overlay.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.07-add-an-object-overlay.html)
* 02.07-add-an-object-overlay-orig.html[ [source] ](chapter-02/02.07-add-an-object-overlay-orig.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-02/02.07-add-an-object-overlay-orig.html)
* chapter-03:
* 03.01-simple-generated-maze.html[ [source] ](chapter-03/03.01-simple-generated-maze.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.01-simple-generated-maze.html)
* 03.02-animate-cube.html [ [source] ](chapter-03/03.02-animate-cube.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.02-animate-cube.html)
* 03.03-collision-detection.html [ [source] ](chapter-03/03.03-collision-detection.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.03-collision-detection.html)
* 03.04-ball-and-maze.html [ [source] ](chapter-03/03.04-ball-and-maze.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.04-ball-and-maze.html)
* 03.05-keyboard-controls.html [ [source] ](chapter-03/03.05-keyboard-controls.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.05-keyboard-controls.html)
* 03.0A-maze.html [ [source] ](chapter-03/03.0A-maze.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-03/03.0A-maze.html)
* chapter-04:
* 04.01-output-sound-volums.html [ [source] ](chapter-04/04.01-output-sound-volums.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-04/04.01-output-sound-volums.html)
* 04.02-particle-line-output.html [ [source] ](chapter-04/04.02-particle-line-output.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-04/04.02-particle-line-output.html)
* 04.03-bar-histogram.html [ [source] ](chapter-04/04.03-bar-histogram.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-04/04.03-bar-histogram.html)
* 04.04-particle-line-landscape.html[ [source] ](chapter-04/04.04-particle-line-landscape.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-04/04.04-particle-line-landscape.html)
* 04.04-bass-circle-system.html [ [source] ](chapter-04/04.04-bass-circle-system.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-04/04.04-bass-circle-system.html)
* chapter-05:
* 05.01-3D-plane-from-scratch.html [ [source] ](chapter-05/05.01-3D-plane-from-scratch.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-05/05.01-3D-plane-from-scratch.html)
* 05.02-3D-plane-from-scratch-perlin.html[ [source] ](chapter-05/05.02-3D-plane-from-scratch-perlin.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-05/05.02-3D-plane-from-scratch-perlin.html)
* 05.03-3D-plane-with-texture.html [ [source] ](chapter-05/05.03-3D-plane-with-texture.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-05/05.03-3D-plane-with-texture.html)
* 05.04-Simple-3D-Buildings.html [ [source] ](chapter-05/05.04-Simple-3D-Buildings.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-05/05.04-Simple-3D-Buildings.html)
* 05.05-generated-tree.html [ [source] ](chapter-05/05.05-generated-tree.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-05/05.05-generated-tree.html)
* chapter-06:
* 06.01-CSS3DSkeleton.html [ [source] ](chapter-06/06.01-CSS3DSkeleton.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-06/06.01-CSS3DSkeleton.html)
* 06.02-google-maps-cube.html[ [source] ](chapter-06/06.02-google-maps-cube.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-06/06.02-google-maps-cube.html)
* 06.03-Animations.html [ [source] ](chapter-06/06.03-Animations.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-06/06.03-Animations.html)
* 06.04-CSS3DSprites.html [ [source] ](chapter-06/06.04-CSS3DSprites.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-06/06.04-CSS3DSprites.html)
* gm-embed.html [ [source] ](chapter-06/gm-embed.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-06/gm-embed.html)
* chapter-07:
* 07.01-load-json-model.html [ [source] ](chapter-07/07.01-load-json-model.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-07/07.01-load-json-model.html)
* 07.02-load-json-model-textures.html [ [source] ](chapter-07/07.02-load-json-model-textures.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-07/07.02-load-json-model-textures.html)
* 07.03-load-json-model-animations-bones.html[ [source] ](chapter-07/07.03-load-json-model-animations-bones.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-07/07.03-load-json-model-animations-bones.html)
* 07.04-load-json-model-animations-morph.html[ [source] ](chapter-07/07.04-load-json-model-animations-morph.html) [ [effect] ](http://zengjfos.github.io/essential-threejs/chapter-07/07.04-load-json-model-animations-morph.html)

3 changes: 3 additions & 0 deletions autorun.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#!/bin/bash

python -m SimpleHTTPServer
43 changes: 37 additions & 6 deletions chapter-01/01.06-statistics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@
<html>
<head>
<title>01.06 - Statistics</title>
<!-- 加载three.js库 -->
<script src="../libs/three.js"></script>
<!-- 加载GUI控制库 -->
<script src="../libs/dat.gui.min.js"></script>
<!-- 加载three.js数据统计库 -->
<script src="../libs/stats.min.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
/* 设置边框距离为0，超出内容为隐藏，目标是全屏 */
margin: 0;
overflow: hidden;
}
Expand All @@ -16,62 +20,74 @@
<script>

// global variables
var renderer;
var scene;
var camera;
var control;
var stats;
var renderer; // 渲染器
var scene; // 场景
var camera; // 摄像头
var control; // GUI 控制器
var stats; // 状态统计

/**
* Initializes the scene, camera and objects. Called when the window is
* loaded by using window.onload (see below)
*
* 初始化场景、摄像头以及一些基础对象，这个初始化函数在窗体加载完成的时候会被调用。
*/
function init() {

// create a scene, that will hold all our elements such as objects, cameras and lights.
// 创建场景，里面保存所有的基础对象、摄像头、灯光。
scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
// 创建摄像头，后面会设置将摄像头摆放在哪里。
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// create a render, sets the background color and the size
// 创建渲染器，设置背景颜色和尺寸
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;

// create the ground plane
// 创建代表地的平台
var planeGeometry = new THREE.PlaneGeometry(20, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;

// rotate and position the plane
// 对代表地的平台进行旋转90度，同时将物体下移2个单位
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -2;
plane.position.z = 0;

// add the plane to the scene
// 将plane加入场景中
scene.add(plane);

// create a cube
// 创建一个立方体
var cubeGeometry = new THREE.BoxGeometry(6, 4, 6);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, transparent:true, opacity:0.6});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.name='cube';
cube.castShadow = true;

// add the cube to the scene
// 将立方体加入场景中
scene.add(cube);

// position and point the camera to the center of the scene
// 设置摄像头在场景中的位置。
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);

// add spotlight for the shadows
// 往场景中添加聚光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 20, 20);
spotLight.shadowCameraNear = 20;
Expand All @@ -81,20 +97,24 @@
scene.add(spotLight);

// setup the control object for the control gui
// 创建控制对象，用于图形界面控制
control = new function() {
this.rotationSpeed = 0.005;
this.opacity = 0.6;
this.color = cubeMaterial.color.getHex();
};

// add extras
// 添加额外的功能
addControlGui(control);
addStatsObject();


// add the output of the renderer to the html element
// 将场景渲染对象加入html中
document.body.appendChild(renderer.domElement);

// 打印调试信息
console.log('Log statement from the init function');
console.log(cube);

Expand All @@ -105,13 +125,15 @@
}


// 创建GUI，绑定控制对象及数据
function addControlGui(controlObject) {
var gui = new dat.GUI();
gui.add(controlObject, 'rotationSpeed', -0.01, 0.01);
gui.add(controlObject, 'opacity', 0.1, 1);
gui.addColor(controlObject, 'color');
}

// 添加状态对象
function addStatsObject() {
stats = new Stats();
stats.setMode(0);
Expand All @@ -127,6 +149,8 @@
/**
* Called when the scene needs to be rendered. Delegates to requestAnimationFrame
* for future renders
*
* 这个函数将被重复调用，所以可以用于做动画效果
*/
function render() {
// update the camera
Expand All @@ -136,18 +160,23 @@
camera.lookAt(scene.position);

// change opacity
// 改变透明度
scene.getObjectByName('cube').material.opacity = control.opacity;

// change color
// 改变颜色
scene.getObjectByName('cube').material.color = new THREE.Color(control.color);

// update stats
// 更新状态
stats.update();

// and render the scene
// 渲染场景
renderer.render(scene, camera);

// render using requestAnimationFrame
// 开始下一次调用，相当于睡眠之后继续调用render这个函数。
requestAnimationFrame(render);
}

Expand All @@ -163,11 +192,13 @@
}

// calls the init function when the window is done loading.
// 绑定init函数，窗体加载完毕，会自动调用init函数
window.onload = init;
// calls the handleResize function when the window is resized
// 当窗体大小被重新调整的时候，调用handleResize函数进行重新调整相关参数。
window.addEventListener('resize', handleResize, false);

</script>
<body>
</body>
</html>
</html>
68 changes: 68 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>essential-threejs</p>

<p>chapter-01:<br>
<a href="chapter-01/01.01-basic-scene.html">01.01-basic-scene.html</a><br>
<a href="chapter-01/01.02-simple-mesh.html">01.02-simple-mesh.html</a><br>
<a href="chapter-01/01.03-vertices.html">01.03-vertices.html</a><br>
<a href="chapter-01/01.04-faces.html">01.04-faces.html</a><br>
<a href="chapter-01/01.05-controls.html">01.05-controls.html</a><br>
<a href="chapter-01/01.06-statistics.html">01.06-statistics.html </a>
</p>

<p>chapter-02:<br>
<a href="chapter-02/02.01-globe-and-camera.html">02.01-globe-and-camera.html</a><br>
<a href="chapter-02/02.02-basic-textures.html">02.02-basic-textures.html</a><br>
<a href="chapter-02/02.03-add-lighting.html">02.03-add-lighting.html</a><br>
<a href="chapter-02/02.04-starry-background.html">02.04-starry-background.html</a><br>
<a href="chapter-02/02.05-advanced-textures.html">02.05-advanced-textures.html</a><br>
<a href="chapter-02/02.06-canvas-overlay.html">02.06-canvas-overlay.html</a><br>
<a href="chapter-02/02.07-add-an-object-overlay.html">02.07-add-an-object-overlay.html</a><br>
<a href="chapter-02/02.07-add-an-object-overlay-orig.html">02.07-add-an-object-overlay-orig.html</a>
</p>

<p>chapter-03:<br>
<a href="chapter-03/03.01-simple-generated-maze.html">03.01-simple-generated-maze.html</a><br>
<a href="chapter-03/03.02-animate-cube.html">03.02-animate-cube.html</a><br>
<a href="chapter-03/03.03-collision-detection.html">03.03-collision-detection.html</a><br>
<a href="chapter-03/03.04-ball-and-maze.html">03.04-ball-and-maze.html</a><br>
<a href="chapter-03/03.05-keyboard-controls.html">03.05-keyboard-controls.html</a><br>
<a href="chapter-03/03.0A-maze.html">03.0A-maze.html</a>
</p>

<p>chapter-04:<br>
<a href="chapter-04/04.01-output-sound-volums.html">04.01-output-sound-volums.html</a><br>
<a href="chapter-04/04.02-particle-line-output.html">04.02-particle-line-output.html</a><br>
<a href="chapter-04/04.03-bar-histogram.html">04.03-bar-histogram.html</a><br>
<a href="chapter-04/04.04-particle-line-landscape.html">04.04-particle-line-landscape.html</a><br>
<a href="chapter-04/04.04-bass-circle-system.html">04.04-bass-circle-system.html</a>
</p>

<p>chapter-05:<br>
<a href="chapter-05/05.01-3D-plane-from-scratch.html">05.01-3D-plane-from-scratch.html</a><br>
<a href="chapter-05/05.02-3D-plane-from-scratch-perlin.html">05.02-3D-plane-from-scratch-perlin.html</a><br>
<a href="chapter-05/05.03-3D-plane-with-texture.html">05.03-3D-plane-with-texture.html</a><br>
<a href="chapter-05/05.04-Simple-3D-Buildings.html">05.04-Simple-3D-Buildings.html</a><br>
<a href="chapter-05/05.05-generated-tree.html">05.05-generated-tree.html</a>
</p>

<p>chapter-06:<br>
<a href="chapter-06/06.01-CSS3DSkeleton.html">06.01-CSS3DSkeleton.html</a><br>
<a href="chapter-06/06.02-google-maps-cube.html">06.02-google-maps-cube.html</a><br>
<a href="chapter-06/06.03-Animations.html">06.03-Animations.html</a><br>
<a href="chapter-06/06.04-CSS3DSprites.html">06.04-CSS3DSprites.html</a><br>
<a href="chapter-06/gm-embed.html">gm-embed.html</a>
</p>

<p>chapter-07:<br>
<a href="chapter-07/07.01-load-json-model.html">07.01-load-json-model.html</a><br>
<a href="chapter-07/07.02-load-json-model-textures.html">07.02-load-json-model-textures.html</a><br>
<a href="chapter-07/07.03-load-json-model-animations-bones.html">07.03-load-json-model-animations-bones.html</a><br>
<a href="chapter-07/07.04-load-json-model-animations-morph.html">07.04-load-json-model-animations-morph.html</a>
</p>
</body>
</html>