[CT404]: Lint Week 3 lecture examples
This commit is contained in:
@ -1,141 +1,143 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var pointLight, pointLightVisible = false;
|
||||
var ambientLight, ambientLightVisible = false;
|
||||
var hemisphereLight, hemisphereLightVisible = false;
|
||||
var directionalLight, directionalLightVisible = false;
|
||||
<head>
|
||||
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var pointLight, pointLightVisible = false;
|
||||
var ambientLight, ambientLightVisible = false;
|
||||
var hemisphereLight, hemisphereLightVisible = false;
|
||||
var directionalLight, directionalLightVisible = false;
|
||||
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600/600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
|
||||
camera.position.set(0, 0, 40);
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
|
||||
|
||||
orbitcontrols = new THREE.OrbitControls (camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
|
||||
// point light and wireframe marker to indicate position
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
|
||||
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10));
|
||||
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
|
||||
pointLight.add(pointlightmarker);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600 / 600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||||
camera.position.set(0, 0, 40);
|
||||
|
||||
// ambient light and wireframe marker
|
||||
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
|
||||
var ambientlightmarker = pointlightmarker.clone();
|
||||
ambientLight.add(ambientlightmarker);
|
||||
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
|
||||
orbitcontrols = new THREE.OrbitControls(camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
|
||||
// hemisphere light and wireframe marker
|
||||
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
|
||||
var hemispherelightmarker = pointlightmarker.clone();
|
||||
hemisphereLight.add(hemispherelightmarker);
|
||||
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
|
||||
// point light and wireframe marker to indicate position
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
|
||||
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5, 10, 10));
|
||||
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
|
||||
pointLight.add(pointlightmarker);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
|
||||
// directional light and wireframe marker
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
var directionallightmarker = pointlightmarker.clone();
|
||||
directionalLight.add(directionallightmarker);
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
directionalLight.target.position.set(10, 20, 0);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
// ambient light and wireframe marker
|
||||
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
|
||||
var ambientlightmarker = pointlightmarker.clone();
|
||||
ambientLight.add(ambientlightmarker);
|
||||
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
|
||||
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1);
|
||||
sphere1.position.set(-20,0,0);
|
||||
scene.add(sphere1);
|
||||
// hemisphere light and wireframe marker
|
||||
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
|
||||
var hemispherelightmarker = pointlightmarker.clone();
|
||||
hemisphereLight.add(hemispherelightmarker);
|
||||
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
|
||||
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00}));
|
||||
sphere2.position.set(0,0,0);
|
||||
scene.add(sphere2);
|
||||
// directional light and wireframe marker
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
var directionallightmarker = pointlightmarker.clone();
|
||||
directionalLight.add(directionallightmarker);
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
directionalLight.target.position.set(10, 20, 0);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff}));
|
||||
sphere3.position.set(20,0,0);
|
||||
scene.add(sphere3);
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
|
||||
sphere1.position.set(-20, 0, 0);
|
||||
scene.add(sphere1);
|
||||
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0,-15,0);
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshLambertMaterial({color: 0xffff00}));
|
||||
sphere2.position.set(0, 0, 0);
|
||||
scene.add(sphere2);
|
||||
|
||||
animate();
|
||||
}
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshPhongMaterial({color: 0x0000ff}));
|
||||
sphere3.position.set(20, 0, 0);
|
||||
scene.add(sphere3);
|
||||
|
||||
function animate() {
|
||||
setTimeout(animate, 1000/60);
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0, -15, 0);
|
||||
|
||||
orbitcontrols.update();
|
||||
animate();
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
function animate() {
|
||||
setTimeout(animate, 1000 / 60);
|
||||
|
||||
function togglePointLight() {
|
||||
pointLightVisible = !pointLightVisible;
|
||||
if (pointLightVisible)
|
||||
scene.add(pointLight);
|
||||
else
|
||||
scene.remove(pointLight);
|
||||
}
|
||||
orbitcontrols.update();
|
||||
|
||||
function toggleAmbientLight() {
|
||||
ambientLightVisible = !ambientLightVisible;
|
||||
if (ambientLightVisible)
|
||||
scene.add(ambientLight);
|
||||
else
|
||||
scene.remove(ambientLight);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function toggleHemisphereLight() {
|
||||
hemisphereLightVisible = !hemisphereLightVisible;
|
||||
if (hemisphereLightVisible)
|
||||
scene.add(hemisphereLight);
|
||||
else
|
||||
scene.remove(hemisphereLight);
|
||||
}
|
||||
function togglePointLight() {
|
||||
pointLightVisible = !pointLightVisible;
|
||||
if (pointLightVisible)
|
||||
scene.add(pointLight);
|
||||
else
|
||||
scene.remove(pointLight);
|
||||
}
|
||||
|
||||
function toggleDirectionalLight() {
|
||||
directionalLightVisible = !directionalLightVisible;
|
||||
if (directionalLightVisible)
|
||||
scene.add(directionalLight);
|
||||
else
|
||||
scene.remove(directionalLight);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
function toggleAmbientLight() {
|
||||
ambientLightVisible = !ambientLightVisible;
|
||||
if (ambientLightVisible)
|
||||
scene.add(ambientLight);
|
||||
else
|
||||
scene.remove(ambientLight);
|
||||
}
|
||||
|
||||
function toggleHemisphereLight() {
|
||||
hemisphereLightVisible = !hemisphereLightVisible;
|
||||
if (hemisphereLightVisible)
|
||||
scene.add(hemisphereLight);
|
||||
else
|
||||
scene.remove(hemisphereLight);
|
||||
}
|
||||
|
||||
function toggleDirectionalLight() {
|
||||
directionalLightVisible = !directionalLightVisible;
|
||||
if (directionalLightVisible)
|
||||
scene.add(directionalLight);
|
||||
else
|
||||
scene.remove(directionalLight);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
<div style="position:absolute; left:20px; top:20px;">
|
||||
<button onclick="togglePointLight();">PointLight</button>
|
||||
<button onclick="toggleAmbientLight();">AmbientLight</button>
|
||||
<button onclick="toggleHemisphereLight();">HemisphereLight</button>
|
||||
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
<div style="position:absolute; left:20px; top:20px;">
|
||||
<button onclick="togglePointLight();">PointLight</button>
|
||||
<button onclick="toggleAmbientLight();">AmbientLight</button>
|
||||
<button onclick="toggleHemisphereLight();">HemisphereLight</button>
|
||||
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,115 +1,118 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var sphere2material, sphere3material;
|
||||
var pointLight, directionalLight;
|
||||
<head>
|
||||
|
||||
// values that we're animating
|
||||
var mat2hue = 1;
|
||||
var mat3green = 0;
|
||||
// animation controller values
|
||||
var mat2dir = -0.001;
|
||||
var mat3dir = 0.001;
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var sphere2material, sphere3material;
|
||||
var pointLight, directionalLight;
|
||||
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
// values that we're animating
|
||||
var mat2hue = 1;
|
||||
var mat3green = 0;
|
||||
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600/600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
|
||||
camera.position.set(0, 0, 40);
|
||||
// animation controller values
|
||||
var mat2dir = -0.001;
|
||||
var mat3dir = 0.001;
|
||||
|
||||
orbitcontrols = new THREE.OrbitControls (camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
|
||||
|
||||
// lights
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
scene.add(pointLight);
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
scene.add(directionalLight);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true, emissive: 0x003300});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1);
|
||||
sphere1.position.set(-20,0,0);
|
||||
scene.add(sphere1);
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600 / 600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||||
camera.position.set(0, 0, 40);
|
||||
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
sphere2material = new THREE.MeshLambertMaterial({color: 0xffff00});
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere2material);
|
||||
sphere2.position.set(0,0,0);
|
||||
scene.add(sphere2);
|
||||
orbitcontrols = new THREE.OrbitControls(camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
sphere3material = new THREE.MeshPhongMaterial({color: 0x0000ff, specular: 0x00ff00, shininess: 100});
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere3material);
|
||||
sphere3.position.set(20,0,0);
|
||||
scene.add(sphere3);
|
||||
// lights
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
scene.add(pointLight);
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
scene.add(directionalLight);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0,-15,0);
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true, emissive: 0x003300});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
|
||||
sphere1.position.set(-20, 0, 0);
|
||||
scene.add(sphere1);
|
||||
|
||||
animate();
|
||||
}
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
sphere2material = new THREE.MeshLambertMaterial({color: 0xffff00});
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), sphere2material);
|
||||
sphere2.position.set(0, 0, 0);
|
||||
scene.add(sphere2);
|
||||
|
||||
function animate() {
|
||||
setTimeout(animate, 1000/60);
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
sphere3material = new THREE.MeshPhongMaterial({color: 0x0000ff, specular: 0x00ff00, shininess: 100});
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), sphere3material);
|
||||
sphere3.position.set(20, 0, 0);
|
||||
scene.add(sphere3);
|
||||
|
||||
orbitcontrols.update();
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0, -15, 0);
|
||||
|
||||
// animate sphere2material between red and yellow using HSL
|
||||
mat2hue += mat2dir;
|
||||
if (mat2hue<=0) {
|
||||
mat2hue = 0;
|
||||
mat2dir = Math.abs(mat2dir);
|
||||
}
|
||||
else if (mat2hue>=0.2) {
|
||||
mat2hue = 0.2;
|
||||
mat2dir = -Math.abs(mat2dir);
|
||||
}
|
||||
sphere2material.color.setHSL(mat2hue, 1, 0.5);
|
||||
animate();
|
||||
}
|
||||
|
||||
// animate sphere3material between red and yellow using RGB
|
||||
mat3green += mat3dir;
|
||||
if (mat3green<=0) {
|
||||
mat3green = 0;
|
||||
mat3dir = Math.abs(mat3dir);
|
||||
}
|
||||
else if (mat3green>=1) {
|
||||
mat3green = 1;
|
||||
mat3dir = -Math.abs(mat3dir);
|
||||
}
|
||||
sphere3material.color.setRGB(1, mat3green, 0);
|
||||
function animate() {
|
||||
setTimeout(animate, 1000 / 60);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
orbitcontrols.update();
|
||||
|
||||
// animate sphere2material between red and yellow using HSL
|
||||
mat2hue += mat2dir;
|
||||
if (mat2hue <= 0) {
|
||||
mat2hue = 0;
|
||||
mat2dir = Math.abs(mat2dir);
|
||||
}
|
||||
else if (mat2hue >= 0.2) {
|
||||
mat2hue = 0.2;
|
||||
mat2dir = -Math.abs(mat2dir);
|
||||
}
|
||||
sphere2material.color.setHSL(mat2hue, 1, 0.5);
|
||||
|
||||
// animate sphere3material between red and yellow using RGB
|
||||
mat3green += mat3dir;
|
||||
if (mat3green <= 0) {
|
||||
mat3green = 0;
|
||||
mat3dir = Math.abs(mat3dir);
|
||||
}
|
||||
else if (mat3green >= 1) {
|
||||
mat3green = 1;
|
||||
mat3dir = -Math.abs(mat3dir);
|
||||
}
|
||||
sphere3material.color.setRGB(1, mat3green, 0);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,153 +1,155 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var pointLight, pointLightVisible = false;
|
||||
var ambientLight, ambientLightVisible = false;
|
||||
var hemisphereLight, hemisphereLightVisible = false;
|
||||
var directionalLight, directionalLightVisible = false;
|
||||
<head>
|
||||
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
|
||||
<script src="three.js"></script>
|
||||
<script src="OrbitControls.js"></script>
|
||||
<script>
|
||||
'use strict'
|
||||
|
||||
// SHADOW CODE ADDED HERE
|
||||
renderer.shadowMap.enabled = true;
|
||||
var renderer, scene, camera, orbitcontrols;
|
||||
var pointLight, pointLightVisible = false;
|
||||
var ambientLight, ambientLightVisible = false;
|
||||
var hemisphereLight, hemisphereLightVisible = false;
|
||||
var directionalLight, directionalLightVisible = false;
|
||||
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
function draw() {
|
||||
// create renderer attached to HTML Canvas object
|
||||
var c = document.getElementById("canvas");
|
||||
renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
|
||||
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600/600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
|
||||
camera.position.set(0, 0, 40);
|
||||
// SHADOW CODE ADDED HERE
|
||||
renderer.shadowMap.enabled = true;
|
||||
|
||||
orbitcontrols = new THREE.OrbitControls (camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
// create the scenegraph
|
||||
scene = new THREE.Scene();
|
||||
|
||||
// point light and wireframe marker to indicate position
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
|
||||
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10));
|
||||
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
|
||||
pointLight.add(pointlightmarker);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
pointLight.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
// create a camera
|
||||
var fov = 75;
|
||||
var aspect = 600 / 600;
|
||||
var near = 0.1;
|
||||
var far = 1000;
|
||||
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||||
camera.position.set(0, 0, 40);
|
||||
|
||||
// ambient light and wireframe marker
|
||||
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
|
||||
var ambientlightmarker = pointlightmarker.clone();
|
||||
ambientLight.add(ambientlightmarker);
|
||||
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
|
||||
orbitcontrols = new THREE.OrbitControls(camera, c);
|
||||
orbitcontrols.enableDamping = true;
|
||||
orbitcontrols.dampingFactor = 0.25;
|
||||
orbitcontrols.enableZoom = true;
|
||||
orbitcontrols.autoRotate = false;
|
||||
|
||||
// hemisphere light and wireframe marker
|
||||
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
|
||||
var hemispherelightmarker = pointlightmarker.clone();
|
||||
hemisphereLight.add(hemispherelightmarker);
|
||||
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
|
||||
// point light and wireframe marker to indicate position
|
||||
pointLight = new THREE.PointLight(0xFFFFFF);
|
||||
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
|
||||
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5, 10, 10));
|
||||
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
|
||||
pointLight.add(pointlightmarker);
|
||||
pointLight.position.set(-10, 20, 0);
|
||||
pointLight.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
// directional light and wireframe marker
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
var directionallightmarker = pointlightmarker.clone();
|
||||
directionalLight.add(directionallightmarker);
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
directionalLight.target.position.set(0, 5, 0);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
directionalLight.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
// ambient light and wireframe marker
|
||||
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
|
||||
var ambientlightmarker = pointlightmarker.clone();
|
||||
ambientLight.add(ambientlightmarker);
|
||||
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
|
||||
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1);
|
||||
sphere1.position.set(-20,0,0);
|
||||
scene.add(sphere1);
|
||||
sphere1.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere1.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
// hemisphere light and wireframe marker
|
||||
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
|
||||
var hemispherelightmarker = pointlightmarker.clone();
|
||||
hemisphereLight.add(hemispherelightmarker);
|
||||
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
|
||||
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00}));
|
||||
sphere2.position.set(0,0,0);
|
||||
scene.add(sphere2);
|
||||
sphere2.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere2.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
// directional light and wireframe marker
|
||||
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
|
||||
var directionallightmarker = pointlightmarker.clone();
|
||||
directionalLight.add(directionallightmarker);
|
||||
directionalLight.position.set(-10, 15, 0);
|
||||
directionalLight.target.position.set(0, 5, 0);
|
||||
scene.add(directionalLight.target); // the target object must be in the scene
|
||||
directionalLight.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff}));
|
||||
sphere3.position.set(20,0,0);
|
||||
scene.add(sphere3);
|
||||
sphere3.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere3.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
// args: radius, widthSegments, heightSegments
|
||||
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
|
||||
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true});
|
||||
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
|
||||
sphere1.position.set(-20, 0, 0);
|
||||
scene.add(sphere1);
|
||||
sphere1.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere1.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0,-15,0);
|
||||
box.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
// SMOOTH SHADING is the default setting for MeshLambertMaterial
|
||||
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshLambertMaterial({color: 0xffff00}));
|
||||
sphere2.position.set(0, 0, 0);
|
||||
scene.add(sphere2);
|
||||
sphere2.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere2.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
animate();
|
||||
}
|
||||
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
|
||||
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshPhongMaterial({color: 0x0000ff}));
|
||||
sphere3.position.set(20, 0, 0);
|
||||
scene.add(sphere3);
|
||||
sphere3.castShadow = true; // SHADOW CODE ADDED HERE
|
||||
sphere3.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
function animate() {
|
||||
setTimeout(animate, 1000/60);
|
||||
// the "ground"
|
||||
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
||||
scene.add(box);
|
||||
box.position.set(0, -15, 0);
|
||||
box.receiveShadow = true; // SHADOW CODE ADDED HERE
|
||||
|
||||
orbitcontrols.update();
|
||||
animate();
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
function animate() {
|
||||
setTimeout(animate, 1000 / 60);
|
||||
|
||||
function togglePointLight() {
|
||||
pointLightVisible = !pointLightVisible;
|
||||
if (pointLightVisible)
|
||||
scene.add(pointLight);
|
||||
else
|
||||
scene.remove(pointLight);
|
||||
}
|
||||
orbitcontrols.update();
|
||||
|
||||
function toggleAmbientLight() {
|
||||
ambientLightVisible = !ambientLightVisible;
|
||||
if (ambientLightVisible)
|
||||
scene.add(ambientLight);
|
||||
else
|
||||
scene.remove(ambientLight);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function toggleHemisphereLight() {
|
||||
hemisphereLightVisible = !hemisphereLightVisible;
|
||||
if (hemisphereLightVisible)
|
||||
scene.add(hemisphereLight);
|
||||
else
|
||||
scene.remove(hemisphereLight);
|
||||
}
|
||||
function togglePointLight() {
|
||||
pointLightVisible = !pointLightVisible;
|
||||
if (pointLightVisible)
|
||||
scene.add(pointLight);
|
||||
else
|
||||
scene.remove(pointLight);
|
||||
}
|
||||
|
||||
function toggleDirectionalLight() {
|
||||
directionalLightVisible = !directionalLightVisible;
|
||||
if (directionalLightVisible)
|
||||
scene.add(directionalLight);
|
||||
else
|
||||
scene.remove(directionalLight);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
function toggleAmbientLight() {
|
||||
ambientLightVisible = !ambientLightVisible;
|
||||
if (ambientLightVisible)
|
||||
scene.add(ambientLight);
|
||||
else
|
||||
scene.remove(ambientLight);
|
||||
}
|
||||
|
||||
function toggleHemisphereLight() {
|
||||
hemisphereLightVisible = !hemisphereLightVisible;
|
||||
if (hemisphereLightVisible)
|
||||
scene.add(hemisphereLight);
|
||||
else
|
||||
scene.remove(hemisphereLight);
|
||||
}
|
||||
|
||||
function toggleDirectionalLight() {
|
||||
directionalLightVisible = !directionalLightVisible;
|
||||
if (directionalLightVisible)
|
||||
scene.add(directionalLight);
|
||||
else
|
||||
scene.remove(directionalLight);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
<div style="position:absolute; left:20px; top:20px;">
|
||||
<button onclick="togglePointLight();">PointLight</button>
|
||||
<button onclick="toggleAmbientLight();">AmbientLight</button>
|
||||
<button onclick="toggleHemisphereLight();">HemisphereLight</button>
|
||||
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
<div style="position:absolute; left:20px; top:20px;">
|
||||
<button onclick="togglePointLight();">PointLight</button>
|
||||
<button onclick="toggleAmbientLight();">AmbientLight</button>
|
||||
<button onclick="toggleHemisphereLight();">HemisphereLight</button>
|
||||
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,44 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
|
||||
var x=0, y=0;
|
||||
var dx=4, dy=5;
|
||||
|
||||
function draw() {
|
||||
<head>
|
||||
<script>
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle="#DDDDDD";
|
||||
context.fillRect(0,0,600,600);
|
||||
// perform movement, and translate to position
|
||||
x+=dx;
|
||||
y+=dy;
|
||||
if (x<=0)
|
||||
dx=4;
|
||||
else if (x>=550)
|
||||
dx=-4;
|
||||
if (y<=0)
|
||||
dy=5;
|
||||
else if (y>=550)
|
||||
dy=-5;
|
||||
context.translate(x,y);
|
||||
// purple rectangle
|
||||
context.fillStyle="#CC00FF";
|
||||
context.fillRect(0,0,50,50);
|
||||
context.restore();
|
||||
var x = 0, y = 0;
|
||||
var dx = 4, dy = 5;
|
||||
|
||||
// do it all again in 1/30th of a second
|
||||
window.setTimeout("draw();",1000/30);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
function draw() {
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle = "#DDDDDD";
|
||||
context.fillRect(0, 0, 600, 600);
|
||||
// perform movement, and translate to position
|
||||
x += dx;
|
||||
y += dy;
|
||||
if (x <= 0)
|
||||
dx = 4;
|
||||
else if (x >= 550)
|
||||
dx = -4;
|
||||
if (y <= 0)
|
||||
dy = 5;
|
||||
else if (y >= 550)
|
||||
dy = -5;
|
||||
context.translate(x, y);
|
||||
// purple rectangle
|
||||
context.fillStyle = "#CC00FF";
|
||||
context.fillRect(0, 0, 50, 50);
|
||||
context.restore();
|
||||
|
||||
// do it all again in 1/30th of a second
|
||||
window.setTimeout("draw();", 1000 / 30);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,47 +1,53 @@
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
|
||||
var x=0, y=0;
|
||||
var dx=4, dy=5;
|
||||
var now = Date.now();
|
||||
|
||||
function draw() {
|
||||
// do it all again in 1/60th of a second
|
||||
window.requestAnimationFrame(draw);
|
||||
<head>
|
||||
<script>
|
||||
var x = 0, y = 0;
|
||||
var dx = 4, dy = 5;
|
||||
var now = Date.now();
|
||||
|
||||
var elapsedMs = Date.now() - now;
|
||||
now = Date.now();
|
||||
function draw() {
|
||||
// do it all again in 1/60th of a second
|
||||
window.requestAnimationFrame(draw);
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle="#DDDDDD";
|
||||
context.fillRect(0,0,600,600);
|
||||
// perform movement, and translate to position
|
||||
x+=dx*elapsedMs/16.7;
|
||||
y+=dy*elapsedMs/16.7;
|
||||
if (x<=0)
|
||||
dx=4;
|
||||
else if (x>=550)
|
||||
dx=-4;
|
||||
if (y<=0)
|
||||
dy=5;
|
||||
else if (y>=550)
|
||||
dy=-5;
|
||||
context.translate(x,y);
|
||||
// purple rectangle
|
||||
context.fillStyle="#CC00FF";
|
||||
context.fillRect(0,0,50,50);
|
||||
context.restore();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
var elapsedMs = Date.now() - now;
|
||||
now = Date.now();
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle = "#DDDDDD";
|
||||
context.fillRect(0, 0, 600, 600);
|
||||
|
||||
// perform movement, and translate to position
|
||||
x += dx * elapsedMs / 16.7;
|
||||
y += dy * elapsedMs / 16.7;
|
||||
|
||||
if (x <= 0)
|
||||
dx = 4;
|
||||
else if (x >= 550)
|
||||
dx = -4;
|
||||
if (y <= 0)
|
||||
dy = 5;
|
||||
else if (y >= 550)
|
||||
dy = -5;
|
||||
|
||||
context.translate(x, y);
|
||||
|
||||
// purple rectangle
|
||||
context.fillStyle = "#CC00FF";
|
||||
context.fillRect(0, 0, 50, 50);
|
||||
context.restore();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
|
||||
<body onload="draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,61 @@
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
var boxes = [];
|
||||
|
||||
function attachEvents() {
|
||||
document.onmousedown = function(event) {
|
||||
// adds a new box at the mouse position
|
||||
// step 1: find a spare index in the sparse array
|
||||
var idx=Math.floor(Math.random()*1000);
|
||||
while (typeof boxes[idx]!="undefined")
|
||||
idx=Math.floor(Math.random()*1000);
|
||||
// step 2: create a new box object and add to the array
|
||||
// setting up its data properties
|
||||
boxes[idx]=new Object();
|
||||
boxes[idx].x = event.clientX;
|
||||
boxes[idx].y = event.clientY;
|
||||
var r = Math.floor(Math.random()*256);
|
||||
var g = Math.floor(Math.random()*256);
|
||||
var b = Math.floor(Math.random()*256);
|
||||
boxes[idx].colr = "rgb("+r+","+g+","+b+")";
|
||||
boxes[idx].dy = Math.floor(1+Math.random()*8);
|
||||
}
|
||||
}
|
||||
<head>
|
||||
<script>
|
||||
var boxes = [];
|
||||
|
||||
function draw() {
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle="#DDDDDD";
|
||||
context.fillRect(0,0,600,600);
|
||||
function attachEvents() {
|
||||
document.onmousedown = function (event) {
|
||||
// adds a new box at the mouse position
|
||||
// step 1: find a spare index in the sparse array
|
||||
var idx = Math.floor(Math.random() * 1000);
|
||||
while (typeof boxes[idx] != "undefined")
|
||||
idx = Math.floor(Math.random() * 1000);
|
||||
// step 2: create a new box object and add to the array
|
||||
// setting up its data properties
|
||||
boxes[idx] = new Object();
|
||||
boxes[idx].x = event.clientX;
|
||||
boxes[idx].y = event.clientY;
|
||||
var r = Math.floor(Math.random() * 256);
|
||||
var g = Math.floor(Math.random() * 256);
|
||||
var b = Math.floor(Math.random() * 256);
|
||||
boxes[idx].colr = "rgb(" + r + "," + g + "," + b + ")";
|
||||
boxes[idx].dy = Math.floor(1 + Math.random() * 8);
|
||||
}
|
||||
}
|
||||
|
||||
// iterate thru the objects in our sparse array
|
||||
// the for..in construct obtains *indices* rather than *data values*
|
||||
for (var idx in boxes) {
|
||||
var y=boxes[idx].y+boxes[idx].dy; // animate box downwards
|
||||
if (y<600) {
|
||||
context.save();
|
||||
boxes[idx].y=y;
|
||||
context.translate(boxes[idx].x,y);
|
||||
context.fillStyle=boxes[idx].colr;
|
||||
context.fillRect(0,0,20,20);
|
||||
context.restore();
|
||||
}
|
||||
else
|
||||
delete boxes[idx]; // box has passed offscreen so delete it from array
|
||||
}
|
||||
function draw() {
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// do it all again in 1/30th of a second
|
||||
window.setTimeout("draw();",1000/30);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle = "#DDDDDD";
|
||||
context.fillRect(0, 0, 600, 600);
|
||||
|
||||
// iterate thru the objects in our sparse array
|
||||
// the for..in construct obtains *indices* rather than *data values*
|
||||
for (var idx in boxes) {
|
||||
var y = boxes[idx].y + boxes[idx].dy; // animate box downwards
|
||||
if (y < 600) {
|
||||
context.save();
|
||||
boxes[idx].y = y;
|
||||
context.translate(boxes[idx].x, y);
|
||||
context.fillStyle = boxes[idx].colr;
|
||||
context.fillRect(0, 0, 20, 20);
|
||||
context.restore();
|
||||
}
|
||||
else
|
||||
delete boxes[idx]; // box has passed offscreen so delete it from array
|
||||
}
|
||||
|
||||
// do it all again in 1/30th of a second
|
||||
window.setTimeout("draw();", 1000 / 30);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="attachEvents(); draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
|
||||
<body onload="attachEvents(); draw();">
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,34 +1,38 @@
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
function attachEvents() {
|
||||
document.onkeypress = function(event) {
|
||||
var xoffset=10*parseInt(String.fromCharCode(event.keyCode || event.charCode));
|
||||
draw(xoffset);
|
||||
}
|
||||
}
|
||||
function draw(xoffset) {
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a white rectangle
|
||||
context.fillStyle="#FFFFFF";
|
||||
context.fillRect(0,0,300,300);
|
||||
// translate based on numerical keypress
|
||||
context.translate(xoffset,0);
|
||||
// purple rectangle
|
||||
context.fillStyle="#CC00FF";
|
||||
context.fillRect(0,0,50,50);
|
||||
context.restore();
|
||||
<head>
|
||||
<script>
|
||||
function attachEvents() {
|
||||
document.onkeypress = function (event) {
|
||||
var xoffset = 10 * parseInt(String.fromCharCode(event.keyCode || event.charCode));
|
||||
draw(xoffset);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
function draw(xoffset) {
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
|
||||
// over-write previous content, with a white rectangle
|
||||
context.fillStyle = "#FFFFFF";
|
||||
context.fillRect(0, 0, 300, 300);
|
||||
|
||||
// translate based on numerical keypress
|
||||
context.translate(xoffset, 0);
|
||||
|
||||
// purple rectangle
|
||||
context.fillStyle = "#CC00FF";
|
||||
context.fillRect(0, 0, 50, 50);
|
||||
context.restore();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="attachEvents();">
|
||||
<canvas id="canvas" width="300" height="300"></canvas>
|
||||
</body>
|
||||
|
||||
<body onload="attachEvents();">
|
||||
<canvas id="canvas" width="300" height="300"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,45 +1,47 @@
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
var isMouseDown=false;
|
||||
function attachEvents() {
|
||||
document.onmousedown = function(event) {
|
||||
isMouseDown=true;
|
||||
draw(event.clientX, event.clientY);
|
||||
}
|
||||
document.onmouseup = function(event) {
|
||||
isMouseDown=false;
|
||||
}
|
||||
document.onmousemove = function(event) {
|
||||
if ( isMouseDown ) {
|
||||
draw(event.clientX, event.clientY);
|
||||
}
|
||||
}
|
||||
}
|
||||
function draw(xoffset,yoffset) {
|
||||
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle="#DDDDDD";
|
||||
context.fillRect(0,0,600,600);
|
||||
// translate based on position of mouseclick
|
||||
context.translate(xoffset,yoffset);
|
||||
// purple rectangle
|
||||
context.fillStyle="#CC00FF";
|
||||
context.fillRect(-25,-25,50,50); // centred on coord system
|
||||
context.restore();
|
||||
<head>
|
||||
<script>
|
||||
var isMouseDown = false;
|
||||
function attachEvents() {
|
||||
document.onmousedown = function (event) {
|
||||
isMouseDown = true;
|
||||
draw(event.clientX, event.clientY);
|
||||
}
|
||||
document.onmouseup = function (event) {
|
||||
isMouseDown = false;
|
||||
}
|
||||
document.onmousemove = function (event) {
|
||||
if (isMouseDown) {
|
||||
draw(event.clientX, event.clientY);
|
||||
}
|
||||
}
|
||||
}
|
||||
function draw(xoffset, yoffset) {
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
// remove previous translation if any
|
||||
context.save();
|
||||
// over-write previous content, with a grey rectangle
|
||||
context.fillStyle = "#DDDDDD";
|
||||
context.fillRect(0, 0, 600, 600);
|
||||
// translate based on position of mouseclick
|
||||
context.translate(xoffset, yoffset);
|
||||
// purple rectangle
|
||||
context.fillStyle = "#CC00FF";
|
||||
context.fillRect(-25, -25, 50, 50); // centred on coord system
|
||||
context.restore();
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="attachEvents(); draw(0,0);">
|
||||
hello<br>
|
||||
<div id='canvasdiv' style='position:absolute; left:0px; top:0px;'><canvas id="canvas" width="600"
|
||||
height="600"></canvas></div>
|
||||
</body>
|
||||
|
||||
<body onload="attachEvents(); draw(0,0);">
|
||||
hello<br>
|
||||
<div id='canvasdiv' style='position:absolute; left:0px; top:0px;'><canvas id="canvas" width="600" height="600"></canvas></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -11,29 +11,29 @@ function orientationInterpolator(data) {
|
||||
|
||||
orientationInterpolator.prototype.getEulerAngles = function() {
|
||||
var now = Date.now();
|
||||
var elapsed = now-this.startTime;
|
||||
while (elapsed>=this.data.times[this.keyframe2]) {
|
||||
var elapsed = now - this.startTime;
|
||||
while (elapsed >= this.data.times[this.keyframe2]) {
|
||||
this.keyframe1++;
|
||||
this.keyframe2++;
|
||||
if (this.keyframe2>=this.data.times.length) { // loop back to keyframe 0
|
||||
if (this.keyframe2 >= this.data.times.length) { // loop back to keyframe 0
|
||||
var timeSinceLastFrame = elapsed - this.data.times[this.keyframe1];
|
||||
this.startTime = now - timeSinceLastFrame;
|
||||
this.keyframe1 = 0;
|
||||
this.keyframe2 = 1;
|
||||
elapsed = now-this.startTime;
|
||||
this.keyframe2 = 1;
|
||||
elapsed = now - this.startTime;
|
||||
}
|
||||
}
|
||||
|
||||
var timeBetweenKeyFrames = this.data.times[this.keyframe2] - this.data.times[this.keyframe1];
|
||||
var timeSinceKeyframe1 = elapsed - this.data.times[this.keyframe1];
|
||||
var fractionBetweenFrames = timeSinceKeyframe1/timeBetweenKeyFrames;
|
||||
var fractionBetweenFrames = timeSinceKeyframe1 / timeBetweenKeyFrames;
|
||||
var frame1rot = this.data.angles[this.keyframe1];
|
||||
var frame2rot = this.data.angles[this.keyframe2];
|
||||
|
||||
var rot = {
|
||||
x: frame1rot.x*(1-fractionBetweenFrames) + frame2rot.x*fractionBetweenFrames,
|
||||
y: frame1rot.y*(1-fractionBetweenFrames) + frame2rot.y*fractionBetweenFrames,
|
||||
z: frame1rot.z*(1-fractionBetweenFrames) + frame2rot.z*fractionBetweenFrames
|
||||
x: frame1rot.x * (1 - fractionBetweenFrames) + frame2rot.x * fractionBetweenFrames,
|
||||
y: frame1rot.y * (1 - fractionBetweenFrames) + frame2rot.y * fractionBetweenFrames,
|
||||
z: frame1rot.z * (1 - fractionBetweenFrames) + frame2rot.z * fractionBetweenFrames
|
||||
};
|
||||
|
||||
return rot;
|
||||
|
||||
Reference in New Issue
Block a user