https://github.com/josdirksen/learning-threejs
Different environments for a local web server:
用Python > python -m SimpleHTTPServer
用NPM > npm install -g http-server > http-server
Using Mongoose -- Portable on Mac/Windows
Put the book code into the web service root directory
This book uses Three.js r60
HTML frame
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton </title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
$(function () {
// here we'll put the Three.js stuff
});
</script>
</body>
</html>
1.4 Rendering and displaying 3D objects
Create the first scene, add a few objects and a camera
<script type="text/javascript">
$(function () {
// here we'll put the Three.js stuff
var scene = new THREE.Scene(); //场景
//camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
//Renderer
var renderer = new THREE.WebGLRenderer ();
renderer.setClearColorHex(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
//Axis
var axes = new THREE.AxisHelper(20);
scene.add(axes);
//flat
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材质
var plane = new THREE.Mesh(planeGeometry, planeMaterial); //Merge to mesh object
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//square
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
//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);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
//camera
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); //point to the center of the scene
//Hook the renderer to the <div> element
$("#WebGL-output").append(renderer.domElement);
renderer.render(scene, camera);
});
</script>
1.5 Adding materials, lights and shadows
light source
//light source var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -40, 60, -10 ); scene.add( spotLight );
1.6 Extend your first scene with animation
setInterval( function, interval ); is not synchronized with the redrawing of the display, which may lead to higher CPU usage and reduce system efficiency. The requestAnimationFrame() method is introduced
<script type="text/javascript" src="../libs/stats.js"></script>
1.7 Using the dat.GUI library to simplify experiments
A library for dat.GUI created by Google
// GUI
var controls = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI ();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
1.8 Using ASCII Effects
Using ASCII effects, you can turn a beautiful animated scene into a retro, text-painted style animation with just a few lines of code
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton </title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript">
function initStats() {
var stats = new Stats ();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append( stats.domElement );
return stats;
}
$(function () {
// summary graph
var stats = initStats ();
// here we'll put the Three.js stuff
var scene = new THREE.Scene(); //场景
//camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
//Renderer
var renderer = new THREE.WebGLRenderer ();
renderer.setClearColorHex(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
//Axis
var axes = new THREE.AxisHelper(20);
scene.add(axes);
//flat
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
//var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc} ); //材质
var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff} ); //材质
var plane = new THREE.Mesh(planeGeometry, planeMaterial); //Merge to mesh object
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//square
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
//var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true} );
var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
//sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
//var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true} );
var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff} );
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
//camera
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); //point to the center of the scene
//light source
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );
// render
function renderScene() {
stats.update();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// GUI
var controls = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI ();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
//animation
var step = 0;
function render() {
// turn the block
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
// bouncing ball
step += controls.bouncingSpeed;
sphere.position.x = 20 + (10*(Math.cos(step))); //Create a smooth trajectory
sphere.position.y = 2 + (10*Math.abs(Math.sin(step)));
requestAnimationFrame(render);
renderer.render(scene, camera);
}
//Hook the renderer to the <div> element
$("#WebGL-output").append(renderer.domElement);
renderScene ();
render();
});
</script>
</body>
</html>