wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-08-20 12:00:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

update to three.js r70.

Browse Source
This commit is contained in:
satoru kimura
2015-01-20 13:19:00 +09:00
parent 2deb7cab53
commit 33bd3c9d76
32 changed files with 496 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
threejs/tests/canvas/canvas_camera_orthographic.ts
+3 -5
View File
@@ -4,7 +4,6 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_camera_orthographic.html
() => {
var container, stats;
var camera, scene, renderer;
@@ -47,10 +46,9 @@
}
var material1 = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 });
var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 });
var line = new THREE.Line(geometry, material1);
line.mode = THREE.LinePieces;
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Cubes
@@ -93,8 +91,8 @@
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
threejs/tests/canvas/canvas_geometry_cube.ts
+2 -2
View File
@@ -61,7 +61,7 @@
// Plane
var geometry2 = new THREE.PlaneGeometry(200, 200);
var geometry2 = new THREE.PlaneBufferGeometry(200, 200);
geometry2.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI / 2));
var material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, overdraw: 0.5 });
@@ -71,8 +71,8 @@
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
threejs/tests/canvas/canvas_interactive_cubes_tween.ts
+23 -6
View File
@@ -6,7 +6,10 @@
() => {
var container, stats;
var camera, scene, projector, renderer;
var camera, scene, renderer;
var raycaster;
var mouse;
init();
animate();
@@ -48,12 +51,15 @@
}
projector = new THREE.Projector();
//
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
@@ -62,6 +68,7 @@
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
//
@@ -78,14 +85,24 @@
}
function onDocumentTouchStart(event) {
event.preventDefault();
event.clientX = event.touches[0].clientX;
event.clientY = event.touches[0].clientY;
onDocumentMouseDown(event);
}
function onDocumentMouseDown(event) {
event.preventDefault();
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.height) * 2 + 1;
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
threejs/tests/canvas/canvas_lights_pointlights.ts
+16 -15
View File
@@ -42,14 +42,14 @@
}
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
light1.add( sprite );
var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xff0040, program: program }));
light1.add(sprite);
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
light2.add( sprite );
var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x0040ff, program: program }));
light2.add(sprite);
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
light3.add( sprite );
var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x80ff80, program: program }));
light3.add(sprite);
loader = new THREE.JSONLoader();
loader.load('obj/WaltHeadLo.js', function (geometry) {
@@ -60,6 +60,7 @@
});
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
@@ -93,17 +94,17 @@
if (mesh) mesh.rotation.y -= 0.01;
light1.position.x = Math.sin( time * 0.7 ) * 30;
light1.position.y = Math.cos( time * 0.5 ) * 40;
light1.position.z = Math.cos( time * 0.3 ) * 30;
light1.position.x = Math.sin(time * 0.7) * 30;
light1.position.y = Math.cos(time * 0.5) * 40;
light1.position.z = Math.cos(time * 0.3) * 30;
light2.position.x = Math.cos( time * 0.3 ) * 30;
light2.position.y = Math.sin( time * 0.5 ) * 40;
light2.position.z = Math.sin( time * 0.7 ) * 30;
light2.position.x = Math.cos(time * 0.3) * 30;
light2.position.y = Math.sin(time * 0.5) * 40;
light2.position.z = Math.sin(time * 0.7) * 30;
light3.position.x = Math.sin( time * 0.7 ) * 30;
light3.position.y = Math.cos( time * 0.3 ) * 40;
light3.position.z = Math.sin( time * 0.5 ) * 30;
light3.position.x = Math.sin(time * 0.7) * 30;
light3.position.y = Math.cos(time * 0.3) * 40;
light3.position.z = Math.sin(time * 0.5) * 30;
renderer.render(scene, camera);
threejs/tests/canvas/canvas_materials.ts
+14 -19
View File
@@ -5,9 +5,6 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var materials: THREE.Material[];
var debugContext: any;
// -------
var container, stats;
var camera, scene, renderer, objects;
@@ -44,15 +41,14 @@
var material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.2 });
var line = new THREE.Line(geometry, material);
line.mode = THREE.LinePieces;
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Spheres
var geometry2 = new THREE.SphereGeometry(100, 14, 7);
materials = [
var materials: THREE.Material[] = [
new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, side: THREE.DoubleSide }),
new THREE.MeshBasicMaterial({ color: 0xff0000, blending: THREE.AdditiveBlending }),
@@ -61,8 +57,7 @@
new THREE.MeshDepthMaterial({ overdraw: 0.5 }),
new THREE.MeshNormalMaterial({ overdraw: 0.5 }),
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/land_ocean_ice_cloud_2048.jpg') }),
new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', new THREE.SphericalReflectionMapping()), overdraw: 0.5 }),
new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', new THREE.SphericalRefractionMapping()), overdraw: 0.5 })
new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', THREE.SphericalReflectionMapping), overdraw: 0.5 })
];
@@ -79,7 +74,7 @@
for (var i = 0, l = materials.length; i < l; i++) {
var sphere = new THREE.Mesh(geometry2, materials[i]);
var sphere = new THREE.Mesh(geometry, materials[i]);
sphere.position.x = (i % 5) * 200 - 400;
sphere.position.z = Math.floor(i / 5) * 200 - 200;
@@ -103,9 +98,9 @@
}
// Lights
// Lights
scene.add(new THREE.AmbientLight(Math.random() * 0x202020));
scene.add(new THREE.AmbientLight(Math.random() * 0x202020));
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
@@ -117,11 +112,12 @@
pointLight = new THREE.PointLight(0xffffff, 1);
scene.add(pointLight);
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
sprite.scale.set( 8, 8, 8 );
pointLight.add( sprite );
var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xffffff, program: program }));
sprite.scale.set(8, 8, 8);
pointLight.add(sprite);
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
@@ -134,7 +130,7 @@
container.appendChild(debugCanvas);
debugContext = debugCanvas.getContext('2d');
var debugContext = debugCanvas.getContext('2d');
debugContext.setTransform(1, 0, 0, 1, 256, 256);
debugContext.strokeStyle = '#000000';
@@ -198,10 +194,9 @@
}
pointLight.position.x = Math.sin( timer * 7 ) * 300;
pointLight.position.y = Math.cos( timer * 5 ) * 400;
pointLight.position.z = Math.cos( timer * 3 ) * 300;
pointLight.position.x = Math.sin(timer * 7) * 300;
pointLight.position.y = Math.cos(timer * 5) * 400;
pointLight.position.z = Math.cos(timer * 3) * 300;
renderer.render(scene, camera);
threejs/tests/canvas/canvas_particles_floor.ts
+1
View File
@@ -47,6 +47,7 @@
}
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
threejs/tests/css3d/css3d_periodictable.ts
+12 -10
View File
@@ -6,7 +6,6 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var object: any;
// -------
var table = [
"H", "Hydrogen", "1.00794", 1, 1,
@@ -160,7 +159,7 @@
var symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = (table[i]).toString();
symbol.textContent = table[i].toString();
element.appendChild(symbol);
var details = document.createElement('div');
@@ -168,16 +167,17 @@
details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
element.appendChild(details);
object = new THREE.CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add(object);
var cssobject = new THREE.CSS3DObject(element);
cssobject.position.x = Math.random() * 4000 - 2000;
cssobject.position.y = Math.random() * 4000 - 2000;
cssobject.position.z = Math.random() * 4000 - 2000;
scene.add(cssobject);
objects.push(object);
objects.push(cssobject);
//
object = new THREE.Object3D();
var object = new THREE.Object3D();
object.position.x = (<number>table[i + 3] * 140) - 1330;
object.position.y = - (<number>table[i + 4] * 180) + 990;
@@ -247,6 +247,7 @@
}
//
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
@@ -288,7 +289,7 @@
}, false);
transform(targets.table, 5000);
transform(targets.table, 2000);
//
@@ -316,6 +317,7 @@
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
threejs/tests/css3d/css3d_sprites.ts
+5 -5
View File
@@ -27,16 +27,16 @@
scene = new THREE.Scene();
var image = document.createElement( 'img' );
image.addEventListener( 'load', function ( event ) {
var image = document.createElement('img');
image.addEventListener('load', function (event) {
for ( var i = 0; i < particlesTotal; i ++ ) {
for (var i = 0; i < particlesTotal; i++) {
var object = new THREE.CSS3DSprite( image.cloneNode() );
var object = new THREE.CSS3DSprite(image.cloneNode());
object.position.x = Math.random() * 4000 - 2000,
object.position.y = Math.random() * 4000 - 2000,
object.position.z = Math.random() * 4000 - 2000
scene.add(object);
scene.add(object);
objects.push(object);
threejs/tests/math/test_unit_math.ts
+78 -5
View File
@@ -779,6 +779,20 @@
return true;
};
var eulerEquals = function (a, b, tolerance?: any) {
tolerance = tolerance || 0.0001;
var diff = Math.abs(a.x - b.x) + Math.abs(a.y - b.y) + Math.abs(a.z - b.z);
return (diff < tolerance);
};
var quatEquals = function (a, b, tolerance?: any) {
tolerance = tolerance || 0.0001;
var diff = Math.abs(a.x - b.x) + Math.abs(a.y - b.y) + Math.abs(a.z - b.z) + Math.abs(a.w - b.w);
return (diff < tolerance);
};
test( "constructor/equals", function() {
var a = new THREE.Euler();
ok( a.equals( eulerZero ), "Passed!" );
@@ -799,13 +813,23 @@
});
test( "set", function() {
test("set/setFromVector3/toVector3", function () {
var a = new THREE.Euler();
a.set( 0, 1, 0, "ZYX" );
ok( a.equals( eulerAzyx ), "Passed!" );
ok( ! a.equals( eulerAxyz ), "Passed!" );
ok( ! a.equals( eulerZero ), "Passed!" );
ok(!a.equals(eulerZero), "Passed!");
var vec = new THREE.Vector3(0, 1, 0);
var b = new THREE.Euler().setFromVector3(vec, "ZYX");
console.log(a, b);
ok(a.equals(b), "Passed!");
var c = b.toVector3();
console.log(c, vec);
ok(c.equals(vec), "Passed!");
});
test( "Quaternion.setFromEuler/Euler.fromQuaternion", function() {
@@ -816,7 +840,7 @@
var v2 = new THREE.Euler().setFromQuaternion( q, v.order );
var q2 = new THREE.Quaternion().setFromEuler( v2 );
ok( q.equals( q2 ), "Passed!" );
ok(eulerEquals(q, q2), "Passed!");
}
});
@@ -841,14 +865,33 @@
v.reorder( 'YZX' );
var q2 = new THREE.Quaternion().setFromEuler( v );
ok( q.equals( q2 ), "Passed!" );
ok(quatEquals(q, q2), "Passed!");
v.reorder( 'ZXY' );
var q3 = new THREE.Quaternion().setFromEuler( v );
ok( q.equals( q3 ), "Passed!" );
ok(quatEquals(q, q3), "Passed!");
}
});
test("gimbalLocalQuat", function () {
// known problematic quaternions
var q1 = new THREE.Quaternion(0.5207769385244341, -0.4783214164122354, 0.520776938524434, 0.47832141641223547);
var q2 = new THREE.Quaternion(0.11284905712620674, 0.6980437630368944, -0.11284905712620674, 0.6980437630368944);
var eulerOrder = "ZYX";
// create Euler directly from a Quaternion
var eViaQ1 = new THREE.Euler().setFromQuaternion(q1, eulerOrder); // there is likely a bug here
// create Euler from Quaternion via an intermediate Matrix4
var mViaQ1 = new THREE.Matrix4().makeRotationFromQuaternion(q1);
var eViaMViaQ1 = new THREE.Euler().setFromRotationMatrix(mViaQ1, eulerOrder);
// the results here are different
ok(eulerEquals(eViaQ1, eViaMViaQ1), "Passed!"); // this result is correct
});
// -------------------------------------------- Frustum
var unit3 = new THREE.Vector3( 1, 0, 0 );
@@ -1483,6 +1526,36 @@
}
});
test("makeBasis/extractBasis", function () {
var identityBasis = [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1)];
var a = new THREE.Matrix4().makeBasis(identityBasis[0], identityBasis[1], identityBasis[2]);
var identity = new THREE.Matrix4();
ok(matrixEquals4(a, identity), "Passed!");
var testBases = [[new THREE.Vector3(0, 1, 0), new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 0, 1)]];
for (var i = 0; i < testBases.length; i++) {
var testBasis = testBases[i];
var b = new THREE.Matrix4().makeBasis(testBasis[0], testBasis[1], testBasis[2]);
var outBasis = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()];
b.extractBasis(outBasis[0], outBasis[1], outBasis[2]);
// check what goes in, is what comes out.
for (var j = 0; j < outBasis.length; j++) {
console.log(outBasis[j], testBasis[j]);
ok(outBasis[j].equals(testBasis[j]), "Passed!");
}
// get the basis out the hard war
for (var j = 0; j < identityBasis.length; j++) {
outBasis[j].copy(identityBasis[j]);
outBasis[j].applyMatrix4(b);
}
// did the multiply method of basis extraction work?
for (var j = 0; j < outBasis.length; j++) {
ok(outBasis[j].equals(testBasis[j]), "Passed!");
}
}
});
test( "transpose", function() {
var a = new THREE.Matrix4();
var b = a.clone().transpose();
threejs/tests/three-tests-setup.ts
+1
View File
@@ -3,6 +3,7 @@
//////////////////////////////////////////////////////////////
/// <reference path="../../stats/stats.d.ts" />
/// <reference path="../../dat-gui/dat-gui.d.ts" />
/// <reference path="../detector.d.ts" />
/// <reference path="../three-canvasrenderer.d.ts" />
/// <reference path="../three-css3drenderer.d.ts" />
threejs/tests/webgl/webgl_animation_cloth.ts
+7 -14
View File
@@ -86,8 +86,8 @@
light.castShadow = true;
//light.shadowCameraVisible = true;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
var d = 300;
@@ -101,11 +101,6 @@
scene.add(light);
light = new THREE.DirectionalLight(0x3dff0c, 0.35);
light.position.set(0, -1, 0);
scene.add(light);
// cloth material
var clothTexture = THREE.ImageUtils.loadTexture('textures/patterns/circuit_pattern.png');
@@ -151,17 +146,14 @@
// ground
var initColor = new THREE.Color(0x497f13);
var initTexture = THREE.ImageUtils.generateDataTexture(1, 1, initColor);
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: initTexture });
var groundTexture = THREE.ImageUtils.loadTexture("textures/terrain/grasslight-big.jpg", undefined, function () { groundMaterial.map = groundTexture });
var groundTexture = THREE.ImageUtils.loadTexture("textures/terrain/grasslight-big.jpg");
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(25, 25);
groundTexture.anisotropy = 16;
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20000, 20000), groundMaterial);
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture });
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial);
mesh.position.y = -250;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
@@ -211,6 +203,7 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color);
threejs/tests/webgl/webgl_animation_skinning_morph.ts
+71 -74
View File
@@ -5,16 +5,13 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material: THREE.SpriteMaterial;
var geometry: THREE.Geometry;
var dat:any;
// -------
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container,stats;
var container, stats;
var camera, scene;
var renderer;
@@ -28,56 +25,56 @@
var clock = new THREE.Clock();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
animate();
function init() {
container = document.getElementById( 'container' );
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.z = 2200;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
scene.fog = new THREE.Fog(0xffffff, 2000, 10000);
scene.add( camera );
scene.add(camera);
// GROUND
var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );
var geometry = new THREE.PlaneBufferGeometry(16000, 16000);
var material = new THREE.MeshPhongMaterial({ emissive: 0xbbbbbb });
var ground = new THREE.Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );
var ground = new THREE.Mesh(geometry, material);
ground.position.set(0, FLOOR, 0);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
ground.receiveShadow = true;
// LIGHTS
var ambient = new THREE.AmbientLight( 0x222222 );
scene.add( ambient );
var ambient = new THREE.AmbientLight(0x222222);
scene.add(ambient);
var light = new THREE.DirectionalLight( 0xebf3ff, 1.6 );
light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
scene.add( light );
var light = new THREE.DirectionalLight(0xebf3ff, 1.6);
light.position.set(0, 140, 500).multiplyScalar(1.1);
scene.add(light);
light.castShadow = true;
light.shadowMapWidth = 2048;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 2048;
var d = 390;
light.shadowCameraLeft = -d * 2;
light.shadowCameraRight = d * 2;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d * 1.5;
light.shadowCameraBottom = -d;
@@ -86,19 +83,19 @@
//
var light = new THREE.DirectionalLight( 0x497f13, 1 );
light.position.set( 0, -1, 0 );
scene.add( light );
var light = new THREE.DirectionalLight(0x497f13, 1);
light.position.set(0, -1, 0);
scene.add(light);
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.domElement.style.position = "relative";
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
@@ -109,16 +106,16 @@
// STATS
stats = new Stats();
container.appendChild( stats.domElement );
container.appendChild(stats.domElement);
//
var loader = new THREE.JSONLoader();
loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
loader.load("models/skinned/knight.js", function (geometry, materials) {
createScene( geometry, materials, 0, FLOOR, -300, 60 )
createScene(geometry, materials, 0, FLOOR, -300, 60)
} );
});
// GUI
@@ -126,7 +123,7 @@
//
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener('resize', onWindowResize, false);
}
@@ -138,18 +135,18 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(window.innerWidth, window.innerHeight);
}
function ensureLoop( animation ) {
function ensureLoop(animation) {
for ( var i = 0; i < animation.hierarchy.length; i ++ ) {
for (var i = 0; i < animation.hierarchy.length; i++) {
var bone = animation.hierarchy[ i ];
var bone = animation.hierarchy[i];
var first = bone.keys[ 0 ];
var last = bone.keys[ bone.keys.length - 1 ];
var first = bone.keys[0];
var last = bone.keys[bone.keys.length - 1];
last.pos = first.pos;
last.rot = first.rot;
@@ -159,9 +156,9 @@
}
function createScene( geometry, materials, x, y, z, s ) {
function createScene(geometry, materials, x, y, z, s) {
ensureLoop( geometry.animation );
ensureLoop(geometry.animation);
geometry.computeBoundingBox();
var bb = geometry.boundingBox;
@@ -182,16 +179,16 @@
//var bumpMap = THREE.ImageUtils.generateDataTexture( 1, 1, new THREE.Color() );
//var bumpMap = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
for ( var i = 0; i < materials.length; i ++ ) {
for (var i = 0; i < materials.length; i++) {
var m = materials[ i ];
var m = materials[i];
m.skinning = true;
m.morphTargets = true;
m.specular.setHSL( 0, 0, 0.1 );
m.specular.setHSL(0, 0, 0.1);
m.color.setHSL( 0.6, 0, 0.6 );
m.ambient.copy( m.color );
m.color.setHSL(0.6, 0, 0.6);
m.ambient.copy(m.color);
//m.map = map;
//m.envMap = envMap;
@@ -205,20 +202,20 @@
}
mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.position.set( x, y - bb.min.y * s, z );
mesh.scale.set( s, s, s );
scene.add( mesh );
mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh.position.set(x, y - bb.min.y * s, z);
mesh.scale.set(s, s, s);
scene.add(mesh);
mesh.castShadow = true;
mesh.receiveShadow = true;
helper = new THREE.SkeletonHelper( mesh );
helper = new THREE.SkeletonHelper(mesh);
helper.material.linewidth = 3;
helper.visible = false;
scene.add( helper );
scene.add(helper);
var animation = new THREE.Animation( mesh, geometry.animation );
var animation = new THREE.Animation(mesh, geometry.animation);
animation.play();
}
@@ -226,22 +223,22 @@
function initGUI() {
var API = {
'show model' : true,
'show skeleton' : false
'show model': true,
'show skeleton': false
};
var gui = new dat.GUI();
gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
gui.add(API, 'show model').onChange(function () { mesh.visible = API['show model']; });
gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
gui.add(API, 'show skeleton').onChange(function () { helper.visible = API['show skeleton']; });
}
function onDocumentMouseMove( event ) {
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
mouseX = (event.clientX - windowHalfX);
mouseY = (event.clientY - windowHalfY);
}
@@ -249,7 +246,7 @@
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame(animate);
render();
stats.update();
@@ -260,38 +257,38 @@
var delta = 0.75 * clock.getDelta();
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y = THREE.Math.clamp(camera.position.y + (- mouseY - camera.position.y) * .05, 0, 1000);
camera.lookAt( scene.position );
camera.lookAt(scene.position);
// update skinning
THREE.AnimationHandler.update( delta );
THREE.AnimationHandler.update(delta);
if ( helper !== undefined ) helper.update();
if (helper !== undefined) helper.update();
// update morphs
if ( mesh ) {
if (mesh) {
var time = Date.now() * 0.001;
// mouth
mesh.morphTargetInfluences[ 1 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
mesh.morphTargetInfluences[1] = (1 + Math.sin(4 * time)) / 2;
// frown ?
mesh.morphTargetInfluences[ 2 ] = ( 1 + Math.sin( 2 * time ) ) / 2;
mesh.morphTargetInfluences[2] = (1 + Math.sin(2 * time)) / 2;
// eyes
mesh.morphTargetInfluences[ 3 ] = ( 1 + Math.cos( 4 * time ) ) / 2;
mesh.morphTargetInfluences[3] = (1 + Math.cos(4 * time)) / 2;
}
renderer.render( scene, camera );
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_buffergeometry.ts
+10 -9
View File
@@ -56,7 +56,7 @@
var chunkSize = 21845;
var indices = new Uint16Array( triangles * 3 );
var indices = new Uint16Array(triangles * 3);
for (var i = 0; i < indices.length; i++) {
@@ -64,9 +64,9 @@
}
var positions = new Float32Array( triangles * 3 * 3 );
var normals = new Float32Array( triangles * 3 * 3 );
var colors = new Float32Array( triangles * 3 * 3 );
var positions = new Float32Array(triangles * 3 * 3);
var normals = new Float32Array(triangles * 3 * 3);
var colors = new Float32Array(triangles * 3 * 3);
var color = new THREE.Color();
@@ -162,10 +162,10 @@
}
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
var offsets = triangles / chunkSize;
@@ -194,7 +194,8 @@
//
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setClearColor(scene.fog.color, 1);
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaInput = true;
threejs/tests/webgl/webgl_camera.ts
+6 -1
View File
@@ -17,6 +17,7 @@
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
@@ -85,13 +86,14 @@
}
var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) );
var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({ color: 0x888888 }));
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.domElement.style.position = "relative";
container.appendChild(renderer.domElement);
@@ -168,6 +170,7 @@
}
function render() {
var r = Date.now() * 0.0005;
@@ -191,6 +194,7 @@
cameraOrthoHelper.visible = false;
} else {
cameraOrtho.far = mesh.position.length();
cameraOrtho.updateProjectionMatrix();
@@ -214,5 +218,6 @@
renderer.setViewport(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_custom_attributes.ts
+3 -2
View File
@@ -35,7 +35,7 @@
amplitude: { type: "f", value: 1.0 },
color: { type: "c", value: new THREE.Color(0xff2200) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/water.jpg") }
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/water.jpg") },
};
@@ -70,7 +70,8 @@
scene.add(sphere);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x050505, 1);
renderer.setClearColor(0x050505);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(WIDTH, HEIGHT);
var container = document.getElementById('container');
threejs/tests/webgl/webgl_geometries.ts
+1
View File
@@ -110,6 +110,7 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_helpers.ts
+1
View File
@@ -13,6 +13,7 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_interactive_cubes.ts
+6 -11
View File
@@ -5,7 +5,7 @@
() => {
var container, stats;
var camera, scene, projector, raycaster, renderer;
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 100, theta = 0;
@@ -30,14 +30,10 @@
scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff, 2);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(-1, -1, -1).normalize();
scene.add(light);
var geometry = new THREE.BoxGeometry(20, 20, 20);
for (var i = 0; i < 2000; i++) {
@@ -60,11 +56,11 @@
}
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
@@ -120,12 +116,11 @@
camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
camera.lookAt(scene.position);
camera.updateMatrixWorld();
// find intersections
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
projector.unprojectVector(vector, camera);
raycaster.set(camera.position, vector.sub(camera.position).normalize());
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts
+111 -118
View File
@@ -6,61 +6,59 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material: THREE.SpriteMaterial;
var intersection: THREE.Intersection;
var container: HTMLElement;
var pcBuffer: THREE.PointCloud;
var v: any;
// -------
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
if (!Detector.webgl) Detector.addGetWebGLMessage();
var renderer, scene, camera, stats;
var pointclouds;
var projector, raycaster, intersects;
var mouse = { x: 1, y: 1 };
var vector = new THREE.Vector3();
intersection = null;
var raycaster, intersects;
var mouse = new THREE.Vector2();
var intersection = null;
var spheres = [];
var spheresIndex = 0;
var clock;
var threshold = 0.1;
var pointSize = 0.01;
var pointSize = 0.05;
var width = 150;
var length = 150;
var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
var rotateY = new THREE.Matrix4().makeRotationY(0.005);
init();
animate();
function generatePointCloudGeometry( color, width, length ){
function generatePointCloudGeometry(color, width, length) {
var geometry = new THREE.BufferGeometry();
var numPoints = width*length;
var numPoints = width * length;
var positions = new Float32Array( numPoints*3 );
var colors = new Float32Array( numPoints*3 );
var positions = new Float32Array(numPoints * 3);
var colors = new Float32Array(numPoints * 3);
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
var u = i / width;
var v = j / length;
var x = u - 0.5;
var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
var y = (Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8)) / 20;
var z = v - 0.5;
positions[ 3 * k ] = x;
positions[ 3 * k + 1 ] = y;
positions[ 3 * k + 2 ] = z;
positions[3 * k] = x;
positions[3 * k + 1] = y;
positions[3 * k + 2] = z;
var intensity = ( y + 0.1 ) * 5;
colors[ 3 * k ] = color.r * intensity;
colors[ 3 * k + 1 ] = color.g * intensity;
colors[ 3 * k + 2 ] = color.b * intensity;
var intensity = (y + 0.1) * 5;
colors[3 * k] = color.r * intensity;
colors[3 * k + 1] = color.g * intensity;
colors[3 * k + 2] = color.b * intensity;
k++;
@@ -68,85 +66,85 @@
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeBoundingBox();
return geometry;
}
function generatePointcloud( color, width, length ) {
function generatePointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
var geometry = generatePointCloudGeometry(color, width, length);
var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
var pointcloud = new THREE.PointCloud( geometry, material );
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateIndexedPointcloud( color, width, length ) {
function generateIndexedPointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array( numPoints );
var indices = new Uint16Array(numPoints);
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
indices[ k ] = k;
indices[k] = k;
k++;
}
}
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
var pointcloud = new THREE.PointCloud( geometry, material );
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateIndexedWithOffsetPointcloud( color, width, length ){
function generateIndexedWithOffsetPointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array( numPoints );
var indices = new Uint16Array(numPoints);
var k = 0;
for( var i = 0; i < width; i++ ){
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
indices[ k ] = k;
indices[k] = k;
k++;
}
}
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
var offset = { start: 0, count: indices.length, index: 0 };
geometry.offsets.push( offset );
geometry.offsets.push(offset);
var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
var pointcloud = new THREE.PointCloud( geometry, material );
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateRegularPointcloud( color, width, length ) {
function generateRegularPointcloud(color, width, length) {
var geometry = new THREE.Geometry();
var numPoints = width * length;
@@ -155,24 +153,24 @@
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
var u = i / width;
v = j / length;
var v = j / length;
var x = u - 0.5;
var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8) ) / 20;
var y = (Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8)) / 20;
var z = v - 0.5;
v = new THREE.Vector3( x,y,z );
var vec = new THREE.Vector3(x, y, z);
var intensity = ( y + 0.1 ) * 7;
colors[ 3 * k ] = color.r * intensity;
colors[ 3 * k + 1 ] = color.g * intensity;
colors[ 3 * k + 2 ] = color.b * intensity;
var intensity = (y + 0.1) * 7;
colors[3 * k] = color.r * intensity;
colors[3 * k + 1] = color.g * intensity;
colors[3 * k + 2] = color.b * intensity;
geometry.vertices.push( v );
colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
geometry.vertices.push(vec);
colors[k] = (color.clone().multiplyScalar(intensity));
k++;
@@ -183,8 +181,8 @@
geometry.colors = colors;
geometry.computeBoundingBox();
var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
var pointcloud = new THREE.PointCloud( geometry, material );
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
@@ -192,63 +190,62 @@
function init() {
container = document.getElementById( 'container' );
container = document.getElementById('container');
scene = new THREE.Scene();
clock = new THREE.Clock();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.applyMatrix( new THREE.Matrix4().makeTranslation( 0,0,20 ) );
camera.applyMatrix( new THREE.Matrix4().makeRotationX( -0.5 ) );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 20));
camera.applyMatrix(new THREE.Matrix4().makeRotationX(-0.5));
//
pcBuffer = generatePointcloud( new THREE.Color( 1,0,0 ), width, length );
pcBuffer.scale.set( 10,10,10 );
pcBuffer.position.set( -5,0,5 );
scene.add( pcBuffer );
pcBuffer = generatePointcloud(new THREE.Color(1, 0, 0), width, length);
pcBuffer.scale.set(10, 10, 10);
pcBuffer.position.set(-5, 0, 5);
scene.add(pcBuffer);
var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0,1,0 ), width, length );
pcIndexed.scale.set( 10,10,10 );
pcIndexed.position.set( 5,0,5 );
scene.add( pcIndexed );
var pcIndexed = generateIndexedPointcloud(new THREE.Color(0, 1, 0), width, length);
pcIndexed.scale.set(10, 10, 10);
pcIndexed.position.set(5, 0, 5);
scene.add(pcIndexed);
var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0,1,1 ), width, length );
pcIndexedOffset.scale.set( 10,10,10 );
pcIndexedOffset.position.set( 5,0,-5 );
scene.add( pcIndexedOffset );
var pcIndexedOffset = generateIndexedWithOffsetPointcloud(new THREE.Color(0, 1, 1), width, length);
pcIndexedOffset.scale.set(10, 10, 10);
pcIndexedOffset.position.set(5, 0, -5);
scene.add(pcIndexedOffset);
var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
pcRegular.scale.set( 10,10,10 );
pcRegular.position.set( -5,0,-5 );
scene.add( pcRegular );
var pcRegular = generateRegularPointcloud(new THREE.Color(1, 0, 1), width, length);
pcRegular.scale.set(10, 10, 10);
pcRegular.position.set(-5, 0, -5);
scene.add(pcRegular);
pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset, pcRegular ];
pointclouds = [pcBuffer, pcIndexed, pcIndexedOffset, pcRegular];
//
var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
var sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, shading: THREE.FlatShading });
for ( var i = 0; i < 40; i++ ) {
for (var i = 0; i < 40; i++) {
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
scene.add( sphere );
spheres.push( sphere );
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
spheres.push(sphere);
}
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = threshold;
@@ -257,21 +254,21 @@
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.appendChild(stats.domElement);
//
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove( event ) {
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
@@ -280,13 +277,13 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame(animate);
render();
stats.update();
@@ -297,39 +294,35 @@
function render() {
camera.applyMatrix( rotateY );
camera.updateMatrixWorld( true );
camera.applyMatrix(rotateY);
camera.updateMatrixWorld();
vector.set( mouse.x, mouse.y, 0.1 );
raycaster.setFromCamera(mouse, camera);
projector.unprojectVector( vector, camera );
var intersections = raycaster.intersectObjects(pointclouds);
intersection = (intersections.length) > 0 ? intersections[0] : null;
raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
if (toggle > 0.02 && intersection !== null) {
var intersections = raycaster.intersectObjects( pointclouds );
intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
if ( toggle > 0.02 && intersection !== null) {
spheres[ spheresIndex ].position.copy( intersection.point );
spheres[ spheresIndex ].scale.set( 1, 1, 1 );
spheresIndex = ( spheresIndex + 1 ) % spheres.length;
spheres[spheresIndex].position.copy(intersection.point);
spheres[spheresIndex].scale.set(1, 1, 1);
spheresIndex = (spheresIndex + 1) % spheres.length;
toggle = 0;
}
for ( var i = 0; i < spheres.length; i++ ) {
for (var i = 0; i < spheres.length; i++) {
var sphere = spheres[ i ];
sphere.scale.multiplyScalar( 0.98 );
sphere.scale.clampScalar( 0.01, 1 );
var sphere = spheres[i];
sphere.scale.multiplyScalar(0.98);
sphere.scale.clampScalar(0.01, 1);
}
toggle += clock.getDelta();
renderer.render( scene, camera );
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_lensflares.ts
+3 -3
View File
@@ -116,7 +116,7 @@
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
lensFlare.customUpdateCallback = lensFlareUpdateCallback;
lensFlare.position.copy( light.position );
lensFlare.position.copy(light.position);
scene.add(lensFlare);
@@ -125,9 +125,9 @@
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color, 1);
container.appendChild(renderer.domElement);
//
threejs/tests/webgl/webgl_lights_heimsphere.ts
+3 -3
View File
@@ -79,7 +79,7 @@
// GROUND
var groundGeo = new THREE.PlaneGeometry(10000, 10000);
var groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
var groundMat = new THREE.MeshPhongMaterial({ ambient: 0xffffff, color: 0xffffff, specular: 0x050505 });
groundMat.color.setHSL(0.095, 1, 0.75);
@@ -140,11 +140,11 @@
// RENDERER
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.setClearColor(scene.fog.color, 1);
renderer.gammaInput = true;
renderer.gammaOutput = true;
threejs/tests/webgl/webgl_lines_colors.ts
+2 -1
View File
@@ -6,7 +6,7 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var hilbert3D: any;
var stats: any;
var stats: Stats;
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
@@ -36,6 +36,7 @@
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
threejs/tests/webgl/webgl_loader_awd.ts
+1 -1
View File
@@ -72,8 +72,8 @@
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
threejs/tests/webgl/webgl_materials.ts
+6 -3
View File
@@ -5,10 +5,10 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var geometry: THREE.Geometry;
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
@@ -85,11 +85,14 @@
}
// isn't used.
// geometry_pieces.materials = materials;
materials.push(new THREE.MeshFaceMaterial(materials));
objects = [];
var sphere, material;
var sphere, geometry: THREE.Geometry, material;
for (var i = 0, l = materials.length; i < l; i++) {
@@ -136,8 +139,8 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
threejs/tests/webgl/webgl_morphtargets.ts
+5 -5
View File
@@ -24,7 +24,6 @@
animate();
function init() {
var light: THREE.Light;
container = document.createElement('div');
document.body.appendChild(container);
@@ -35,12 +34,12 @@
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 15000);
light = new THREE.PointLight(0xff2200);
var light = new THREE.PointLight(0xff2200);
light.position.set(100, 100, 100);
scene.add(light);
light = new THREE.AmbientLight(0x111111);
scene.add(light);
var amblight = new THREE.AmbientLight(0x111111);
scene.add(amblight);
var geometry = new THREE.BoxGeometry(100, 100, 100);
@@ -77,7 +76,8 @@
//
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x222222, 1);
renderer.setClearColor(0x222222);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_particles_billboards.ts
+3 -3
View File
@@ -42,16 +42,16 @@
}
material = new THREE.PointCloudMaterial({ size: 35, sizeAttenuation: false, map: sprite, transparent: true });
material = new THREE.PointCloudMaterial({ size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true });
material.color.setHSL(1.0, 0.3, 0.7);
particles = new THREE.PointCloud(geometry, material);
particles.sortParticles = true;
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ clearAlpha: 1 });
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_postprocessing.ts
+1
View File
@@ -13,6 +13,7 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_shader.ts
+5 -4
View File
@@ -24,7 +24,7 @@
scene = new THREE.Scene();
var geometry = new THREE.PlaneGeometry(2, 2);
var geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
time: { type: "f", value: 1.0 },
@@ -43,6 +43,7 @@
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
stats = new Stats();
@@ -58,11 +59,11 @@
function onWindowResize() {
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.resolution.value.x = renderer.domElement.width;
uniforms.resolution.value.y = renderer.domElement.height;
}
//
threejs/tests/webgl/webgl_sprites.ts
+2 -1
View File
@@ -45,7 +45,7 @@
var mapB = THREE.ImageUtils.loadTexture("textures/sprite1.png");
mapC = THREE.ImageUtils.loadTexture("textures/sprite2.png");
group = new THREE.Object3D();
group = new THREE.Group();
var materialC = new THREE.SpriteMaterial({ map: mapC, color: 0xffffff, fog: true });
var materialB = new THREE.SpriteMaterial({ map: mapB, color: 0xffffff, fog: true });
@@ -84,6 +84,7 @@
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false; // To allow render overlay on top of sprited sphere
threejs/three-canvasrenderer.d.ts
Vendored
+2 -1
View File
@@ -29,7 +29,6 @@ declare module THREE {
constructor(parameters?: CanvasRendererParameters);
domElement: HTMLCanvasElement;
devicePixelRatio: number;
autoClear: boolean;
sortObjects: boolean;
sortElements: boolean;
@@ -37,6 +36,8 @@ declare module THREE {
supportsVertexTextures(): void;
setFaceCulling(): void;
getPixelRatio(): number;
setPixelRatio(value: number): void;
setSize(width: number, height: number, updateStyle?: boolean): void;
setViewport(x: number, y: number, width: number, height: number): void;
setScissor(): void;
threejs/three-orbitcontrols.d.ts
Vendored
+12 -2
View File
@@ -37,7 +37,17 @@ declare module THREE {
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; };
update():void;
rotateLeft(angle?: number): void;
rotateUp(angle?: number): void;
panLeft(distance?: number): void;
panUp(distance?: number): void;
pan( deltaX: number, deltaY: number): void;
dollyIn(dollyScale: number): void;
dollyOut(dollyScale: number): void;
update(): void;
reset(): void;
getPolarAngle() : number;
getAzimuthalAngle(): number;
// EventDispatcher mixins
addEventListener(type: string, listener: (event: any) => void ): void;
@@ -45,4 +55,4 @@ declare module THREE {
removeEventListener(type: string, listener: (event: any) => void): void;
dispatchEvent(event: { type: string; target: any; }): void;
}
}
}
threejs/three.d.ts
Vendored
+80 -40
View File
@@ -1,4 +1,4 @@
// Type definitions for three.js r69
// Type definitions for three.js r70
// Project: http://mrdoob.github.com/three.js/
// Definitions by: Kon <http://phyzkit.net/>, Satoru Kimura <https://github.com/gyohk>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -98,14 +98,12 @@ declare module THREE {
// Mapping modes
export enum Mapping { }
export interface MappingConstructor {
new (): Mapping;
}
export var UVMapping: MappingConstructor;
export var CubeReflectionMapping: MappingConstructor;
export var CubeRefractionMapping: MappingConstructor;
export var SphericalReflectionMapping: MappingConstructor;
export var SphericalRefractionMapping: MappingConstructor;
export var UVMapping: Mapping;
export var CubeReflectionMapping: Mapping;
export var CubeRefractionMapping: Mapping;
export var EquirectangularReflectionMapping: Mapping;
export var EquirectangularRefractionMapping: Mapping;
export var SphericalReflectionMapping: Mapping;
// Wrapping modes
export enum Wrapping { }
@@ -145,6 +143,7 @@ declare module THREE {
export var RGBAFormat: PixelFormat;
export var LuminanceFormat: PixelFormat;
export var LuminanceAlphaFormat: PixelFormat;
export var RGBEFormat: PixelFormat;
// Compressed texture formats
// DDS / ST3C Compressed texture formats
@@ -490,7 +489,7 @@ declare module THREE {
computeTangents(): void;
computeOffsets(indexBufferSize: number): void;
merge(): void;
merge(geometry: BufferGeometry, offset: number): BufferGeometry;
normalizeNormals(): void;
reorderBuffers(indexBuffer: number, indexMap: number[], vertexCount: number): void;
toJSON(): any;
@@ -929,6 +928,8 @@ declare module THREE {
merge( geometry: Geometry, matrix: Matrix, materialIndexOffset: number): void;
mergeMesh( mesh: Mesh ): void;
/**
* Checks for duplicate vertices using hashmap.
* Duplicated vertices are removed and faces' vertices are updated.
@@ -1019,11 +1020,6 @@ declare module THREE {
*/
scale: Vector3;
/**
* Override depth-sorting order if non null.
*/
renderDepth: number;
/**
* When this is set, then the rotationMatrix gets calculated every frame.
*/
@@ -1196,6 +1192,7 @@ declare module THREE {
*/
remove(object: Object3D): void;
/* deprecated */
getChildByName( name: string, recursive?: boolean ): Object3D;
/**
@@ -1212,6 +1209,8 @@ declare module THREE {
*/
getObjectByName(name: string, recursive?: boolean): Object3D;
getObjectByProperty( name: string, value: string, recursive?: boolean ): Object3D;
getWorldPosition(optionalTarget: Vector3): Vector3;
getWorldQuaternion(optionalTarget: Quaternion): Quaternion;
getWorldRotation(optionalTarget: Euler): Euler;
@@ -1227,6 +1226,8 @@ declare module THREE {
traverseVisible(callback: (object: Object3D) => any): void;
traverseAncestors(callback: (object: Object3D) => any): void;
/**
* Updates local transform.
*/
@@ -1279,6 +1280,7 @@ declare module THREE {
precision: number;
linePrecision: number;
set(origin: Vector3, direction: Vector3): void;
setFromCamera(coords: { x: number; y: number;}, camera: Camera ): void;
intersectObject(object: Object3D, recursive?: boolean): Intersection[];
intersectObjects(objects: Object3D[], recursive?: boolean): Intersection[];
}
@@ -1685,6 +1687,8 @@ declare module THREE {
*/
statusDomElement: HTMLElement;
imageLoader: ImageLoader;
/**
* Will be called when load starts.
* The default is a function with empty body.
@@ -1724,10 +1728,17 @@ declare module THREE {
add(regex:string, loader:Loader):void;
get(file: string):Loader;
}
export class BinaryTextureLoader {
constructor();
load(url: string, onLoad: (dataTexture: DataTexture) => void, onProgress?: (event: any) => void, onError?: (event: any) => void): void;
}
export class BufferGeometryLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
load(url: string, onLoad: (bufferGeometry: BufferGeometry) => void, onProgress?: (event: any) => void, onError?: (event: any) => void): void;
setCrossOrigin(crossOrigin: string): void;
parse(json: any): BufferGeometry;
@@ -1750,6 +1761,10 @@ declare module THREE {
load(url: string, onLoad: (bufferGeometry: BufferGeometry) => void, onError?: (event: any) => void): void;
}
export class DataTextureLoader extends BinaryTextureLoader {
// alias for BinaryTextureLoader.
}
/*
* GeometryLoader class is experimental, and it is not yet included in the compiled source code.
*
@@ -1765,6 +1780,8 @@ declare module THREE {
export class ImageLoader {
constructor(manager?: LoadingManager);
cache: Cache;
manager: LoadingManager;
crossOrigin: string;
/**
@@ -1828,6 +1845,8 @@ declare module THREE {
export class MaterialLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
load(url: string, onLoad: (material: Material) => void): void;
setCrossOrigin(crossOrigin: string): void;
parse(json: any): Material;
@@ -1836,6 +1855,9 @@ declare module THREE {
export class ObjectLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
crossOrigin: string;
load(url: string, onLoad: (object: Object3D) => void): void;
setCrossOrigin(crossOrigin: string): void;
parse<T extends Object3D>(json: any): T;
@@ -1850,7 +1872,10 @@ declare module THREE {
*/
export class TextureLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
crossOrigin: string;
/**
* Begin loading from url
*
@@ -1863,6 +1888,8 @@ declare module THREE {
export class XHRLoader {
constructor(manager?: LoadingManager);
cache: Cache;
manager: LoadingManager;
responseType: string;
crossOrigin: string;
@@ -2718,12 +2745,14 @@ declare module THREE {
set(x: number, y: number, z: number, order?: string): Euler;
copy(euler: Euler): Euler;
setFromRotationMatrix(m: Matrix4, order?: string): Euler;
setFromRotationMatrix(m: Matrix4, order?: string, update?: boolean): Euler;
setFromQuaternion(q:Quaternion, order?: string, update?: boolean): Euler;
setFromVector3( v: Vector3, order?: string ): Euler;
reorder(newOrder: string): Euler;
equals(euler: Euler): boolean;
fromArray(xyzo: any[]): Euler;
toArray(): any[];
toVector3(optionalResult?: Vector3): Vector3;
onChange: () => void;
clone(): Euler;
@@ -2970,6 +2999,9 @@ declare module THREE {
copy(m: Matrix4): Matrix4;
copyPosition(m: Matrix4): Matrix4;
extractBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4;
makeBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4;
/**
* Copies the rotation component of the supplied matrix m into this matrix rotation component.
*/
@@ -3611,6 +3643,9 @@ declare module THREE {
fromArray(xy: number[], offset?: number): Vector2;
toArray(xy?: number[], offset?: number): number[];
fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector2;
/**
* Clones this vector.
*/
@@ -3792,6 +3827,8 @@ declare module THREE {
toArray(xyz?: number[], offset?: number): number[];
fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector3;
/**
* Clones this vector.
*/
@@ -3941,6 +3978,8 @@ declare module THREE {
toArray(xyzw?: number[], offset?: number): number[];
fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector4;
/**
* Clones this vector.
*/
@@ -3995,8 +4034,8 @@ declare module THREE {
constructor(geometry?: BufferGeometry, material?: LineBasicMaterial, mode?: number);
constructor(geometry?: BufferGeometry, material?: ShaderMaterial, mode?: number);
geometry: Geometry;
material: LineBasicMaterial;
geometry: any; // Geometry or BufferGeometry;
material: Material; // LineDashedMaterial or LineBasicMaterial or ShaderMaterial
mode: LineMode;
raycast(raycaster: Raycaster, intersects: any): void;
@@ -4089,7 +4128,6 @@ declare module THREE {
* An instance of Material, defining the object's appearance. Default is a ParticleBasicMaterial with randomised colour.
*/
material: Material;
sortParticles: boolean;
raycast(raycaster: Raycaster, intersects: any): void;
clone(object?: PointCloud): PointCloud;
@@ -4228,8 +4266,6 @@ declare module THREE {
//context:WebGLRenderingContext;
context: any;
devicePixelRatio: number;
/**
* Defines whether the renderer should automatically clear its output before rendering.
*/
@@ -4330,6 +4366,8 @@ declare module THREE {
*/
getContext(): WebGLRenderingContext;
forceContextLoss(): void;
/**
* Return a Boolean true if the context supports vertex textures.
*/
@@ -4341,6 +4379,8 @@ declare module THREE {
supportsBlendMinMax(): boolean;
getMaxAnisotropy(): number;
getPrecision(): string;
getPixelRatio(): number;
setPixelRatio(value: number): void;
/**
* Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).
@@ -4369,6 +4409,8 @@ declare module THREE {
setClearColor(color: string, alpha?: number): void;
setClearColor(color: number, alpha?: number): void;
setClearAlpha(alpha: number): void;
/**
* Sets the clear color, using hex for the color and alpha for the opacity.
*
@@ -4801,18 +4843,7 @@ declare module THREE {
);
constructor(
image: HTMLImageElement,
mapping?: MappingConstructor,
wrapS?: Wrapping,
wrapT?: Wrapping,
magFilter?: TextureFilter,
minFilter?: TextureFilter,
format?: PixelFormat,
type?: TextureDataType,
anisotropy?: number
);
constructor(
image: HTMLCanvasElement,
mapping?: MappingConstructor,
mapping?: Mapping,
wrapS?: Wrapping,
wrapT?: Wrapping,
magFilter?: TextureFilter,
@@ -4860,7 +4891,7 @@ declare module THREE {
class VideoTexture extends Texture {
constructor(
video: HTMLVideoElement,
mapping?: MappingConstructor,
mapping?: Mapping,
wrapS?: Wrapping,
wrapT?: Wrapping,
magFilter?: TextureFilter,
@@ -4979,7 +5010,7 @@ declare module THREE {
animations: any[];
init(data: AnimationData): void;
init(data: AnimationData): AnimationData;
parse(root: Mesh): Object3D[];
play(animation: Animation): void;
stop(animation: Animation): void;
@@ -5013,6 +5044,8 @@ declare module THREE {
currentTime: number;
duration: number;
loop: boolean;
lastFrame: number;
currentFrame: number;
isPlaying: boolean;
play(): void;
@@ -5343,7 +5376,7 @@ declare module THREE {
* @param heightSegments — Number of rows of faces along the height of the cylinder.
* @param openEnded - A Boolean indicating whether or not to cap the ends of the cylinder.
*/
constructor(radiusTop?: number, radiusBottom?: number, height?: number, radiusSegments?: number, heightSegments?: number, openEnded?: boolean);
constructor(radiusTop?: number, radiusBottom?: number, height?: number, radiusSegments?: number, heightSegments?: number, openEnded?: boolean, thetaStart?: number, thetaLength?: number);
parameters: {
radiusTop: number;
@@ -5352,6 +5385,8 @@ declare module THREE {
radialSegments: number;
heightSegments: number;
openEnded: boolean;
thetaStart: number;
thetaLength: number;
};
}
@@ -5534,9 +5569,10 @@ declare module THREE {
heightScale: number;
};
}
export class TubeGeometry extends Geometry {
constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: boolean);
constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: boolean, taper?: (u: number) => number);
parameters: {
path: Path;
@@ -5544,12 +5580,16 @@ declare module THREE {
radius: number;
radialSegments: number;
closed: boolean;
taper: (u: number) => number; // NoTaper or SinusoidalTaper;
};
tangents: Vector3[];
normals: Vector3[];
binormals: Vector3[];
FrenetFrames(path: Path, segments: number, closed: boolean): void;
static NoTaper(u?: number): number;
static SinusoidalTaper(u: number): number;
static FrenetFrames(path: Path, segments: number, closed: boolean): void;
}
// Extras / Helpers /////////////////////////////////////////////////////////////////////