Skip to content

L
learn3d
Commit ac750d62 by Иван Кубота
Options

Initial commit

parents
Showing with 4912 additions and 0 deletions
.gitignore 0 → 100644
# OS X ignores
.DS_Store
.idea/.gitignore 0 → 100644
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
.idea/misc.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/three.iml" filepath="$PROJECT_DIR$/.idea/three.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/three.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
README.md 0 → 100644
cs291
=====
Interactive 3D Graphics class code
Take the class at https://www.udacity.com/course/cs291
IMPORTANT: to run the demo and exercise code in Units 8-10 locally on your own machine, for Chrome you need to add "--allow-file-access-from-files" to your shortcut to enable the use of textures on your machine. Make sure all Chrome processes in the Task Manager are shut down before restarting Chrome with this option. Note that even rebooting won't assure this - chrome.exe processes will often occur on startup. You have to kill these by hand and then run your shortcut. See http://www.chrome-allow-file-access-from-file.com/ for more details.
If you work on exercises with textures locally and then submit your work, you'll need to change one more line at the top of the exercise, something like this:
`var path = "/"; // STUDENT: set to "" to run on your computer, "/" for submitting code to Udacity`
Do as the comment says.
=======
Note: three.js itself is constantly evolving. What we use here is a snapshot of the r56 revision of three.js in lib/three.min.js and lib/three.js.
You can see the [full migration guide](https://github.com/mrdoob/three.js/wiki/Migration) for all changes from version to version.
Changes that affect this code base, between the current three.js code, r58, and this repository's, r56:
* renderer.setClearColorHex should be changed to renderer.setClearColor (this is not backwards compatible).
* OrbitAndPanControls.js: use OrbitAndPanControls.new.js for three.js r58 on.
demo/unit1-fps.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// FPS demo
// Use the slider to adjust FPS an see how that changes the responsiveness
// of the scene.
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, Stats, dat, window, document */
var container, camera, scene, renderer, stats;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var teapotSize = 400;
var ambientLight, light, light2;
var teapot;
var newTime = 0, oldTime = 0;
function setupGui() {
effectController = {
fps: 6.0
};
var gui = new dat.GUI();
var element = gui.add( effectController, "fps", 1.0, 60.0 ).step(1.0);
element.name("FPS");
}
function addToDOM() {
container = document.getElementById('container');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 80000 );
camera.position.set( -800, 700, 1600 );
// SCENE
scene = new THREE.Scene();
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x222222 );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xFFFFFF, 0.8 );
light.position.set( 320, 390, 700 );
scene.add( light );
light2 = new THREE.DirectionalLight( 0xFFFFFF, 0.5 );
light2.position.set( -720, -190, -300 );
scene.add( light2 );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
renderer.gammaInput = true;
renderer.gammaOutput = true;
addToDOM();
// STATS
stats = new Stats();
stats.setMode( 1 );
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
stats.domElement.children[ 0 ].style.background = "transparent";
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIALS
// Note: setting per pixel off does not affect the specular highlight;
// it affects only whether the light direction is recalculated each pixel.
var lambertMaterial = new THREE.MeshLambertMaterial( { color: 0xb00505 } );
lambertMaterial.side = THREE.DoubleSide;
// to test texturing, uncomment the following four lines
//var path = "/"; // STUDENT: set to "" to run on your computer, "/" for submitting code to Udacity
//var texture = THREE.ImageUtils.loadTexture( path + 'textures/ash_uvgrid01.jpg' );
//texture.anisotropy = renderer.getMaxAnisotropy();
//flatGouraudMaterial = new THREE.MeshLambertMaterial( { map: texture } );
teapot = new THREE.Mesh(
new THREE.TeapotGeometry( teapotSize, 8, true, true, true, true ),
lambertMaterial );
scene.add( teapot );
// GUI
setupGui();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
newTime += delta;
// fudge factor: 0.95 correlates closer to true frame rate numbers;
// basically, there's some friction as far as timing goes, and this adjusts for it.
var frameTime = 0.95/effectController.fps;
if ( effectController.fps > 59.9 )
{
// At 60 FPS, simply go as fast as possible;
// Not doing so can force a frame time that is less than 60 FPS.
frameTime = 0;
}
if ( newTime > oldTime + frameTime )
{
oldTime = newTime;
renderer.render( scene, camera );
stats.update();
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
init();
animate();
demo/unit1-render-mode-0.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Rendering modes demo
// This is rendering mode #0
// Rotate the scene and see how the objects are displayed
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, window, document, Stats, dat */
var container, camera, scene, renderer, stats;
var cameraControls, effectController;
var clock = new THREE.Clock();
var sphere, cube, cylinder;
function addToDOM() {
container = document.getElementById('container');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.set( 200, 550, 1300 );
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xFFFFFF, 1000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 2.25 );
light.position.set( 200, 400, 500 );
scene.add( light );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.5 );
light2.position.set( -400, -200, 200 );
scene.add( light2 );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( scene.fog.color, 1 );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// Setting up rendering/sorting options
renderer.sortObjects = true;
renderer.context.depthFunc(renderer.context.LEQUAL);
addToDOM();
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
stats.domElement.children[ 0 ].style.background = "transparent";
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set( 0, 50, 0 );
// MODELS
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 210, 32, 16 ),
new THREE.MeshPhongMaterial( { color: 0x004000, specular: 0x606060 } ) );
sphere.position.x = 0;
sphere.position.y = 210;
sphere.position.z = 0;
scene.add( sphere );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 120, 380, 200 ),
new THREE.MeshLambertMaterial( { color: 0x800000 } ) );
cube.position.x = 50;
cube.position.y = 190;
cube.position.z = 400;
scene.add( cube );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 200, 200, 500, 32, 1 ),
new THREE.MeshPhongMaterial( { color: 0x000060, specular: 0x000060 } ) );
cylinder.position.x = 40;
cylinder.position.y = 250;
cylinder.position.z = -500;
scene.add( cylinder );
//setupGui();
}
function setupGui() {
effectController = {
narration: function() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused) {
song.currentTime = 0;
song.play();
}
else
song.pause();
},
};
var gui = new dat.GUI();
var element = gui.add( effectController, "narration");
element.name("Narration");
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
init();
animate();
\ No newline at end of file
demo/unit1-render-mode-1.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Rendering modes demo
// This is rendering mode #1
// Rotate the scene and see how the objects are displayed
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, window, document, Stats */
var container, camera, scene, renderer, stats;
var cameraControls;
var clock = new THREE.Clock();
var sphere, cube, cylinder;
function addToDOM() {
container = document.getElementById('container');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.set( 200, 550, 1300 );
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xFFFFFF, 1000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 2.25 );
light.position.set( 200, 400, 500 );
scene.add( light );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.5 );
light2.position.set( -400, -200, 200 );
scene.add( light2 );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( scene.fog.color, 1 );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// Setting up rendering/sorting options
renderer.sortObjects = false;
renderer.context.depthFunc(renderer.context.ALWAYS);
addToDOM();
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
stats.domElement.children[ 0 ].style.background = "transparent";
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set( 0, 50, 0 );
// MODELS
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 210, 32, 16 ),
new THREE.MeshPhongMaterial( { color: 0x004000, specular: 0x606060 } ) );
sphere.position.x = 0;
sphere.position.y = 210;
sphere.position.z = 0;
scene.add( sphere );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 120, 380, 200 ),
new THREE.MeshLambertMaterial( { color: 0x800000 } ) );
cube.position.x = 50;
cube.position.y = 190;
cube.position.z = 400;
scene.add( cube );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 200, 200, 500, 32, 1 ),
new THREE.MeshPhongMaterial( { color: 0x000060, specular: 0x000060 } ) );
cylinder.position.x = 40;
cylinder.position.y = 250;
cylinder.position.z = -500;
scene.add( cylinder );
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
init();
animate();
\ No newline at end of file
demo/unit1-render-mode-2.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Rendering modes demo
// This is rendering mode #2
// Rotate the scene and see how the objects are displayed
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, window, document, Stats */
var container, camera, scene, renderer, stats;
var cameraControls;
var clock = new THREE.Clock();
var sphere, cube, cylinder;
function addToDOM() {
container = document.getElementById('container');
var canvas = container.getElementsByTagName('canvas');
if (canvas.length>0) {
container.removeChild(canvas[0]);
}
container.appendChild( renderer.domElement );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.set( 200, 550, 1300 );
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xFFFFFF, 1000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 2.25 );
light.position.set( 200, 400, 500 );
scene.add( light );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.5 );
light2.position.set( -400, -200, 200 );
scene.add( light2 );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( scene.fog.color, 1 );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// Setting up rendering/sorting options
renderer.sortObjects = true;
renderer.context.depthFunc(renderer.context.ALWAYS);
addToDOM();
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
stats.domElement.children[ 0 ].style.background = "transparent";
stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set( 0, 50, 0 );
// MODELS
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 210, 32, 16 ),
new THREE.MeshPhongMaterial( { color: 0x004000, specular: 0x606060 } ) );
sphere.position.x = 0;
sphere.position.y = 210;
sphere.position.z = 0;
scene.add( sphere );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 120, 380, 200 ),
new THREE.MeshLambertMaterial( { color: 0x800000 } ) );
cube.position.x = 50;
cube.position.y = 190;
cube.position.z = 400;
scene.add( cube );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 200, 200, 500, 32, 1 ),
new THREE.MeshPhongMaterial( { color: 0x000060, specular: 0x000060 } ) );
cylinder.position.x = 40;
cylinder.position.y = 250;
cylinder.position.z = -500;
scene.add( cylinder );
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
init();
animate();
\ No newline at end of file
demo/unit1-teacup-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Newell Teacup demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, dat, window */
var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var teacupSize = 400;
var ambientLight, light, particleLight;
var tess = -1; // force initialization
var bCup ;
var bSaucer;
var wire;
var flat;
var phong;
var flatGouraudMaterial, flatPhongMaterial, gouraudMaterial, phongMaterial, wireMaterial;
var teacup;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -1000, 900, 2100 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIALS
// Note: setting per pixel off does not affect the specular highlight;
// it affects only whether the light direction is recalculated each pixel.
var materialColor = new THREE.Color();
materialColor.setRGB( 1.0, 0.8, 0.6 );
flatGouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatGouraudMaterial.shading = THREE.FlatShading;
flatGouraudMaterial.side = THREE.DoubleSide;
flatPhongMaterial = createShaderMaterial( "phong", light, ambientLight );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.shading = THREE.FlatShading;
flatPhongMaterial.side = THREE.DoubleSide;
gouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.side = THREE.DoubleSide;
phongMaterial = createShaderMaterial( "phong", light, ambientLight );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.side = THREE.DoubleSide;
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFCC99, wireframe: true } ) ;
// scene itself
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( ambientLight );
scene.add( light );
scene.add( particleLight );
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
effectController = {
shininess: 100.0,
ka: 0.2,
kd: 0.7,
ks: 0.7,
metallic: false,
hue: 0.09,
saturation: 0.46,
lightness: 0.9,
lhue: 0.04,
lsaturation: 0.01, // so that fractions will be shown
llightness: 1.0,
// bizarrely, if you initialize these with negative numbers, the sliders
// will not show any decimal places.
lx: 0.32,
ly: 0.39,
lz: 0.7,
newTess: 10,
cup: true,
saucer: true,
newFlat: false,
newPhong: true,
newWire: false
};
var h;
var gui = new dat.GUI();
// material (attributes)
h = gui.addFolder( "Material control" );
h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("m_shininess");
h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("m_ka");
h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("m_kd");
h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("m_ks");
h.add( effectController, "metallic" );
// material (color)
h = gui.addFolder( "Material color" );
h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("m_hue");
h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("m_saturation");
h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("m_lightness");
// light (point)
h = gui.addFolder( "Light color" );
h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
// light (directional)
h = gui.addFolder( "Light direction" );
h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
h = gui.addFolder( "Tessellation control" );
h.add(effectController, "newTess", [2,3,4,5,6,8,10,12,16,24,32] ).name("Tessellation Level");
h.add(effectController, "cup").name("display cup");
h.add(effectController, "saucer").name("display saucer");
h.add( effectController, "newFlat" ).name("Flat Shading");
h.add( effectController, "newPhong" ).name("Use Phong");
h.add( effectController, "newWire" ).name("Show wireframe only");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if (effectController.newTess !== tess ||
effectController.cup !== bCup ||
effectController.saucer !== bSaucer ||
effectController.newFlat !== flat || effectController.newPhong !== phong || effectController.newWire !== wire)
{
tess = effectController.newTess;
bCup = effectController.cup;
bSaucer = effectController.saucer;
flat = effectController.newFlat;
phong = effectController.newPhong;
wire = effectController.newWire;
fillScene();
}
flatGouraudMaterial.uniforms.shininess.value = effectController.shininess;
flatPhongMaterial.uniforms.shininess.value = effectController.shininess;
gouraudMaterial.uniforms.shininess.value = effectController.shininess;
phongMaterial.uniforms.shininess.value = effectController.shininess;
flatGouraudMaterial.uniforms.uKd.value = effectController.kd;
flatPhongMaterial.uniforms.uKd.value = effectController.kd;
gouraudMaterial.uniforms.uKd.value = effectController.kd;
phongMaterial.uniforms.uKd.value = effectController.kd;
flatGouraudMaterial.uniforms.uKs.value = effectController.ks;
flatPhongMaterial.uniforms.uKs.value = effectController.ks;
gouraudMaterial.uniforms.uKs.value = effectController.ks;
phongMaterial.uniforms.uKs.value = effectController.ks;
var materialColor = new THREE.Color();
materialColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
if ( !effectController.metallic )
{
materialColor.setRGB(1,1,1);
}
flatGouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
gouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
phongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
// Ambient's actually controlled by the light for this demo - TODO fix
ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );
light.position.set( effectController.lx, effectController.ly, effectController.lz );
light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
renderer.render( scene, camera );
}
function createShaderMaterial( id, light, ambientLight ) {
var shader = THREE.ShaderTypes[ id ];
var u = THREE.UniformsUtils.clone( shader.uniforms );
var vs = shader.vertexShader;
var fs = shader.fragmentShader;
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uAmbientLightColor.value = ambientLight.color;
return material;
}
function fillScene() {
// Coordinates.drawAllAxes({axisLength:1000,axisRadius:5,axisTess:50});
if ( teacup !== undefined ) {
teacup.geometry.dispose();
scene.remove( teacup );
}
teacup = new THREE.Mesh(
new THREE.TeacupGeometry( teacupSize, tess, bCup, bSaucer ),
wire ? wireMaterial : (
flat ?
( phong ? flatPhongMaterial : flatGouraudMaterial ) :
( phong ? phongMaterial : gouraudMaterial ) ));
scene.add( teacup );
}
init();
animate();
demo/unit1-teapot-demo.js 0 → 100644
////////////////////////////////////////////////////////////////////////////////
// Utah/Newell Teapot demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, dat, window */
var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var teapotSize = 400;
var ambientLight, light, particleLight;
var tess = -1; // force initialization
var bBottom ;
var bLid;
var bBody;
var bFitLid;
var bNonBlinn;
var wire;
var flat;
var phong;
var flatGouraudMaterial, flatPhongMaterial, gouraudMaterial, phongMaterial, wireMaterial;
var teapot;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -600, 550, 1300 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIALS
// Note: setting per pixel off does not affect the specular highlight;
// it affects only whether the light direction is recalculated each pixel.
var materialColor = new THREE.Color();
materialColor.setRGB( 1.0, 0.8, 0.6 );
flatGouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatGouraudMaterial.shading = THREE.FlatShading;
flatGouraudMaterial.side = THREE.DoubleSide;
flatPhongMaterial = createShaderMaterial( "phong", light, ambientLight );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.shading = THREE.FlatShading;
flatPhongMaterial.side = THREE.DoubleSide;
gouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.side = THREE.DoubleSide;
phongMaterial = createShaderMaterial( "phong", light, ambientLight );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.side = THREE.DoubleSide;
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFCC99, wireframe: true } ) ;
// scene itself
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( ambientLight );
scene.add( light );
scene.add( particleLight );
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
effectController = {
shininess: 100.0,
ka: 0.2,
kd: 0.7,
ks: 0.7,
metallic: false,
hue: 0.09,
saturation: 0.46,
lightness: 0.9,
lhue: 0.04,
lsaturation: 0.01, // so that fractions will be shown
llightness: 1.0,
// bizarrely, if you initialize these with negative numbers, the sliders
// will not show any decimal places.
lx: 0.32,
ly: 0.39,
lz: 0.7,
newTess: 6,
bottom: true,
lid: true,
body: true,
fitLid: true,
nonblinn: false,
newFlat: false,
newPhong: true,
newWire: false
};
var h;
var gui = new dat.GUI();
// material (attributes)
h = gui.addFolder( "Material control" );
h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("m_shininess");
h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("m_ka");
h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("m_kd");
h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("m_ks");
h.add( effectController, "metallic" );
// material (color)
h = gui.addFolder( "Material color" );
h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("m_hue");
h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("m_saturation");
h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("m_lightness");
// light (point)
h = gui.addFolder( "Light color" );
h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
// light (directional)
h = gui.addFolder( "Light direction" );
h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
h = gui.addFolder( "Tessellation control" );
h.add(effectController, "newTess", [2,3,4,5,6,8,10,12,16,24,32] ).name("Tessellation Level");
h.add(effectController, "lid").name("display lid");
h.add(effectController, "body").name("display body");
h.add(effectController, "bottom").name("display bottom");
h.add(effectController, "fitLid").name("snug lid");
h.add(effectController, "nonblinn").name("original scale");
h.add( effectController, "newFlat" ).name("Flat Shading");
h.add( effectController, "newPhong" ).name("Use Phong");
h.add( effectController, "newWire" ).name("Show wireframe only");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if ( effectController.newTess !== tess ||
effectController.bottom !== bBottom ||
effectController.lid !== bLid ||
effectController.body !== bBody ||
effectController.fitLid !== bFitLid ||
effectController.nonblinn !== bNonBlinn ||
effectController.newFlat !== flat || effectController.newPhong !== phong || effectController.newWire !== wire)
{
tess = effectController.newTess;
bBottom = effectController.bottom;
bLid = effectController.lid;
bBody = effectController.body;
bFitLid = effectController.fitLid;
bNonBlinn = effectController.nonblinn;
flat = effectController.newFlat;
phong = effectController.newPhong;
wire = effectController.newWire;
fillScene();
}
flatGouraudMaterial.uniforms.shininess.value = effectController.shininess;
flatPhongMaterial.uniforms.shininess.value = effectController.shininess;
gouraudMaterial.uniforms.shininess.value = effectController.shininess;
phongMaterial.uniforms.shininess.value = effectController.shininess;
flatGouraudMaterial.uniforms.uKd.value = effectController.kd;
flatPhongMaterial.uniforms.uKd.value = effectController.kd;
gouraudMaterial.uniforms.uKd.value = effectController.kd;
phongMaterial.uniforms.uKd.value = effectController.kd;
flatGouraudMaterial.uniforms.uKs.value = effectController.ks;
flatPhongMaterial.uniforms.uKs.value = effectController.ks;
gouraudMaterial.uniforms.uKs.value = effectController.ks;
phongMaterial.uniforms.uKs.value = effectController.ks;
var materialColor = new THREE.Color();
materialColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
if ( !effectController.metallic )
{
materialColor.setRGB(1,1,1);
}
flatGouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
gouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
phongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
// Ambient's actually controlled by the light for this demo - TODO fix
ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );
light.position.set( effectController.lx, effectController.ly, effectController.lz );
light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
renderer.render( scene, camera );
}
function createShaderMaterial( id, light, ambientLight ) {
var shader = THREE.ShaderTypes[ id ];
var u = THREE.UniformsUtils.clone( shader.uniforms );
var vs = shader.vertexShader;
var fs = shader.fragmentShader;
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uAmbientLightColor.value = ambientLight.color;
return material;
}
function fillScene() {
// Coordinates.drawAllAxes({axisLength:1000,axisRadius:5,axisTess:50});
if ( teapot !== undefined ) {
teapot.geometry.dispose();
scene.remove( teapot );
}
teapot = new THREE.Mesh(
new THREE.TeapotGeometry( teapotSize,
tess,
effectController.bottom,
effectController.lid,
effectController.body,
effectController.fitLid,
!effectController.nonblinn ),
wire ? wireMaterial : (
flat ?
( phong ? flatPhongMaterial : flatGouraudMaterial ) :
( phong ? phongMaterial : gouraudMaterial ) ));
scene.add( teapot );
}
init();
animate();
demo/unit1-teaspoon-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Newell Teaspoon demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, dat, window */
var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var teaspoonSize = 400;
var ambientLight, light, particleLight;
var tess = -1; // force initialization
var wire;
var flat;
var phong;
var flatGouraudMaterial, flatPhongMaterial, gouraudMaterial, phongMaterial, wireMaterial;
var teaspoon;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -600, 550, 1000 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIALS
// Note: setting per pixel off does not affect the specular highlight;
// it affects only whether the light direction is recalculated each pixel.
var materialColor = new THREE.Color();
materialColor.setRGB( 1.0, 0.8, 0.6 );
flatGouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatGouraudMaterial.shading = THREE.FlatShading;
flatGouraudMaterial.side = THREE.DoubleSide;
flatPhongMaterial = createShaderMaterial( "phong", light, ambientLight );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.shading = THREE.FlatShading;
flatPhongMaterial.side = THREE.DoubleSide;
gouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.side = THREE.DoubleSide;
phongMaterial = createShaderMaterial( "phong", light, ambientLight );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.side = THREE.DoubleSide;
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFCC99, wireframe: true } ) ;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( ambientLight );
scene.add( light );
scene.add( particleLight );
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
effectController = {
shininess: 100.0,
ka: 0.2,
kd: 0.7,
ks: 0.7,
metallic: false,
hue: 0.53,
saturation: 0.01,
lightness: 0.9,
lhue: 0.04,
lsaturation: 0.01, // so that fractions will be shown
llightness: 1.0,
// bizarrely, if you initialize these with negative numbers, the sliders
// will not show any decimal places.
lx: 0.32,
ly: 0.39,
lz: 0.7,
newTess: 6,
newFlat: false,
newPhong: true,
newWire: false
};
var h;
var gui = new dat.GUI();
// material (attributes)
h = gui.addFolder( "Material control" );
h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("m_shininess");
h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("m_ka");
h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("m_kd");
h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("m_ks");
h.add( effectController, "metallic" );
// material (color)
h = gui.addFolder( "Material color" );
h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("m_hue");
h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("m_saturation");
h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("m_lightness");
// light (point)
h = gui.addFolder( "Light color" );
h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
// light (directional)
h = gui.addFolder( "Light direction" );
h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
h = gui.addFolder( "Tessellation control" );
h.add(effectController, "newTess", [2,3,4,5,6,8,10,12,16,24,32] ).name("Tessellation Level");
h.add( effectController, "newFlat" ).name("Flat Shading");
h.add( effectController, "newPhong" ).name("Use Phong");
h.add( effectController, "newWire" ).name("Show wireframe only");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if ( effectController.newTess !== tess || effectController.newFlat !== flat || effectController.newPhong !== phong || effectController.newWire !== wire)
{
tess = effectController.newTess;
flat = effectController.newFlat;
phong = effectController.newPhong;
wire = effectController.newWire;
fillScene();
}
flatGouraudMaterial.uniforms.shininess.value = effectController.shininess;
flatPhongMaterial.uniforms.shininess.value = effectController.shininess;
gouraudMaterial.uniforms.shininess.value = effectController.shininess;
phongMaterial.uniforms.shininess.value = effectController.shininess;
flatGouraudMaterial.uniforms.uKd.value = effectController.kd;
flatPhongMaterial.uniforms.uKd.value = effectController.kd;
gouraudMaterial.uniforms.uKd.value = effectController.kd;
phongMaterial.uniforms.uKd.value = effectController.kd;
flatGouraudMaterial.uniforms.uKs.value = effectController.ks;
flatPhongMaterial.uniforms.uKs.value = effectController.ks;
gouraudMaterial.uniforms.uKs.value = effectController.ks;
phongMaterial.uniforms.uKs.value = effectController.ks;
var materialColor = new THREE.Color();
materialColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
if ( !effectController.metallic )
{
materialColor.setRGB(1,1,1);
}
flatGouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
gouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
phongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
// Ambient's actually controlled by the light for this demo - TODO fix
ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );
light.position.set( effectController.lx, effectController.ly, effectController.lz );
light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
renderer.render( scene, camera );
}
function createShaderMaterial( id, light, ambientLight ) {
var shader = THREE.ShaderTypes[ id ];
var u = THREE.UniformsUtils.clone( shader.uniforms );
var vs = shader.vertexShader;
var fs = shader.fragmentShader;
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uAmbientLightColor.value = ambientLight.color;
return material;
}
function fillScene() {
// Coordinates.drawAllAxes({axisLength:1000,axisRadius:5,axisTess:50});
if ( teaspoon !== undefined ) {
teaspoon.geometry.dispose();
scene.remove( teaspoon );
}
teaspoon = new THREE.Mesh(
new THREE.TeaspoonGeometry( teaspoonSize, tess ),
wire ? wireMaterial : (
flat ?
( phong ? flatPhongMaterial : flatGouraudMaterial ) :
( phong ? phongMaterial : gouraudMaterial ) ));
scene.add( teaspoon );
}
init();
animate();
demo/unit10-picking.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Picking: pick object and change its color and place a sphere
////////////////////////////////////////////////////////////////////////////////
/*global THREE, document, window*/
// Mostly grabbed from http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html
// Author unknown.
var camera, scene, projector, renderer;
var sphereMaterial;
var objects = [];
var headlight;
var sphereGeom;
var canvasWidth;
var canvasHeight;
init();
animate();
function init() {
canvasWidth = window.innerWidth;
canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
camera = new THREE.PerspectiveCamera( 70, canvasRatio, 1, 10000 );
camera.position.set( 0, 300, 500 );
scene = new THREE.Scene();
headlight = new THREE.PointLight( 0xFFFFFF, 0.3 );
scene.add( headlight );
var light = new THREE.DirectionalLight( 0xFFFFFF, 0.6 );
light.position.set( 200, 500, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 0.6 );
light.position.set( 0, 200, -300 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 0.4 );
light.position.set( -400, -300, 200 );
scene.add( light );
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
for ( var i = 0; i < 10; i ++ ) {
var object = new THREE.Mesh( geometry,
new THREE.MeshLambertMaterial(
{ color: Math.random() * 0xFFFFFF } )
//, opacity: 0.5, transparent: true } ) );
);
// add a random box between -400 to +400
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
// make box randomly scale by 1 to 3x
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
// probably not uniformly distributed rotations, but that's OK
// See Arvo, "Graphics Gems 3", p. 117 for the right method.
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
scene.add( object );
objects.push( object );
}
sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xD0D0D0 } );
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xFFFFFF, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
sphereGeom = new THREE.SphereGeometry( 6, 12, 6 );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event ) {
//event.preventDefault();
// Annoying nested window code: need to subtract offsets for nested windows.
// This is not needed if you have just a single window filling the browser
// var node = event.target || event.srcElement;
// var mouseX = event.clientX - node.offsetLeft;
// var mouseY = event.clientY - node.offsetTop;
// getBoundingClientRect()
// gives the element's position relative to the browser's visible viewport.
// clientX/Y
// gives the mouse position relative to the browser's visible viewport.
//
// we then just have to find the difference between the two
// to get the mouse position in "canvas-space"
var canvasPosition = renderer.domElement.getBoundingClientRect();
var mouseX = event.clientX - canvasPosition.left;
var mouseY = event.clientY - canvasPosition.top;
// console.log(canvasPosition.left,canvasPosition.top);
// console.log(mouseX,mouseY);
/*
while (node.offsetParent){
node = node.offsetParent;
mouseX -= node.offsetLeft;
mouseY -= node.offsetTop;
}*/
/* the old way */
/*
var mouseVector = new THREE.Vector3(
2 * ( mouseX / canvasWidth ) - 1,
1 - 2 * ( mouseY / canvasHeight ), 0.5 );
projector.unprojectVector( mouseVector, camera );
var raycaster = new THREE.Raycaster( camera.position, mouseVector.sub( camera.position ).normalize() );
*/
/* the new way: simpler creation of raycaster */
/* from tutorial: http://soledadpenades.com/articles/three-js-tutorials/object-picking/ */
var mouseVector = new THREE.Vector3(
2 * ( mouseX / canvasWidth ) - 1,
1 - 2 * ( mouseY / canvasHeight ));
// debug: console.log( "client Y " + event.clientY + ", mouse Y " + mouseY );
var raycaster = projector.pickingRay( mouseVector.clone(), camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setRGB( Math.random(), Math.random(), Math.random() );
var sphere = new THREE.Mesh( sphereGeom, sphereMaterial );
sphere.position = intersects[ 0 ].point;
scene.add( sphere );
}
/*
// Parse all the faces, for when you are using face materials
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xFFFFFF | 0x80000000 );
}
*/
}
//
function animate() {
window.requestAnimationFrame(animate);
render();
}
var radius = 600;
var theta = 0;
function render() {
theta += 0.1;
camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
camera.lookAt( scene.position );
headlight.position.copy( camera.position );
renderer.render( scene, camera );
}
demo/unit2-z-fighting.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Z-fighting demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, $, Coordinates, requestAnimationFrame*/
var camera, scene, renderer;
var cameraControls;
var clock = new THREE.Clock();
function drawDrinkingBird() {
// MATERIALS
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xA00000 } );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xF07020 } );
var cylinderMaterial = new THREE.MeshLambertMaterial( { color: 0x0000D0 } );
var legMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF } );
var sphere, cylinder, cube;
// MODELS
// base
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 4, 2*77 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 4/2; // half of height
cube.position.z = 0; // centered at origin
scene.add( cube );
// left foot
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 52, 6 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = 77 + 6/2; // offset 77 + half of depth 6/2
scene.add( cube );
// left leg
cube = new THREE.Mesh(
new THREE.CubeGeometry( 64, 334+52, 6 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = (334+52)/2;
cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
scene.add( cube );
////////////////////////
// What the student adds
// right foot
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 52, 6 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
scene.add( cube );
// right leg
cube = new THREE.Mesh(
new THREE.CubeGeometry( 64, 334+52, 6 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = (334+52)/2;
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
scene.add( cube );
// body
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 116/2, 32, 16 ), sphereMaterial );
sphere.position.x = 0;
sphere.position.y = 160;
sphere.position.z = 0;
scene.add( sphere );
// head
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 104/2, 32, 16 ), sphereMaterial );
sphere.position.x = 0;
sphere.position.y = 160 + 390;
sphere.position.z = 0;
scene.add( sphere );
// head/body connector
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 24/2, 24/2, 390, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390/2;
cylinder.position.z = 0;
scene.add( cylinder );
// hat brim
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 142/2, 142/2, 10, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10/2;
cylinder.position.z = 0;
scene.add( cylinder );
// hat top
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 80/2, 80/2, 70, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10 + 70/2;
cylinder.position.z = 0;
scene.add( cylinder );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor( scene.fog.color, 1 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 4000 );
camera.position.set( -330, 178, -400 );
// CONTROLS
// For this demo, unconstrained viewing is good, to allow other angles.
cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
// focus on the feet
cameraControls.target.set(0,0,0);
Coordinates.drawGround({size:10000});
Coordinates.drawGrid({size:10000,scale:0.01});
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
renderer.render(scene, camera);
}
function takeScreenshot() {
init();
drinkingBird = drawDrinkingBird();
scene.add(drinkingBird);
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
var drinkingBird = drawDrinkingBird();
scene.add(drinkingBird);
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit2-z-fighting_fixed.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Z-fighting demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, $, Coordinates, requestAnimationFrame*/
var camera, scene, renderer;
var cameraControls;
var clock = new THREE.Clock();
function drawDrinkingBird() {
// MATERIALS
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xA00000 } );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xF07020 } );
var cylinderMaterial = new THREE.MeshLambertMaterial( { color: 0x0000D0 } );
var legMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF } );
var sphere, cylinder, cube;
// MODELS
// base
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 4, 2*77 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 4/2; // half of height
cube.position.z = 0; // centered at origin
scene.add( cube );
// left foot
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 52, 6 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = 77 + 6/2; // offset 77 + half of depth 6/2
scene.add( cube );
// left leg
cube = new THREE.Mesh(
new THREE.CubeGeometry( 64, 334, 6 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 334/2 + 52;
cube.position.z = 77 + 6/2; // negative offset 77 + half of depth 6/2
scene.add( cube );
////////////////////////
// What the student adds
// right foot
cube = new THREE.Mesh(
new THREE.CubeGeometry( 20+64+110, 52, 6 ), cubeMaterial );
cube.position.x = -45; // (20+32) - half of width (20+64+110)/2
cube.position.y = 52/2; // half of height
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
scene.add( cube );
// right leg
cube = new THREE.Mesh(
new THREE.CubeGeometry( 64, 334, 6 ), legMaterial );
cube.position.x = 0; // centered on origin along X
cube.position.y = 334/2 + 52;
cube.position.z = -(77 + 6/2); // negative offset 77 + half of depth 6/2
scene.add( cube );
// body
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 116/2, 32, 16 ), sphereMaterial );
sphere.position.x = 0;
sphere.position.y = 160;
sphere.position.z = 0;
scene.add( sphere );
// head
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 104/2, 32, 16 ), sphereMaterial );
sphere.position.x = 0;
sphere.position.y = 160 + 390;
sphere.position.z = 0;
scene.add( sphere );
// head/body connector
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 24/2, 24/2, 390, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390/2;
cylinder.position.z = 0;
scene.add( cylinder );
// hat brim
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 142/2, 142/2, 10, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10/2;
cylinder.position.z = 0;
scene.add( cylinder );
// hat top
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 80/2, 80/2, 70, 32 ), cylinderMaterial );
cylinder.position.x = 0;
cylinder.position.y = 160 + 390 + 40 + 10 + 70/2;
cylinder.position.z = 0;
scene.add( cylinder );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor( scene.fog.color, 1 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 4000 );
camera.position.set( -330, 178, -400 );
// CONTROLS
// For this demo, unconstrained viewing is good, to allow other angles.
cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
// focus on the feet
cameraControls.target.set(0,0,0);
Coordinates.drawGround({size:10000});
Coordinates.drawGrid({size:10000,scale:0.01});
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
renderer.render(scene, camera);
}
function takeScreenshot() {
init();
drinkingBird = drawDrinkingBird();
scene.add(drinkingBird);
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
var drinkingBird = drawDrinkingBird();
scene.add(drinkingBird);
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit3-blending.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Blending demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = true;
var faceMaterial;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000, color:0xF8E7BE});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6, opacity: 0.7, transparent: true } );
// block
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 150, 80, 100 ), faceMaterial );
cube.position.y = 40;
scene.add( cube );
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 0, 80, 130, 32 ), faceMaterial );
cylinder.position.x = 40;
cylinder.position.y = 65;
cylinder.position.z = 180;
scene.add( cylinder );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 70, 32, 16 ), faceMaterial );
sphere.position.x = -30;
sphere.position.y = 70;
sphere.position.z = -180;
scene.add( sphere );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, canvasRatio, 1, 10000 );
camera.position.set( -420, 400, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,100,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
faceMaterial.opacity = effectController.alpha;
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
alpha: 0.7,
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes
};
var gui = new dat.GUI();
gui.add( effectController, "alpha", 0.0, 1.0, 0.025).name("Alpha");
//gui.add( effectController, "newGridX").name("Show XZ grid");
//gui.add( effectController, "newGridY" ).name("Show YZ grid");
//gui.add( effectController, "newGridZ" ).name("Show XY grid");
//gui.add( effectController, "newGround" ).name("Show ground");
//gui.add( effectController, "newAxes" ).name("Show axes");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit3-color-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// RGB additive color demo (unit 3)
////////////////////////////////////////////////////////////////////////////////
/*global THREE*/
/*global THREE, requestAnimationFrame, dat, window, document*/
var camera, scene, renderer;
var cameraControls;
var ec;
var clock = new THREE.Clock();
var light1, light2, light3;
var ground;
var intensityRed = 1;
var intensityGreen = 1;
var intensityBlue = 1;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( 0, 0, 400 );
light1 = new THREE.SpotLight();
light1.color.setRGB(intensityRed, 0, 0);
light1.position.set( 0, 75, 100 );
light1.angle = 0.7;
light1.exponent = 0;
light1.target.position.set( 0, 75, 0 );
light2 = new THREE.SpotLight();
light2.color.setRGB(0, intensityGreen, 0);
light2.position.set( -61, -25, 100 );
light2.exponent = 0;
light2.target.position.set( -61, -25, 0 );
light2.angle = 0.7;
light3 = new THREE.SpotLight();
light3.color.setRGB(0, 0, intensityBlue);
light3.position.set( 61, -25, 100 );
light3.exponent = 0;
light3.target.position.set( 61, -25, 0 );
light3.angle = 0.7;
// GROUND
var gg = new THREE.PlaneGeometry( 10000, 10000 );
var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
gm.specular.setRGB(0,0,0);
ground = new THREE.Mesh( gg, gm );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xFFFFFF, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
fillScene();
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
ec = {
red: intensityRed,
green: intensityGreen,
blue: intensityBlue
};
var gui = new dat.GUI();
var element = gui.add( ec, "red", 0.0, 1.0 ).step(0.1);
element.name("Red intensity");
element = gui.add( ec, "green", 0.0, 1.0 ).step(0.1);
element.name("Green intensity");
element = gui.add( ec, "blue", 0.0, 1.0 ).step(0.1);
element.name("Blue intensity");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if ( ec.red !== intensityRed || ec.green !== intensityGreen || ec.blue !== intensityBlue)
{
light1.intensity = ec.red;
light2.intensity = ec.green;
light3.intensity = ec.blue;
}
renderer.render( scene, camera );
}
function fillScene() {
scene = new THREE.Scene();
// LIGHTS
scene.add( light1 );
scene.add( light2 );
scene.add( light3 );
scene.add( ground );
}
init();
animate();
demo/unit3-diffuse-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Change angle of light to see how effect decreases with angle
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, dat, window, document*/
var camera, scene, renderer;
var cameraControls;
var ec;
var clock = new THREE.Clock();
var light1, light2, light3;
var ground, lightMesh;
var angle = 0;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( 0, 0, 100 );
light1 = new THREE.SpotLight();
light1.color.setRGB(1, 0, 0);
light1.position.set( -100*Math.sin(angle * Math.PI/180), 0, 100*Math.cos(angle * Math.PI/180) );
light1.angle = 0.1;
light1.exponent = 0;
light1.target.position.set( 0, 0, 0 );
var lightMaterial = new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true});
var lightSpot = new THREE.SphereGeometry( 2, 32, 16 );
lightMesh = new THREE.Mesh( lightSpot, lightMaterial );
lightMesh.position.x = light1.position.x;
lightMesh.position.z = light1.position.z;
// GROUND
var gg = new THREE.PlaneGeometry( 75, 75, 5, 5 );
var gm = new THREE.MeshPhongMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide} );
gm.specular.setRGB(0,0,0);
var wire = new THREE.MeshBasicMaterial({ color: 0x555555, wireframe: true });
ground = new THREE.SceneUtils.createMultiMaterialObject(gg, [gm, wire]);
//ground = new THREE.Mesh( gg, gm );
ground.position.y = -0.1;
//ground.add(new THREE.AxisHelper(100));
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xFFFFFF, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
fillScene();
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
ec = {
angle: angle
};
var gui = new dat.GUI();
var element = gui.add( ec, "angle", 0.0, 90.0 ).step(0.1);
element.name("Light angle");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if ( ec.angle !== 0)
{
light1.position.set( -100*Math.sin(ec.angle * Math.PI/180), 0, 100*Math.cos(ec.angle * Math.PI/180) );
lightMesh.position.x = light1.position.x;
lightMesh.position.z = light1.position.z;
}
renderer.render( scene, camera );
}
function fillScene() {
scene = new THREE.Scene();
// LIGHTS
scene.add( light1 );
scene.add( light2 );
scene.add( light3 );
scene.add( ground );
scene.add(lightMesh);
//Coordinates.drawGrid({size:75,scale:0.1, orientation:"z"});
}
init();
animate();
demo/unit3-lambert-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
/*global THREE, requestAnimationFrame, document, window, dat*/
var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var ambientLight, light;
var sphere, material;
init();
animate();
function init() {
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -1000, 450, -1300 );
// SCENE
scene = new THREE.Scene();
scene.add( camera );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( -620, 390, 100 );
scene.add( light );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIAL
material = new THREE.MeshLambertMaterial( { color: 0x80fc66 } );
var ka = 0.4;
material.ambient.setRGB( material.color.r * ka, material.color.g * ka, material.color.b * ka );
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 400, 64, 32 ), material );
scene.add( sphere );
// GUI
setupGui();
}
function setupGui() {
effectController = {
Ka: 0.3,
Kd: 0.7,
Hue: 0.09,
Saturation: 0.46,
Lightness: 1.0
};
var gui = new dat.GUI();
// material (color)
gui.add( effectController, "Hue", 0.0, 1.0 );
gui.add( effectController, "Saturation", 0.0, 1.0 );
gui.add( effectController, "Lightness", 0.0, 1.0 );
// material (attributes)
gui.add( effectController, "Ka", 0.0, 1.0 );
gui.add( effectController, "Kd", 0.0, 1.0 );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
var materialColor = new THREE.Color();
materialColor.setHSL( effectController.Hue, effectController.Saturation, effectController.Lightness * effectController.Kd );
material.color.copy( materialColor );
materialColor.setHSL( effectController.Hue, effectController.Saturation, effectController.Lightness * effectController.Ka );
material.ambient.copy( materialColor );
renderer.render( scene, camera );
}
demo/unit3-over_operator.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Over operator for blending and how it works
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = false;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = false;
var sourceMaterial, destMaterial;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -2000, 140, 0 );
scene.add(light);
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( 2000, 140, 0 );
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000, color:0xE5E566});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
destMaterial = new THREE.MeshLambertMaterial( { color: 0xE5E566 } );
sourceMaterial = new THREE.MeshLambertMaterial( { color: 0xE53319, opacity: 0.7, transparent: true } );
// block
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 10, 50, 150 ), destMaterial );
cube.position.x = 30;
scene.add( cube );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 10, 150, 50 ), sourceMaterial );
cube.position.x = -30;
scene.add( cube );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xFFFFFF, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 13, canvasRatio, 1, 10000 );
camera.position.set( -800, 0, 0 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,0,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
sourceMaterial.color.setRGB( effectController.sred, effectController.sgreen, effectController.sblue );
sourceMaterial.opacity = effectController.alpha;
destMaterial.color.setRGB( effectController.dred, effectController.dgreen, effectController.dblue );
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
alpha: 0.7,
sred: 0xE5/255,
sgreen: 0x33/255,
sblue: 0x19/155,
dred: 0xE5/255,
dgreen: 0xE5/255,
dblue: 0x66/255
};
var gui = new dat.GUI();
gui.add( effectController, "alpha", 0.0, 1.0, 0.025).name("Alpha");
var h = gui.addFolder( "Source color" );
h.add( effectController, "sred", 0.0, 1.0, 0.025 ).name("red");
h.add( effectController, "sgreen", 0.0, 1.0, 0.025 ).name("green");
h.add( effectController, "sblue", 0.0, 1.0, 0.025 ).name("blue");
h = gui.addFolder( "Destination color" );
h.add( effectController, "dred", 0.0, 1.0, 0.025 ).name("red");
h.add( effectController, "dgreen", 0.0, 1.0, 0.025 ).name("green");
h.add( effectController, "dblue", 0.0, 1.0, 0.025 ).name("blue");
}
function takeScreenshot() {
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( -1000, 140, 0 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit3-teapot-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Teapot demo (unit 3): focus is on illumination model and shading
////////////////////////////////////////////////////////////////////////////////
/*global THREE, requestAnimationFrame, dat, window */
var camera, scene, renderer;
var cameraControls;
var effectController;
var clock = new THREE.Clock();
var teapotSize = 400;
var ambientLight, light, particleLight;
var tess = -1; // force initialization
var wire;
var flat;
var phong;
var flatGouraudMaterial, flatPhongMaterial, gouraudMaterial, phongMaterial, wireMaterial;
var teapot;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -600, 550, 1300 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
// MATERIALS
// Note: setting per pixel off does not affect the specular highlight;
// it affects only whether the light direction is recalculated each pixel.
var materialColor = new THREE.Color();
materialColor.setRGB( 1.0, 0.8, 0.6 );
flatGouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatGouraudMaterial.shading = THREE.FlatShading;
flatGouraudMaterial.side = THREE.DoubleSide;
flatPhongMaterial = createShaderMaterial( "phong", light, ambientLight );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.shading = THREE.FlatShading;
flatPhongMaterial.side = THREE.DoubleSide;
gouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.side = THREE.DoubleSide;
phongMaterial = createShaderMaterial( "phong", light, ambientLight );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.side = THREE.DoubleSide;
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFCC99, wireframe: true } ) ;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( ambientLight );
scene.add( light );
scene.add( particleLight );
// GUI
setupGui();
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth/ canvasHeight;
camera.updateProjectionMatrix();
}
function setupGui() {
effectController = {
shininess: 100.0,
ka: 0.2,
kd: 0.7,
ks: 0.7,
metallic: false,
hue: 0.09,
saturation: 0.46,
lightness: 0.9,
lhue: 0.04,
lsaturation: 0.01, // so that fractions will be shown
llightness: 1.0,
// bizarrely, if you initialize these with negative numbers, the sliders
// will not show any decimal places.
lx: 0.32,
ly: 0.39,
lz: 0.7,
newTess: 6,
newFlat: false,
newPhong: true,
newWire: false
};
var h;
var gui = new dat.GUI();
// material (attributes)
h = gui.addFolder( "Material control" );
h.add( effectController, "shininess", 1.0, 400.0, 1.0 ).name("m_shininess");
h.add( effectController, "ka", 0.0, 1.0, 0.025 ).name("m_ka");
h.add( effectController, "kd", 0.0, 1.0, 0.025 ).name("m_kd");
h.add( effectController, "ks", 0.0, 1.0, 0.025 ).name("m_ks");
h.add( effectController, "metallic" );
// material (color)
h = gui.addFolder( "Material color" );
h.add( effectController, "hue", 0.0, 1.0, 0.025 ).name("m_hue");
h.add( effectController, "saturation", 0.0, 1.0, 0.025 ).name("m_saturation");
h.add( effectController, "lightness", 0.0, 1.0, 0.025 ).name("m_lightness");
// light (point)
h = gui.addFolder( "Light color" );
h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
// light (directional)
h = gui.addFolder( "Light direction" );
h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
h = gui.addFolder( "Tessellation control" );
h.add(effectController, "newTess", [2,3,4,5,6,8,10,12,16,24,32] ).name("Tessellation Level");
h.add( effectController, "newFlat" ).name("Flat Shading");
h.add( effectController, "newPhong" ).name("Use Phong");
h.add( effectController, "newWire" ).name("Show wireframe only");
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update( delta );
if ( effectController.newTess !== tess || effectController.newFlat !== flat || effectController.newPhong !== phong || effectController.newWire !== wire)
{
tess = effectController.newTess;
flat = effectController.newFlat;
phong = effectController.newPhong;
wire = effectController.newWire;
fillScene();
}
flatGouraudMaterial.uniforms.shininess.value = effectController.shininess;
flatPhongMaterial.uniforms.shininess.value = effectController.shininess;
gouraudMaterial.uniforms.shininess.value = effectController.shininess;
phongMaterial.uniforms.shininess.value = effectController.shininess;
flatGouraudMaterial.uniforms.uKd.value = effectController.kd;
flatPhongMaterial.uniforms.uKd.value = effectController.kd;
gouraudMaterial.uniforms.uKd.value = effectController.kd;
phongMaterial.uniforms.uKd.value = effectController.kd;
flatGouraudMaterial.uniforms.uKs.value = effectController.ks;
flatPhongMaterial.uniforms.uKs.value = effectController.ks;
gouraudMaterial.uniforms.uKs.value = effectController.ks;
phongMaterial.uniforms.uKs.value = effectController.ks;
var materialColor = new THREE.Color();
materialColor.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
flatGouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );
phongMaterial.uniforms.uMaterialColor.value.copy( materialColor );
if ( !effectController.metallic )
{
materialColor.setRGB(1,1,1);
}
flatGouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
flatPhongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
gouraudMaterial.uniforms.uSpecularColor.value.copy( materialColor );
phongMaterial.uniforms.uSpecularColor.value.copy( materialColor );
// Ambient's actually controlled by the light for this demo - TODO fix
ambientLight.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness * effectController.ka );
light.position.set( effectController.lx, effectController.ly, effectController.lz );
light.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
renderer.render( scene, camera );
}
function createShaderMaterial( id, light, ambientLight ) {
var shader = THREE.ShaderTypes[ id ];
var u = THREE.UniformsUtils.clone( shader.uniforms );
var vs = shader.vertexShader;
var fs = shader.fragmentShader;
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uAmbientLightColor.value = ambientLight.color;
return material;
}
function fillScene() {
// Coordinates.drawAllAxes({axisLength:1000,axisRadius:5,axisTess:50});
if ( teapot !== undefined ) {
teapot.geometry.dispose();
scene.remove( teapot );
}
var teapot = new THREE.Mesh(
new THREE.TeapotGeometry( teapotSize, tess, true, true, true, true ),
wire ? wireMaterial : (
flat ?
( phong ? flatPhongMaterial : flatGouraudMaterial ) :
( phong ? phongMaterial : gouraudMaterial ) ));
scene.add( teapot );
}
init();
animate();
demo/unit3-tessellation-demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Tessellation demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, dat, window, document*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var ambientLight, light;
var tess = 3; // force initialization
var wire;
var flat;
var sphere;
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( -300, 300, -1500 );
camera.lookAt(0,0,0);
// LIGHTS
ambientLight = new THREE.AmbientLight( 0xFFFFFF );
light = new THREE.DirectionalLight( 0xFFFFFF, 0.7 );
light.position.set( -800, 900, 300 );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls( camera, renderer.domElement );
cameraControls.target.set(0, 0, 0);
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
scene.add( ambientLight );
scene.add( light );
fillScene();
// GUI
setupGui();
}
function setupGui() {
effectController = {
newTess: 6,
newFlat: false,
newWire: false
};
var gui = new dat.GUI();
gui.add(effectController, "newTess", [2,3,4,5,6,8,10,12,16,24,32] ).name("Tessellation Level");
gui.add( effectController, "newFlat" ).name("Flat Shading");
gui.add( effectController, "newWire" ).name("Show wireframe only");
}
var material1 = new THREE.MeshLambertMaterial( { color: 0xFFFF00, shading: THREE.FlatShading } );
var ka = 0.4;
material1.ambient.setRGB( material1.color.r * ka, material1.color.g * ka, material1.color.b * ka );
var material2 = new THREE.MeshLambertMaterial( { color: 0xFFFF00} );
material2.ambient.setRGB( material2.color.r * ka, material2.color.g * ka, material2.color.b * ka );
var material3 = new THREE.MeshLambertMaterial( { color: 0xFFFF00, wireframe: true } );
function fillScene() {
var material = wire ? material3 : (flat ? material1 : material2 );
if ( sphere !== undefined ) {
sphere.geometry.dispose();
scene.remove( sphere );
}
sphere = new THREE.Mesh(new THREE.SphereGeometry( 400, tess*2, tess ), material);
scene.add( sphere );
//Coordinates.drawGround({size:1000});
//Coordinates.drawGrid({size:1000,scale:0.01});
//Coordinates.drawAllAxes({axisLength:500,axisRadius:1,axisTess:4});
}
// EVENT HANDLERS
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth / canvasHeight;
camera.updateProjectionMatrix();
}
//
function animate() {
window.requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newTess !== tess || effectController.newFlat !== flat || effectController.newWire !== wire)
{
tess = effectController.newTess;
flat = effectController.newFlat;
wire = effectController.newWire;
fillScene();
}
renderer.render( scene, camera );
}
init();
animate();
demo/unit3-transparency.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Transparency demo, showing problems of multiple transparent objects
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = true;
var movingCube;
var movingSphere;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000, color:0xF8E7BE});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6, opacity: 0.7, transparent: true } );
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 0, 80, 130, 32 ), faceMaterial );
cylinder.position.x = 40;
cylinder.position.y = 65;
cylinder.position.z = 180;
scene.add( cylinder );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 70, 32, 16 ), faceMaterial );
sphere.position.x = -30;
sphere.position.y = 70;
sphere.position.z = -180;
scene.add( sphere );
var movingSphereMaterial = new THREE.MeshLambertMaterial( { color: 0xE53319 } );
movingSphereMaterial.color.r *= 0.3;
movingSphereMaterial.color.g *= 0.3;
movingSphereMaterial.color.b *= 0.3;
movingSphere = new THREE.Mesh(
new THREE.SphereGeometry( 5, 32, 16 ), movingSphereMaterial );
movingSphere.position.x = 130;
movingSphere.position.y = 100;
scene.add( movingSphere );
var movingBoxMaterial = new THREE.MeshLambertMaterial( { color: 0xE53319, opacity: 0.7, transparent: true } );
// , side: THREE.DoubleSide
movingCube = new THREE.Mesh(
new THREE.CubeGeometry( 200, 50, 100 ), movingBoxMaterial );
movingCube.position.x = 130;
movingCube.position.y = 100;
scene.add( movingCube );
var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xE5E566 } );
sphereMaterial.color.r *= 0.3;
sphereMaterial.color.g *= 0.3;
sphereMaterial.color.b *= 0.3;
sphere = new THREE.Mesh(
new THREE.SphereGeometry( 5, 32, 16 ), sphereMaterial );
sphere.position.x = 0;
sphere.position.y = 100;
scene.add( sphere );
var boxMaterial = new THREE.MeshLambertMaterial( { color: 0xE5E566, opacity: 0.7, transparent: true } );
// , side: THREE.DoubleSide
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 50, 100, 200 ), boxMaterial );
cube.position.x = 0;
cube.position.y = 100;
scene.add( cube );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, canvasRatio, 1, 10000 );
camera.position.set( -420, 400, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,100,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
movingSphere.position.x = effectController.x;
movingCube.position.x = effectController.x;
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
x: 130,
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes
};
var gui = new dat.GUI();
gui.add( effectController, "x", -150, 150, 0.25).name("X position");
//gui.add( effectController, "newGridX").name("Show XZ grid");
//gui.add( effectController, "newGridY" ).name("Show YZ grid");
//gui.add( effectController, "newGridZ" ).name("Show XY grid");
//gui.add( effectController, "newGround" ).name("Show ground");
//gui.add( effectController, "newAxes" ).name("Show axes");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit4-euler_angles.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Euler angle demo: order of rotation application is Z, Y, X in three.js
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var rings = true;
var airplane;
var ringx,ringy,ringz;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
if (rings) {
createAllRings();
}
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x505050, shininess: 100 } );
airplane = new THREE.Object3D();
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 15, 32, 16 ), planeMaterial );
// nose
sphere.rotation.x = 90 * Math.PI/180;
sphere.scale.y = 3.0;
sphere.position.y = 0;
sphere.position.z = 70;
airplane.add( sphere );
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 180, 32 ), planeMaterial );
// body
cylinder.rotation.x = 90 * Math.PI/180;
cylinder.position.y = 0;
cylinder.position.z = -20;
airplane.add( cylinder );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 20, 20, 250, 32 ), planeMaterial );
// wing
cylinder.scale.x = 0.2;
cylinder.rotation.z = 90 * Math.PI/180;
cylinder.position.y = 5;
airplane.add( cylinder );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 100, 32 ), planeMaterial );
// tail wing
cylinder.scale.x = 0.2;
cylinder.rotation.z = 90 * Math.PI/180;
cylinder.position.y = 5;
cylinder.position.z = -90;
airplane.add( cylinder );
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 10, 15, 40, 32 ), planeMaterial );
// tail
cylinder.scale.x = 0.15;
cylinder.rotation.x = -10 * Math.PI/180;
cylinder.position.y = 20;
cylinder.position.z = -96;
airplane.add( cylinder );
scene.add( airplane );
}
function createAllRings() {
//create Rings
ringx = createRing(200,0xFF0000,'x');
ringy = createRing(175,0x00FF00,'y');
ringz = createRing(150,0x0000FF,'z');
//set up rotation hierarchy - assuming x -> y -> z intrinsic
ringy.add(ringz);
ringx.add(ringy);
scene.add(ringx);
}
function createRing(radius,color,axis) {
var sphere_radius = 12;
var ringMaterial = new THREE.MeshLambertMaterial({color: color});
//create ring shape
var circleMesh = new THREE.Mesh(
new THREE.TorusGeometry(radius,5,6,50),
ringMaterial
);
var sphereMesh = new THREE.Mesh(
new THREE.SphereGeometry(sphere_radius,12,10),
ringMaterial
);
sphereMesh.position.x = radius;
var composite = new THREE.Object3D();
composite.add(circleMesh);
composite.add(sphereMesh);
// composite.add(coneMesh);
if (axis === 'x') {
composite.rotation.y = Math.PI/2;
} else if (axis === 'y') {
composite.rotation.x = Math.PI/2;
}
var ringObj = new THREE.Object3D();
ringObj.add(composite);
return ringObj;
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, canvasRatio, 1, 10000 );
camera.position.set( -668, 474, 210 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,0,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newAxes !== axes || effectController.newRings !== rings)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
axes = effectController.newAxes;
rings = effectController.newRings;
fillScene();
}
airplane.rotation.x = effectController.ex * Math.PI/180; // pitch
airplane.rotation.y = effectController.ey * Math.PI/180; // yaw
airplane.rotation.z = effectController.ez * Math.PI/180; // roll
ringx.rotation.x = airplane.rotation.x;
ringy.rotation.y = airplane.rotation.y;
ringz.rotation.z = airplane.rotation.z;
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newAxes: axes,
newRings: rings,
ex: 0.0,
ey: 0.0,
ez: 0.0
};
var gui = new dat.GUI();
var h = gui.addFolder("Grid display");
h.add( effectController, "newGridX").name("Show XZ grid");
h.add( effectController, "newGridY" ).name("Show YZ grid");
h.add( effectController, "newGridZ" ).name("Show XY grid");
h.add( effectController, "newAxes" ).name("Show axes");
h.add( effectController, "newRings").name("Show rings");
h = gui.addFolder("Euler angles");
h.add(effectController, "ez", -180.0, 180.0, 0.025).name("Euler z");
h.add(effectController, "ey", -180.0, 180.0, 0.025).name("Euler y");
h.add(effectController, "ex", -180.0, 180.0, 0.025).name("Euler x");
}
function takeScreenshot() {
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit4-robot_arm_demo.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Basic robot arm: forearm and upper arm
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
var arm, forearm;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } );
var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } );
var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } );
var torus = new THREE.Mesh(
new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial );
torus.rotation.x = 90 * Math.PI/180;
scene.add( torus );
forearm = new THREE.Object3D();
var faLength = 80;
createRobotExtender( forearm, faLength, robotForearmMaterial );
arm = new THREE.Object3D();
var uaLength = 120;
createRobotCrane( arm, uaLength, robotUpperArmMaterial );
// Move the forearm itself to the end of the upper arm.
forearm.position.y = uaLength;
arm.add( forearm );
scene.add( arm );
}
function createRobotExtender( part, length, material )
{
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 22, 22, 6, 32 ), material );
part.add( cylinder );
var i;
for ( i = 0; i < 4; i++ )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 4, length, 4 ), material );
box.position.x = (i < 2) ? -8 : 8;
box.position.y = length/2;
box.position.z = (i%2) ? -8 : 8;
part.add( box );
}
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 40, 32 ), material );
cylinder.rotation.x = 90 * Math.PI/180;
cylinder.position.y = length;
part.add( cylinder );
}
function createRobotCrane( part, length, material )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 18, length, 18 ), material );
box.position.y = length/2;
part.add( box );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 20, 32, 16 ), material );
// place sphere at end of arm
sphere.position.y = length;
part.add( sphere );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, canvasRatio, 1, 10000 );
camera.position.set( -510, 240, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,100,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
arm.rotation.y = effectController.uy * Math.PI/180; // yaw
arm.rotation.z = effectController.uz * Math.PI/180; // roll
forearm.rotation.y = effectController.fy * Math.PI/180; // yaw
forearm.rotation.z = effectController.fz * Math.PI/180; // roll
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes,
uy: 70.0,
uz: -15.0,
fy: 10.0,
fz: 60.0
};
var gui = new dat.GUI();
var h = gui.addFolder("Grid display");
h.add( effectController, "newGridX").name("Show XZ grid");
h.add( effectController, "newGridY" ).name("Show YZ grid");
h.add( effectController, "newGridZ" ).name("Show XY grid");
h.add( effectController, "newGround" ).name("Show ground");
h.add( effectController, "newAxes" ).name("Show axes");
h = gui.addFolder("Arm angles");
h.add(effectController, "uy", -180.0, 180.0, 0.025).name("Upper arm y");
h.add(effectController, "uz", -45.0, 45.0, 0.025).name("Upper arm z");
h.add(effectController, "fy", -180.0, 180.0, 0.025).name("Forearm y");
h.add(effectController, "fz", -120.0, 120.0, 0.025).name("Forearm z");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit4-robot_arm_demo_forearm.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Just the forearm of the robot, for testing
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
var upperArm, forearm;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } );
var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } );
var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } );
//var torus = new THREE.Mesh(
// new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial );
//torus.rotation.x = 90 * Math.PI/180;
//scene.add( torus );
forearm = new THREE.Object3D();
var faLength = 80;
createRobotExtender( forearm, faLength, robotForearmMaterial );
//upperArm = new THREE.Object3D();
//var uaLength = 120;
//createRobotCrane( upperArm, uaLength, robotUpperArmMaterial );
// Move the forearm itself to the end of the upper arm.
//forearm.position.y = uaLength;
//upperArm.add( forearm );
scene.add( forearm );
}
function createRobotExtender( part, length, material )
{
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 22, 22, 6, 32 ), material );
part.add( cylinder );
var i;
for ( i = 0; i < 4; i++ )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 4, length, 4 ), material );
box.position.x = (i < 2) ? -8 : 8;
box.position.y = length/2;
box.position.z = (i%2) ? -8 : 8;
part.add( box );
}
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 40, 32 ), material );
cylinder.rotation.x = 90 * Math.PI/180;
cylinder.position.y = length;
part.add( cylinder );
}
function createRobotCrane( part, length, material )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 18, length, 18 ), material );
box.position.y = length/2;
part.add( box );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 20, 32, 16 ), material );
// place sphere at end of arm
sphere.position.y = length;
part.add( sphere );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 25, canvasRatio, 1, 10000 );
camera.position.set( -300, 160, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,50,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
//upperArm.rotation.y = effectController.uy * Math.PI/180; // yaw
//upperArm.rotation.z = effectController.uz * Math.PI/180; // roll
forearm.rotation.y = effectController.fy * Math.PI/180; // yaw
forearm.rotation.z = effectController.fz * Math.PI/180; // roll
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes,
//uy: 70.0,
//uz: -15.0,
fy: 0.0,
fz: 0.0
};
var gui = new dat.GUI();
var h = gui.addFolder("Grid display");
h.add( effectController, "newGridX").name("Show XZ grid");
h.add( effectController, "newGridY" ).name("Show YZ grid");
h.add( effectController, "newGridZ" ).name("Show XY grid");
h.add( effectController, "newGround" ).name("Show ground");
h.add( effectController, "newAxes" ).name("Show axes");
h = gui.addFolder("Arm angles");
//h.add(effectController, "uy", -180.0, 180.0, 0.025).name("Upper arm y");
//h.add(effectController, "uz", -45.0, 45.0, 0.025).name("Upper arm z");
h.add(effectController, "fy", -180.0, 180.0, 0.025).name("Forearm y");
h.add(effectController, "fz", -120.0, 120.0, 0.025).name("Forearm z");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit4-robot_arm_demo_upper_arm.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Just the upper arm of the robot, for testing
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
var upperArm, forearm;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } );
var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } );
var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } );
//var torus = new THREE.Mesh(
// new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial );
//torus.rotation.x = 90 * Math.PI/180;
//scene.add( torus );
//forearm = new THREE.Object3D();
//var faLength = 80;
//createRobotExtender( forearm, faLength, robotForearmMaterial );
upperArm = new THREE.Object3D();
var uaLength = 120;
createRobotCrane( upperArm, uaLength, robotUpperArmMaterial );
// Move the forearm itself to the end of the upper arm.
//forearm.position.y = uaLength;
//upperArm.add( forearm );
scene.add( upperArm );
}
function createRobotExtender( part, length, material )
{
var cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 22, 22, 6, 32 ), material );
part.add( cylinder );
var i;
for ( i = 0; i < 4; i++ )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 4, length, 4 ), material );
box.position.x = (i < 2) ? -8 : 8;
box.position.y = length/2;
box.position.z = (i%2) ? -8 : 8;
part.add( box );
}
cylinder = new THREE.Mesh(
new THREE.CylinderGeometry( 15, 15, 40, 32 ), material );
cylinder.rotation.x = 90 * Math.PI/180;
cylinder.position.y = length;
part.add( cylinder );
}
function createRobotCrane( part, length, material )
{
var box = new THREE.Mesh(
new THREE.CubeGeometry( 18, length, 18 ), material );
box.position.y = length/2;
part.add( box );
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 20, 32, 16 ), material );
// place sphere at end of arm
sphere.position.y = length;
part.add( sphere );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 25, canvasRatio, 1, 10000 );
camera.position.set( -510, 240, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,50,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
upperArm.rotation.y = effectController.uy * Math.PI/180; // yaw
upperArm.rotation.z = effectController.uz * Math.PI/180; // roll
//forearm.rotation.y = effectController.fy * Math.PI/180; // yaw
//forearm.rotation.z = effectController.fz * Math.PI/180; // roll
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes,
uy: 0.0,
uz: 0.0,
//fy: 10.0,
//fz: 60.0,
};
var gui = new dat.GUI();
var h = gui.addFolder("Grid display");
h.add( effectController, "newGridX").name("Show XZ grid");
h.add( effectController, "newGridY" ).name("Show YZ grid");
h.add( effectController, "newGridZ" ).name("Show XY grid");
h.add( effectController, "newGround" ).name("Show ground");
h.add( effectController, "newAxes" ).name("Show axes");
h = gui.addFolder("Arm angles");
h.add(effectController, "uy", -180.0, 180.0, 0.025).name("Upper arm y");
h.add(effectController, "uz", -45.0, 45.0, 0.025).name("Upper arm z");
//h.add(effectController, "fy", -180.0, 180.0, 0.025).name("Forearm y");
//h.add(effectController, "fz", -120.0, 120.0, 0.025).name("Forearm z");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit4-rotate_then_scale.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Rotate, then scale
// NOTE: this is not really a demo, just a way to show what goes wrong with a
// bad order.
////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window, dat*/
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = false;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
function fillScene() {
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
// LIGHTS
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
scene.add(ambientLight);
scene.add(light);
scene.add(light2);
if (ground) {
Coordinates.drawGround({size:10000});
}
if (gridX) {
Coordinates.drawGrid({size:10000,scale:0.01});
}
if (gridY) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
}
if (gridZ) {
Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});
}
if (axes) {
Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
}
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0xFFECA9 } );
var markMaterial = new THREE.MeshLambertMaterial( { color: 0x89581F } );
var mark12Material = new THREE.MeshLambertMaterial( { color: 0xE6880E } );
var minuteHandMaterial = new THREE.MeshLambertMaterial( { color: 0x226894 } );
var hourHandMaterial = new THREE.MeshLambertMaterial( { color: 0xE02BFB } );
// clock
var clock = new THREE.Mesh(
new THREE.CylinderGeometry( 75, 75, 10, 32 ), faceMaterial );
//new THREE.CubeGeometry( 150, 5, 150 ), faceMaterial );
clock.position.y = 5;
scene.add( clock );
// marks
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 20, 4, 15 ), mark12Material );
cube.position.x = 60;
cube.position.y = 9;
scene.add( cube );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 10, 4, 10 ), markMaterial );
cube.position.x = -60;
cube.position.y = 9;
scene.add( cube );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 10, 4, 10 ), markMaterial );
cube.position.z = 60;
cube.position.y = 9;
scene.add( cube );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 10, 4, 10 ), markMaterial );
cube.position.z = -60;
cube.position.y = 9;
scene.add( cube );
cube = new THREE.Mesh(
new THREE.CubeGeometry( 110, 4, 4 ), minuteHandMaterial );
cube.position.y = 14;
cube.rotation.y = -60 * Math.PI/180;
scene.add( cube );
var clockHourHand = new THREE.Object3D();
var sphere = new THREE.Mesh(
new THREE.SphereGeometry( 10, 32, 16 ), hourHandMaterial );
sphere.rotation.y = 30 * Math.PI/180;
clockHourHand.add( sphere );
clockHourHand.position.y = 18;
clockHourHand.scale.x = 3.0; // 60 / (2 * radius 10 ) -> 3
clockHourHand.scale.y = 0.2; // 4 / (2 * radius 10 ) -> 0.2
clockHourHand.scale.z = 0.2;
scene.add( clockHourHand );
}
function init() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xAAAAAA, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, canvasRatio, 1, 10000 );
camera.position.set( -420, 400, 100 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,0,0);
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
{
gridX = effectController.newGridX;
gridY = effectController.newGridY;
gridZ = effectController.newGridZ;
ground = effectController.newGround;
axes = effectController.newAxes;
fillScene();
}
renderer.render(scene, camera);
}
function setupGui() {
effectController = {
newGridX: gridX,
newGridY: gridY,
newGridZ: gridZ,
newGround: ground,
newAxes: axes
};
var gui = new dat.GUI();
gui.add( effectController, "newGridX").name("Show XZ grid");
gui.add( effectController, "newGridY" ).name("Show YZ grid");
gui.add( effectController, "newGridZ" ).name("Show XY grid");
gui.add( effectController, "newGround" ).name("Show ground");
gui.add( effectController, "newAxes" ).name("Show axes");
}
function takeScreenshot() {
effectController.newGround = true;
effectController.newGridX = false;
effectController.newGridY = false;
effectController.newGridZ = false;
effectController.newAxes = false;
init();
render();
var img1 = renderer.domElement.toDataURL("image/png");
camera.position.set( 400, 500, -800 );
render();
var img2 = renderer.domElement.toDataURL("image/png");
var imgTarget = window.open('', 'For grading script');
imgTarget.document.write('<img src="'+img1+'"/><img src="'+img2+'"/>');
}
init();
setupGui();
animate();
$("body").keydown(function(event) {
if (event.which === 80) {
takeScreenshot();
}
});
\ No newline at end of file
demo/unit8-anisotropy.js 0 → 100644
"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// Anisotropy demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, document, window, dat*/
var path = ""; // STUDENT: set to "" to run on your computer, "/" for submitting code to Udacity
var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var uX = 100;
var uY = 100;
var uU = 100;
var uV = 100;
var texture = [];
var material = [];
var mtlName = 'checker 2x2';
var wrapVal = THREE.RepeatWrapping;
var magName = 'nearest';
var magVal = THREE.NearestFilter;
var minName = 'nearest';
var minVal = THREE.NearestFilter;
var anisotropy = 1;
var gui;
function fillScene() {
scene = new THREE.Scene();
var myPolygon = new SquareGeometry();
var polygonObject = new THREE.Mesh( myPolygon, material[mtlName] );
scene.add(polygonObject);
}
function setFilters() {
// MATERIALS
for (var name in texture)
{
if (texture.hasOwnProperty(name)) {
texture[name].magFilter = magVal;
texture[name].minFilter = minVal;
texture[name].anisotropy = anisotropy;
texture[name].wrapS = wrapVal; texture[name].wrapT = wrapVal;
// if you change filtering, you need to signal that texture needs update
texture[name].needsUpdate = true;
}
}
}
function SquareGeometry() {
var geo = new THREE.Geometry();
// generate vertices
geo.vertices.push( new THREE.Vector3( -uX, 0.0, -uY ) );
geo.vertices.push( new THREE.Vector3( uX, 0.0, -uY ) );
geo.vertices.push( new THREE.Vector3( uX, 0.0, uY ) );
geo.vertices.push( new THREE.Vector3( -uX, 0.0, uY ) );
var uvs = [];
uvs.push( new THREE.Vector2( uU, uV ) );
uvs.push( new THREE.Vector2( uU, 0.0 ) );
uvs.push( new THREE.Vector2( 0.0, 0.0 ) );
uvs.push( new THREE.Vector2( 0.0, uV ) );
// generate faces
geo.faces.push( new THREE.Face3( 0, 1, 2 ) );
geo.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[1], uvs[2] ] );
geo.faces.push( new THREE.Face3( 0, 2, 3 ) );
geo.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[2], uvs[3] ] );
// done: return it.
return geo;
}
// need to init this before GUI
function initRenderer() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
//renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer( );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColorHex( 0xFFFFFF, 1.0 );
var container = document.getElementById('container');
container.appendChild( renderer.domElement );
// Camera: Y up, X right, Z up
camera = new THREE.PerspectiveCamera( 40, canvasRatio, 0.1, 100 );
camera.position.set( 10, 3.4, 2 );
// CONTROLS
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0,0,0);
}
function init() {
// TEXTURES
// If you change the magnify mode, you must reload texture?
texture['checker 1x1 (gray)'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker1x1.png' );
texture['checker 2x2'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker2x2.png' );
texture['checker 4x4'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker4x4.png' );
texture['checker 8x8'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker8x8.png' );
texture['checker 16x16'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker16x16.png' );
texture['checker 32x32'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker32x32.png' );
texture['checker 64x64'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker64x64.png' );
texture['checker 128x128'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker128x128.png' );
texture['checker 256x256'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker256x256.png' );
texture['checker 512x512'] = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/checker512x512.png' );
texture.crate = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/crate.gif' );
texture.grid = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/ash_uvgrid01.jpg');
texture.water = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/water.jpg' );
texture.concrete = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/concrete.jpg' );
texture.letterR = THREE.ImageUtils.loadTexture( path + 'media/img/cs291/textures/r_border.png' );
setFilters();
for (var name in texture)
{
if (texture.hasOwnProperty(name)) {
material[name] = new THREE.MeshBasicMaterial( { map: texture[name], side:THREE.DoubleSide } );
}
}
fillScene();
}
function animate() {
window.requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
cameraControls.update(delta);
if ( effectController.reset )
{
resetGui();
// Iterate over all controllers
for (var i in gui.__controllers) {
if (gui.__controllers.hasOwnProperty(i)) {
gui.__controllers[i].updateDisplay();
}
}
}
var refill = false;
if ( magName !== effectController.magnification ||
minName !== effectController.minification ||
anisotropy !== effectController.anisotropy )
{
magName = effectController.magnification;
minName = effectController.minification;
anisotropy = effectController.anisotropy;
refill = true;
if ( effectController.magnification === 'nearest' )
{
magVal = THREE.NearestFilter;
} else
{
magVal = THREE.LinearFilter;
}
if ( effectController.minification === 'nearest' )
{
minVal = THREE.NearestFilter;
} else if ( effectController.minification === 'linear' )
{
minVal = THREE.LinearFilter;
} else
{
minVal = THREE.LinearMipMapLinearFilter;
}
setFilters();
}
if ( refill ||
mtlName !== effectController.mtlName )
{
mtlName = effectController.mtlName;
fillScene();
}
for (var name in texture)
{
if (texture.hasOwnProperty(name)) {
//texture[name].offset.set( effectController.offset, effectController.offset );
texture[name].repeat.set( effectController.repeat, effectController.repeat );
}
}
camera.fov = effectController.fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
function resetGui() {
effectController.magnification = 'linear';
effectController.minification = 'mipmap';
effectController.anisotropy = 1;
effectController.fov = 40;
effectController.repeat = 3;
effectController.mtlName = 'checker 32x32';
effectController.reset = false;
}
function setupGui() {
effectController = {
// Actually, resetGui sets the values, use that for defaults
magnification: 'linear',
minification: 'mipmap',
anisotropy: 1,
fov: 40,
repeat: 3,
mtlName: 'checker 32x32',
reset: false
};
resetGui();
gui = new dat.GUI();
gui.add( effectController, "magnification", ['nearest','linear'] ).name("magnification");
gui.add( effectController, "minification", ['nearest','linear','mipmap'] ).name("minification");
var anisoCount = 1;
var anisoList = [];
while ( anisoCount <= renderer.getMaxAnisotropy() ) {
anisoList.push(anisoCount);
anisoCount *= 2;
}
gui.add( effectController, "anisotropy", anisoList ).name("anisotropy");
gui.add( effectController, "repeat", 0.1, 10.0 ).name("texture repeat");
gui.add( effectController, "fov", 5, 150 ).name("field of view");
gui.add( effectController, "mtlName", ['checker 1x1 (gray)','checker 2x2','checker 4x4','checker 8x8','checker 16x16','checker 32x32','checker 64x64','checker 128x128','checker 256x256','checker 512x512','crate','grid','water','concrete','letterR'] ).name("texture image");
gui.add( effectController, "reset" ).name("reset");
}
initRenderer();
setupGui();
init();
animate();
index.html 0 → 100644
This diff is collapsed. Click to expand it.
lib/Detector.js 0 → 100644
This diff is collapsed. Click to expand it.
lib/sprintf.js 0 → 100644
This diff is collapsed. Click to expand it.
lib/three.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
lib/three.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
three.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
transforms.html 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment