vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove types

Browse Source
This commit is contained in:
Nathan Bierema 2019-03-27 21:53:18 -04:00
parent ca77853b96
commit c1a48d7730
91 changed files with 36 additions and 18876 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
notNeededPackages.json
View File

@ -2202,6 +2202,12 @@
"sourceRepoURL": "https://github.com/terser-js/terser",
"asOfVersion": "3.12.0"
},
{
"libraryName": "three.js",
"typingsPackageName": "three",
"sourceRepoURL": "https://github.com/mrdoob/three.js",
"asOfVersion": "0.103.0"
},
{
"libraryName": "time-span",
"typingsPackageName": "time-span",

1
types/aframe/index.d.ts vendored
View File

@ -235,7 +235,6 @@ export interface Scene extends Entity {
behaviors: Behavior[];
camera: THREE.Camera;
canvas: HTMLCanvasElement;
effect: THREE.VREffect;
isMobile: boolean;
object3D: THREE.Scene;
renderer: THREE.WebGLRenderer;

6
types/aframe/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"three": "^0.103.0"
}
}

6
types/openjscad/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"three": "^0.103.0"
}
}

6
types/physijs/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"@types/three": "^0.93.28"
}
}

6
types/physijs/test/body.ts
View File

@ -5,11 +5,9 @@ Physijs.scripts.ammo = 'examples/js/ammo.js';
var initScene, render, applyForce, setMousePosition, mouse_position,
ground_material, box_material,
projector, renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];
renderer, render_stats, physics_stats, scene, ground, light, camera, box, boxes = [];
initScene = function() {
projector = new THREE.Projector;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
@ -135,7 +133,7 @@ setMousePosition = function(evt) {
-((evt.clientY / renderer.dom.clientHeight) * 2 - 1),
.5
);
projector.unprojectVector(vector, camera);
vector.unproject(camera);
vector.sub(camera.position).normalize();
var coefficient = (box.position.y - camera.position.y) / vector.y

4
types/physijs/test/constraints_car.ts
View File

@ -5,12 +5,10 @@ Physijs.scripts.ammo = 'examples/js/ammo.js';
var initScene, render,
ground_material, car_material, wheel_material, wheel_geometry,
projector, renderer, render_stats, physics_stats, scene, ground_geometry, ground, light, camera,
renderer, render_stats, physics_stats, scene, ground_geometry, ground, light, camera,
car: any = {};
initScene = function() {
projector = new THREE.Projector;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;

5
types/physijs/test/jenga.ts
View File

@ -158,7 +158,6 @@ createTower = (function() {
initEventHandling = (function() {
var _vector = new THREE.Vector3,
projector = new THREE.Projector(),
handleMouseDown, handleMouseMove, handleMouseUp;
handleMouseDown = function( evt ) {
@ -170,7 +169,7 @@ initEventHandling = (function() {
1
);
projector.unprojectVector( _vector, camera );
_vector.unproject( camera );
ray = new THREE.Raycaster( camera.position, _vector.sub( camera.position ).normalize() );
intersections = ray.intersectObjects( blocks );
@ -203,7 +202,7 @@ initEventHandling = (function() {
-( evt.clientY / window.innerHeight ) * 2 + 1,
1
);
projector.unprojectVector( _vector, camera );
_vector.unproject( camera );
ray = new THREE.Raycaster( camera.position, _vector.sub( camera.position ).normalize() );
intersection = ray.intersectObject( intersect_plane );

4
types/physijs/test/vehicle.ts
View File

@ -9,12 +9,10 @@ Physijs.scripts.ammo = 'examples/js/ammo.js';
var initScene, render,
ground_material, box_material,
projector, renderer, render_stats, physics_stats, scene, ground, light, camera,
renderer, render_stats, physics_stats, scene, ground, light, camera,
vehicle_body, vehicle;
initScene = function() {
projector = new THREE.Projector;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;

6
types/three-tds-loader/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"three": "^0.103.0"
}
}

8
types/three/detector.d.ts vendored
View File

@ -1,8 +0,0 @@
export var canvas: boolean;
export var webgl: boolean;
export var workers: boolean;
export var fileapi: boolean;
export function getWebGLErrorMessage(): HTMLElement;
export function addGetWebGLMessage(parameters?: {id?: string; parent?: HTMLElement}): void;
export as namespace Detector;

67
types/three/index.d.ts vendored
View File

@ -1,67 +0,0 @@
// Type definitions for three.js 0.93
// Project: https://threejs.org
// Definitions by: Kon <http://phyzkit.net/>,
// Satoru Kimura <https://github.com/gyohk>,
// Florent Poujol <https://github.com/florentpoujol>,
// HouChunlei <https://github.com/omni360>,
// Ivo <https://github.com/ivoisbelongtous>,
// David Asmuth <https://github.com/piranha771>,
// Brandon Roberge,
// Qinsi ZHU <https://github.com/qszhusightp>,
// Toshiya Nakakura <https://github.com/nakakura>,
// Stefan Profanter <https://github.com/Pro>,
// Edmund Fokschaner <https://github.com/efokschaner>,
// Roelof Jooste <https://github.com/PsychoSTS>,
// Apurva Ojas <https://github.com/apurvaojas>,
// Tiger Oakes <https://github.com/NotWoods>,
// Methuselah96 <https://github.com/Methuselah96>
// Dilip Ramirez <https://github.com/Dukuo>
// Julian Strecker <https://github.com/JulianSSS>
// Zhang Hao <https://github.com/devilsparta>
// Konstantin Lukaschenko <https://github.com/KonstantinLukaschenko>
// Daniel Yim <https://github.com/danyim>
// Saransh Kataria <https://github.com/saranshkataria>
// Philippe Suter <https://github.com/psuter>
// Definitions: https://github.com//DefinitelyTyped
// TypeScript Version: 2.8
export * from './three-core';
export * from './three-canvasrenderer';
export * from './three-colladaLoader';
export * from './three-copyshader';
export * from './three-css3drenderer';
export * from './three-ctmloader';
export * from './three-ddsloader';
export * from './three-tdsloader';
export * from './three-dragcontrols';
export * from './three-editorcontrols';
export * from './three-effectcomposer';
export * from './three-examples';
export * from './three-fbxloader';
export * from './three-FirstPersonControls';
export * from './three-gltfexporter';
export * from './three-gltfloader';
export * from './three-lensflare';
export * from './three-mapcontrols';
export * from './three-maskpass';
export * from './three-mtlloader';
export * from './three-objloader';
export * from './three-octree';
export * from './three-orbitcontrols';
export * from './three-orthographictrackballcontrols';
export * from './three-outlinepass';
export * from './three-projector';
export * from './three-renderpass';
export * from './three-shaderpass';
export * from './three-smaapass';
export * from './three-ssaapass';
export * from './three-filmpass';
export * from './three-tgaloader';
export * from './three-trackballcontrols';
export * from './three-transformcontrols';
export * from './three-unrealbloompass';
export * from './three-vrcontrols';
export * from './three-vreffect';
export as namespace THREE;

141
types/three/test/canvas/canvas_camera_orthographic.ts
View File

@ -1,141 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_camera_orthographic.html
() => {
var container: HTMLDivElement, stats: Stats;
var camera: THREE.OrthographicCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - orthographic view';
container.appendChild(info);
camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000);
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
scene = new THREE.Scene();
// Grid
var size = 500, step = 50;
var geometry = new THREE.Geometry();
for (var i = - size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(- size, 0, i));
geometry.vertices.push(new THREE.Vector3(size, 0, i));
geometry.vertices.push(new THREE.Vector3(i, 0, - size));
geometry.vertices.push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 });
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Cubes
var geometry2 = new THREE.BoxGeometry(50, 50, 50);
var material2 = new THREE.MeshLambertMaterial({ color: 0xffffff, overdraw: 0.5 });
for (var i = 0; i < 100; i++) {
var cube = new THREE.Mesh(geometry2, material2);
cube.scale.y = Math.floor(Math.random() * 2 + 1);
cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
scene.add(cube);
}
// Lights
var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 200;
camera.position.z = Math.sin(timer) * 200;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}

184
types/three/test/canvas/canvas_geometry_cube.ts
View File

@ -1,184 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_cube.html
() => {
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer;
var cube: THREE.Mesh, plane: THREE.Mesh;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Cube
var geometry = new THREE.BoxGeometry(200, 200, 200);
for (var i = 0; i < geometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i + 1].color.setHex(hex);
}
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });
cube = new THREE.Mesh(geometry, material);
cube.position.y = 150;
scene.add(cube);
// Plane
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 });
plane = new THREE.Mesh(geometry2, material);
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onDocumentMouseDown(event: MouseEvent) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove(event: MouseEvent) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp(event: MouseEvent) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut(event: MouseEvent) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart(event: TouchEvent) {
if (event.touches.length === 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove(event: TouchEvent) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}
}

161
types/three/test/canvas/canvas_interactive_cubes_tween.ts
View File

@ -1,161 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html
() => {
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer;
var raycaster: THREE.Raycaster;
var mouse: THREE.Vector2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - clickable objects';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = 300;
camera.position.z = 500;
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(100, 100, 100);
for (var i = 0; i < 20; i++) {
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
scene.add(object);
}
//
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();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentTouchStart(event: TouchEvent) {
event.preventDefault();
let usurpedEvent = event as any;
usurpedEvent.clientX = event.touches[0].clientX;
usurpedEvent.clientY = event.touches[0].clientY;
onDocumentMouseDown(usurpedEvent);
}
function onDocumentMouseDown(event: MouseEvent) {
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
new TWEEN.Tween(intersects[0].object.position).to({
x: Math.random() * 800 - 400,
y: Math.random() * 800 - 400,
z: Math.random() * 800 - 400
}, 2000)
.easing(TWEEN.Easing.Elastic.Out).start();
new TWEEN.Tween(intersects[0].object.rotation).to({
x: Math.random() * 2 * Math.PI,
y: Math.random() * 2 * Math.PI,
z: Math.random() * 2 * Math.PI
}, 2000)
.easing(TWEEN.Easing.Elastic.Out).start();
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
var radius = 600;
var theta = 0;
function render() {
TWEEN.update();
theta += 0.1;
camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta));
camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta));
camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}

109
types/three/test/canvas/canvas_lights_pointlights.ts
View File

@ -1,109 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_lights_pointlights.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer,
light1: THREE.PointLight, light2: THREE.PointLight, light3: THREE.PointLight,
loader: THREE.JSONLoader, mesh: THREE.Mesh;
init();
animate();
function init() {
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, - 6, 100);
scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x00020));
light1 = new THREE.PointLight(0xff0040, 1, 50);
scene.add(light1);
light2 = new THREE.PointLight(0x0040ff, 1, 50);
scene.add(light2);
light3 = new THREE.PointLight(0x80ff80, 1, 50);
scene.add(light3);
var PI2 = Math.PI * 2;
var program = function (context: CanvasRenderingContext2D) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
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: 0x80ff80, program: program }));
light3.add(sprite);
loader = new THREE.JSONLoader();
loader.load('obj/WaltHeadLo.js', function (geometry) {
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: 0xffffff, overdraw: 0.5 }));
scene.add(mesh);
});
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var time = Date.now() * 0.0005;
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;
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;
renderer.render(scene, camera);
}
}

204
types/three/test/canvas/canvas_materials.ts
View File

@ -1,204 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_materials.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer, objects: THREE.Mesh[];
var pointLight: THREE.PointLight;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 200, 800);
scene = new THREE.Scene();
// Grid
var size = 500, step = 100;
var geometry = new THREE.Geometry();
for (var i = - size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(- size, - 120, i));
geometry.vertices.push(new THREE.Vector3(size, - 120, i));
geometry.vertices.push(new THREE.Vector3(i, - 120, - size));
geometry.vertices.push(new THREE.Vector3(i, - 120, size));
}
var material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.2 });
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Spheres
var geometry2 = new THREE.SphereGeometry(100, 14, 7);
type MeshMaterial = THREE.MeshBasicMaterial | THREE.MeshFaceMaterial | THREE.MeshLambertMaterial | THREE.MeshDepthMaterial | THREE.MeshNormalMaterial;
var materials: MeshMaterial[] = [
new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, side: THREE.DoubleSide }),
new THREE.MeshBasicMaterial({ color: 0xff0000, blending: THREE.AdditiveBlending }),
new THREE.MeshLambertMaterial({ color: 0xffffff, overdraw: 0.5 }),
new THREE.MeshLambertMaterial({ color: 0xffffff, overdraw: 0.5 }),
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', THREE.SphericalReflectionMapping), overdraw: 0.5 })
];
for (var i = 0, l = geometry2.faces.length; i < l; i++) {
var face = geometry2.faces[i];
if (Math.random() > 0.5) face.materialIndex = Math.floor(Math.random() * materials.length);
}
materials.push(new THREE.MeshFaceMaterial(materials));
objects = [];
for (var i = 0, l = materials.length; i < l; 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;
sphere.rotation.x = Math.random() * 200 - 100;
sphere.rotation.y = Math.random() * 200 - 100;
sphere.rotation.z = Math.random() * 200 - 100;
objects.push(sphere);
scene.add(sphere);
}
var PI2 = Math.PI * 2;
var program = function (context: CanvasRenderingContext2D) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
// Lights
scene.add(new THREE.AmbientLight(Math.random() * 0x202020));
var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
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);
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
var debugCanvas = document.createElement('canvas');
debugCanvas.width = 512;
debugCanvas.height = 512;
debugCanvas.style.position = 'absolute';
debugCanvas.style.top = '0px';
debugCanvas.style.left = '0px';
container.appendChild(debugCanvas);
var debugContext = debugCanvas.getContext('2d');
debugContext.setTransform(1, 0, 0, 1, 256, 256);
debugContext.strokeStyle = '#000000';
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function loadImage(path: string) {
var image = document.createElement('img');
var texture = new THREE.Texture(image, THREE.UVMapping)
image.onload = function () { texture.needsUpdate = true; };
image.src = path;
return texture;
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 1000;
camera.position.z = Math.sin(timer) * 1000;
camera.lookAt(scene.position);
for (var i = 0, l = objects.length; i < l; i++) {
var object = objects[i];
object.rotation.x += 0.01;
object.rotation.y += 0.005;
}
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);
}
}

129
types/three/test/canvas/canvas_particles_floor.ts
View File

@ -1,129 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_floor.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
var SEPARATION = 100;
var AMOUNTX = 50;
var AMOUNTY = 50;
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CanvasRenderer, particle: THREE.Sprite;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
var material = new THREE.SpriteMaterial();
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = new THREE.Sprite(material);
particle.scale.y = 20;
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
scene.add(particle);
}
}
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onDocumentMouseMove(event: MouseEvent) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event: TouchEvent) {
if (event.touches.length > 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event: TouchEvent) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (- mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}

357
types/three/test/css3d/css3d_periodictable.ts
View File

@ -1,357 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/css3d_periodictable.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
var table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosphorus", "30.973762", 15, 3,
"S", "Sulfur", "32.065", 16, 3,
"Cl", "Chlorine", "35.453", 17, 3,
"Ar", "Argon", "39.948", 18, 3,
"K", "Potassium", "39.948", 1, 4,
"Ca", "Calcium", "40.078", 2, 4,
"Sc", "Scandium", "44.955912", 3, 4,
"Ti", "Titanium", "47.867", 4, 4,
"V", "Vanadium", "50.9415", 5, 4,
"Cr", "Chromium", "51.9961", 6, 4,
"Mn", "Manganese", "54.938045", 7, 4,
"Fe", "Iron", "55.845", 8, 4,
"Co", "Cobalt", "58.933195", 9, 4,
"Ni", "Nickel", "58.6934", 10, 4,
"Cu", "Copper", "63.546", 11, 4,
"Zn", "Zinc", "65.38", 12, 4,
"Ga", "Gallium", "69.723", 13, 4,
"Ge", "Germanium", "72.63", 14, 4,
"As", "Arsenic", "74.9216", 15, 4,
"Se", "Selenium", "78.96", 16, 4,
"Br", "Bromine", "79.904", 17, 4,
"Kr", "Krypton", "83.798", 18, 4,
"Rb", "Rubidium", "85.4678", 1, 5,
"Sr", "Strontium", "87.62", 2, 5,
"Y", "Yttrium", "88.90585", 3, 5,
"Zr", "Zirconium", "91.224", 4, 5,
"Nb", "Niobium", "92.90628", 5, 5,
"Mo", "Molybdenum", "95.96", 6, 5,
"Tc", "Technetium", "(98)", 7, 5,
"Ru", "Ruthenium", "101.07", 8, 5,
"Rh", "Rhodium", "102.9055", 9, 5,
"Pd", "Palladium", "106.42", 10, 5,
"Ag", "Silver", "107.8682", 11, 5,
"Cd", "Cadmium", "112.411", 12, 5,
"In", "Indium", "114.818", 13, 5,
"Sn", "Tin", "118.71", 14, 5,
"Sb", "Antimony", "121.76", 15, 5,
"Te", "Tellurium", "127.6", 16, 5,
"I", "Iodine", "126.90447", 17, 5,
"Xe", "Xenon", "131.293", 18, 5,
"Cs", "Caesium", "132.9054", 1, 6,
"Ba", "Barium", "132.9054", 2, 6,
"La", "Lanthanum", "138.90547", 4, 9,
"Ce", "Cerium", "140.116", 5, 9,
"Pr", "Praseodymium", "140.90765", 6, 9,
"Nd", "Neodymium", "144.242", 7, 9,
"Pm", "Promethium", "(145)", 8, 9,
"Sm", "Samarium", "150.36", 9, 9,
"Eu", "Europium", "151.964", 10, 9,
"Gd", "Gadolinium", "157.25", 11, 9,
"Tb", "Terbium", "158.92535", 12, 9,
"Dy", "Dysprosium", "162.5", 13, 9,
"Ho", "Holmium", "164.93032", 14, 9,
"Er", "Erbium", "167.259", 15, 9,
"Tm", "Thulium", "168.93421", 16, 9,
"Yb", "Ytterbium", "173.054", 17, 9,
"Lu", "Lutetium", "174.9668", 18, 9,
"Hf", "Hafnium", "178.49", 4, 6,
"Ta", "Tantalum", "180.94788", 5, 6,
"W", "Tungsten", "183.84", 6, 6,
"Re", "Rhenium", "186.207", 7, 6,
"Os", "Osmium", "190.23", 8, 6,
"Ir", "Iridium", "192.217", 9, 6,
"Pt", "Platinum", "195.084", 10, 6,
"Au", "Gold", "196.966569", 11, 6,
"Hg", "Mercury", "200.59", 12, 6,
"Tl", "Thallium", "204.3833", 13, 6,
"Pb", "Lead", "207.2", 14, 6,
"Bi", "Bismuth", "208.9804", 15, 6,
"Po", "Polonium", "(209)", 16, 6,
"At", "Astatine", "(210)", 17, 6,
"Rn", "Radon", "(222)", 18, 6,
"Fr", "Francium", "(223)", 1, 7,
"Ra", "Radium", "(226)", 2, 7,
"Ac", "Actinium", "(227)", 4, 10,
"Th", "Thorium", "232.03806", 5, 10,
"Pa", "Protactinium", "231.0588", 6, 10,
"U", "Uranium", "238.02891", 7, 10,
"Np", "Neptunium", "(237)", 8, 10,
"Pu", "Plutonium", "(244)", 9, 10,
"Am", "Americium", "(243)", 10, 10,
"Cm", "Curium", "(247)", 11, 10,
"Bk", "Berkelium", "(247)", 12, 10,
"Cf", "Californium", "(251)", 13, 10,
"Es", "Einstenium", "(252)", 14, 10,
"Fm", "Fermium", "(257)", 15, 10,
"Md", "Mendelevium", "(258)", 16, 10,
"No", "Nobelium", "(259)", 17, 10,
"Lr", "Lawrencium", "(262)", 18, 10,
"Rf", "Rutherfordium", "(267)", 4, 7,
"Db", "Dubnium", "(268)", 5, 7,
"Sg", "Seaborgium", "(271)", 6, 7,
"Bh", "Bohrium", "(272)", 7, 7,
"Hs", "Hassium", "(270)", 8, 7,
"Mt", "Meitnerium", "(276)", 9, 7,
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Uut", "Unutrium", "(284)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Uup", "Ununpentium", "(288)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Uus", "Ununseptium", "(294)", 17, 7,
"Uuo", "Ununoctium", "(294)", 18, 7
];
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CSS3DRenderer;
var controls: THREE.TrackballControls;
var objects: THREE.CSS3DObject[] = [];
class Targets {
constructor() {}
public table: THREE.Object3D[] = [];
public sphere: THREE.Object3D[] = [];
public helix: THREE.Object3D[] = [];
public grid: THREE.Object3D[] = [];
}
let targets = new Targets();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 3000;
scene = new THREE.Scene();
// table
for (var i = 0; i < table.length; i += 5) {
var element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
var number = document.createElement('div');
number.className = 'number';
number.textContent = ((i / 5) + 1).toString();
element.appendChild(number);
var symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = table[i].toString();
element.appendChild(symbol);
var details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
element.appendChild(details);
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(cssobject);
//
var object = new THREE.Object3D();
object.position.x = ((table[i + 3] as number) * 140) - 1330;
object.position.y = - ((table[i + 4] as number) * 180) + 990;
targets.table.push(object);
}
// sphere
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var phi = Math.acos(-1 + (2 * i) / l);
var theta = Math.sqrt(l * Math.PI) * phi;
var object = new THREE.Object3D();
object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
object.position.z = 800 * Math.cos(phi);
vector.copy(object.position).multiplyScalar(2);
object.lookAt(vector);
targets.sphere.push(object);
}
// helix
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var phi = i * 0.175 + Math.PI;
var object = new THREE.Object3D();
object.position.x = 900 * Math.sin(phi);
object.position.y = - (i * 8) + 450;
object.position.z = 900 * Math.cos(phi);
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt(vector);
targets.helix.push(object);
}
// grid
for (var i = 0; i < objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = ((i % 5) * 400) - 800;
object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;
targets.grid.push(object);
}
//
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
//
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener('change', render);
var button = document.getElementById('table');
button.addEventListener('click', function (event: MouseEvent) {
transform(targets.table, 2000);
}, false);
var button = document.getElementById('sphere');
button.addEventListener('click', function (event: MouseEvent) {
transform(targets.sphere, 2000);
}, false);
var button = document.getElementById('helix');
button.addEventListener('click', function (event: MouseEvent) {
transform(targets.helix, 2000);
}, false);
var button = document.getElementById('grid');
button.addEventListener('click', function (event: MouseEvent) {
transform(targets.grid, 2000);
}, false);
transform(targets.table, 2000);
//
window.addEventListener('resize', onWindowResize, false);
}
function transform(targets: THREE.Object3D[], duration: number) {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
function render() {
renderer.render(scene, camera);
}
}

186
types/three/test/css3d/css3d_sprites.ts
View File

@ -1,186 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/css3d_sprites.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.CSS3DRenderer;
var controls: THREE.TrackballControls;
var particlesTotal = 512;
var positions: number[] = [];
var objects: THREE.CSS3DSprite[] = [];
var current = 0;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(600, 400, 1500);
camera.lookAt(new THREE.Vector3());
scene = new THREE.Scene();
var image = document.createElement('img');
image.addEventListener('load', function(event: Event) {
for (var i = 0; i < particlesTotal; i++) {
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);
objects.push(object);
}
transition();
}, false);
image.src = 'textures/sprite.png';
// Plane
var amountX = 16;
var amountZ = 32;
var separation = 150;
var offsetX = ((amountX - 1) * separation) / 2;
var offsetZ = ((amountZ - 1) * separation) / 2;
for (var i = 0; i < particlesTotal; i++) {
var x = (i % amountX) * separation;
var z = Math.floor(i / amountX) * separation;
var y = (Math.sin(x * 0.5) + Math.sin(z * 0.5)) * 200;
positions.push(x - offsetX, y, z - offsetZ);
}
// Cube
var amount = 8;
var separation = 150;
var offset = ((amount - 1) * separation) / 2;
for (var i = 0; i < particlesTotal; i++) {
var x = (i % amount) * separation;
var y = Math.floor((i / amount) % amount) * separation;
var z = Math.floor(i / (amount * amount)) * separation;
positions.push(x - offset, y - offset, z - offset);
}
// Random
for (var i = 0; i < particlesTotal; i++) {
positions.push(
Math.random() * 4000 - 2000,
Math.random() * 4000 - 2000,
Math.random() * 4000 - 2000
);
}
// Sphere
var radius = 750;
for (var i = 0; i < particlesTotal; i++) {
var phi = Math.acos(-1 + (2 * i) / particlesTotal);
var theta = Math.sqrt(particlesTotal * Math.PI) * phi;
positions.push(
radius * Math.cos(theta) * Math.sin(phi),
radius * Math.sin(theta) * Math.sin(phi),
radius * Math.cos(phi)
);
}
//
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
document.getElementById('container').appendChild(renderer.domElement);
//
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function transition() {
var offset = current * particlesTotal * 3;
var duration = 2000;
for (var i = 0, j = offset; i < particlesTotal;) {
var object = objects[i];
new TWEEN.Tween(object.position)
.to({
x: positions[j],
y: positions[j + 1],
z: positions[j + 2]
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
i++ ;
j += 3;
}
new TWEEN.Tween(this)
.to({}, duration * 3)
.onComplete(transition)
.start();
current = (current + 1) % 4;
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
var time = performance.now();
for (var i = 0, l = objects.length; i < l; i++) {
var object = objects[i];
var scale = Math.sin((Math.floor(object.position.x) + time) * 0.002) * 0.3 + 1;
object.scale.set(scale, scale, scale);
}
renderer.render(scene, camera);
}
}

139
types/three/test/docs/scenes/bones_browser.ts
View File

@ -1,139 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/docs/scenes/bones-browser.html
() => {
var scene: THREE.Scene;
var camera: THREE.PerspectiveCamera;
var renderer: THREE.WebGLRenderer;
var orbit: THREE.OrbitControls;
var lights: THREE.Light[];
var mesh: THREE.SkinnedMesh;
var bones: THREE.Bone[];
var skeletonHelper: THREE.SkeletonHelper;
var state = {
animateBones: false
};
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.z = 30;
camera.position.y = 30;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableZoom = false;
lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(- 100, - 200, - 100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
initBones();
}
function createGeometry(sizing: any) {
var geometry = new THREE.CylinderBufferGeometry(
5, // radiusTop
5, // radiusBottom
sizing.height, // height
8, // radiusSegments
sizing.segmentCount * 3, // heightSegments
true // openEnded
);
var position = geometry.attributes.position as THREE.BufferAttribute;
var vertex = new THREE.Vector3();
var skinIndices = [];
var skinWeights = [];
for (var i = 0; i < position.count; i++) {
vertex.fromBufferAttribute(position, i);
var y = (vertex.y + sizing.halfHeight);
var skinIndex = Math.floor(y / sizing.segmentHeight);
var skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;
skinIndices.push(skinIndex, skinIndex + 1, 0, 0);
skinWeights.push(1 - skinWeight, skinWeight, 0, 0);
}
geometry.addAttribute('skinIndex', new THREE.Uint16BufferAttribute(skinIndices, 4));
geometry.addAttribute('skinWeight', new THREE.Float32BufferAttribute(skinWeights, 4));
return geometry;
}
function createBones(sizing: any) {
bones = [];
var prevBone = new THREE.Bone();
bones.push(prevBone);
prevBone.position.y = - sizing.halfHeight;
for (var i = 0; i < sizing.segmentCount; i++) {
var bone = new THREE.Bone();
bone.position.y = sizing.segmentHeight;
bones.push(bone);
prevBone.add(bone);
prevBone = bone;
}
return bones;
}
function createMesh(geometry: THREE.BufferGeometry, bones: THREE.Bone[]) {
var material = new THREE.MeshPhongMaterial({
skinning: true,
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true
});
var mesh = new THREE.SkinnedMesh(geometry, material);
var skeleton = new THREE.Skeleton(bones);
mesh.add(bones[0]);
mesh.bind(skeleton);
skeletonHelper = new THREE.SkeletonHelper(mesh);
(skeletonHelper.material as THREE.LineBasicMaterial).linewidth = 2;
scene.add(skeletonHelper);
return mesh;
}
function initBones() {
var segmentHeight = 8;
var segmentCount = 4;
var height = segmentHeight * segmentCount;
var halfHeight = height * 0.5;
var sizing = {
segmentHeight: segmentHeight,
segmentCount: segmentCount,
height: height,
halfHeight: halfHeight
};
var geometry = createGeometry(sizing);
var bones = createBones(sizing);
mesh = createMesh(geometry, bones);
mesh.scale.multiplyScalar(1);
scene.add(mesh);
}
function render() {
requestAnimationFrame(render);
var time = Date.now() * 0.001;
//Wiggle the bones
if (state.animateBones) {
for (var i = 0; i < mesh.skeleton.bones.length; i++) {
mesh.skeleton.bones[i].rotation.z = Math.sin(time) * 2 / mesh.skeleton.bones.length;
}
}
renderer.render(scene, camera);
}
initScene();
render();
}

15
types/three/test/examples/controls/vrcontrols.ts
View File

@ -1,15 +0,0 @@
var _vrControls = new THREE.VRControls(new THREE.Camera());
_vrControls.update();
_vrControls.scale = 25;
window.addEventListener("keydown", (ev) => {
if (ev.keyCode == "R".charCodeAt(0)) {
_vrControls.zeroSensor();
}
});
window.addEventListener("touchstart", (ev) => {
_vrControls.zeroSensor();
});

5
types/three/test/examples/ctm/ctmloader.ts
View File

@ -1,5 +0,0 @@
let _ctmloader = new THREE.CTMLoader();
_ctmloader.load('https://github.com/mrdoob/three.js/blob/master/examples/models/ctm/ben.ctm', (geo: any) => {
console.log(geo.position);
});

6
types/three/test/examples/detector.ts
View File

@ -1,6 +0,0 @@
() => {
if ( !Detector.canvas || !Detector.webgl || !Detector.workers || !Detector.fileapi ){
var errorElement = Detector.getWebGLErrorMessage();
Detector.addGetWebGLMessage();
}
}

13
types/three/test/examples/effects/vreffect.ts
View File

@ -1,13 +0,0 @@
var _vrEffect: THREE.VREffect;
_vrEffect = new THREE.VREffect(new THREE.WebGLRenderer({antialias: true}), function (error) {
if (error) {
this._stats.classList.add("error");
this._stats.innerHTML = "WebVR API not supported";
this._vrAvailable = false;
}
});
_vrEffect.setSize(100, 100);
_vrEffect.render(new THREE.Scene(), new THREE.Camera());
_vrEffect.setFullScreen(true);

511
types/three/test/examples/exporters/gltf-exporter.ts
View File

@ -1,511 +0,0 @@
() => {
var container: HTMLElement;
var camera: THREE.PerspectiveCamera,
material: THREE.MeshStandardMaterial,
object: THREE.Object3D,
scene1: THREE.Scene,
renderer: THREE.WebGLRenderer;
var gridHelper: THREE.GridHelper,
sphere: THREE.Object3D,
waltHead: THREE.Object3D;
var gltfExporter = new THREE.GLTFExporter();
var options = {
trs: true,
onlyVisible: true,
truncateDrawRange: true,
binary: true,
forceIndices: true,
forcePowerOfTwoTextures: true
};
// gltfExporter.parse(
// scene1,
// function(result) {
// if (result instanceof ArrayBuffer) {
// saveArrayBuffer(result, "scene.glb");
// } else {
// var output = JSON.stringify(result, null, 2);
// console.log(output);
// saveString(output, "scene.gltf");
// }
// },
// options
// );
var link = document.createElement("a");
link.style.display = "none";
document.body.appendChild(link); // Firefox workaround, see #6594
// function save(blob, filename) {
// link.href = URL.createObjectURL(blob);
// link.download = filename;
// link.click();
// // URL.revokeObjectURL( url ); breaks Firefox...
// }
// function saveString(text, filename) {
// save(new Blob([text], { type: "text/plain" }), filename);
// }
// function saveArrayBuffer(buffer, filename) {
// save(
// new Blob([buffer], { type: "application/octet-stream" }),
// filename
// );
// }
if (!Detector.webgl) Detector.addGetWebGLMessage();
init();
animate();
function init() {
container = document.createElement("div");
document.body.appendChild(container);
scene1 = new THREE.Scene();
scene1.name = "Scene1";
// ---------------------------------------------------------------------
// Perspective Camera
// ---------------------------------------------------------------------
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
2000
);
camera.position.set(600, 400, 0);
camera.name = "PerspectiveCamera";
scene1.add(camera);
// ---------------------------------------------------------------------
// Ambient light
// ---------------------------------------------------------------------
var light = new THREE.AmbientLight(0xffffff, 0.2);
light.name = "AmbientLight";
scene1.add(light);
// ---------------------------------------------------------------------
// DirectLight
// ---------------------------------------------------------------------
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 0);
light.name = "DirectionalLight";
scene1.add(light);
// ---------------------------------------------------------------------
// Grid
// ---------------------------------------------------------------------
gridHelper = new THREE.GridHelper(2000, 20);
gridHelper.position.y = -50;
gridHelper.name = "Grid";
scene1.add(gridHelper);
// ---------------------------------------------------------------------
// Axes
// ---------------------------------------------------------------------
var axes = new THREE.AxesHelper(500);
axes.name = "AxesHelper";
scene1.add(axes);
// ---------------------------------------------------------------------
// Simple geometry with basic material
// ---------------------------------------------------------------------
// Icosahedron
var mapGrid = new THREE.TextureLoader().load("textures/UV_Grid_Sm.jpg");
mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: mapGrid
});
object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 0), material);
object.position.set(-200, 0, 200);
object.name = "Icosahedron";
scene1.add(object);
// Octahedron
material = new THREE.MeshBasicMaterial({
color: 0x0000ff,
wireframe: true
});
object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 1), material);
object.position.set(0, 0, 200);
object.name = "Octahedron";
scene1.add(object);
// Tetrahedron
material = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true,
opacity: 0.5
});
object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material);
object.position.set(200, 0, 200);
object.name = "Tetrahedron";
scene1.add(object);
// ---------------------------------------------------------------------
// Buffered geometry primitives
// ---------------------------------------------------------------------
// Sphere
sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(70, 10, 10),
new THREE.MeshStandardMaterial({
color: 0xffff00,
metalness: 0.5,
roughness: 1.0,
flatShading: true
})
);
sphere.position.set(0, 0, 0);
sphere.name = "Sphere";
scene1.add(sphere);
// Cylinder
object = new THREE.Mesh(
new THREE.CylinderBufferGeometry(10, 80, 100),
new THREE.MeshStandardMaterial({
color: 0xff00ff,
flatShading: true
})
);
object.position.set(200, 0, 0);
object.name = "Cylinder";
scene1.add(object);
// TorusKnot
object = new THREE.Mesh(
new THREE.TorusKnotGeometry(50, 15, 40, 10),
new THREE.MeshStandardMaterial({
color: 0xff0000,
roughness: 1
})
);
object.position.set(-200, 0, 0);
object.name = "Cylinder";
scene1.add(object);
// ---------------------------------------------------------------------
// Hierarchy
// ---------------------------------------------------------------------
var mapWood = new THREE.TextureLoader().load(
"textures/hardwood2_diffuse.jpg"
);
object = new THREE.Mesh(
new THREE.BoxBufferGeometry(40, 100, 100),
new THREE.MeshStandardMaterial({
map: mapWood,
side: THREE.DoubleSide
})
);
object.position.set(-200, 0, 400);
object.name = "Cube";
scene1.add(object);
var object2 = new THREE.Mesh(
new THREE.BoxBufferGeometry(40, 40, 40, 2, 2, 2),
material
);
object2.position.set(0, 0, 50);
object2.rotation.set(0, 45, 0);
object2.name = "SubCube";
object.add(object2);
// ---------------------------------------------------------------------
// Groups
// ---------------------------------------------------------------------
var group1 = new THREE.Group();
group1.name = "Group";
scene1.add(group1);
var group2 = new THREE.Group();
group2.name = "subGroup";
group2.position.set(0, 50, 0);
group1.add(group2);
object2 = new THREE.Mesh(
new THREE.BoxBufferGeometry(30, 30, 30),
material
);
object2.name = "Cube in group";
object2.position.set(0, 0, 400);
group2.add(object2);
// ---------------------------------------------------------------------
// Triangle Strip
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array([
0,
0,
0,
0,
80,
0,
80,
0,
0,
80,
80,
0,
80,
0,
80,
80,
80,
80
]);
var colors = new Float32Array([
1,
0,
0,
1,
0,
0,
1,
1,
0,
1,
1,
0,
0,
0,
1,
0,
0,
1
]);
geometry.addAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
geometry.addAttribute("color", new THREE.BufferAttribute(colors, 3));
object = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
vertexColors: THREE.VertexColors
})
);
object.position.set(140, -40, -250);
// object.setDrawMode(THREE.TriangleStripDrawMode);
object.name = "Custom buffered";
object.userData = { data: "customdata", list: [1, 2, 3, 4] };
scene1.add(object);
// ---------------------------------------------------------------------
// Line Strip
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var numPoints = 100;
var positions = new Float32Array(numPoints * 3);
for (var i = 0; i < numPoints; i++) {
positions[i * 3] = i;
positions[i * 3 + 1] = Math.sin(i / 2) * 20;
positions[i * 3 + 2] = 0;
}
geometry.addAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
object = new THREE.Line(
geometry,
new THREE.LineBasicMaterial({ color: 0xffff00 })
);
object.position.set(-50, 0, -200);
scene1.add(object);
// ---------------------------------------------------------------------
// Buffer geometry truncated (DrawRange)
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var numElements = 6;
var outOfRange = 3;
var positions = new Float32Array((numElements + outOfRange) * 3);
var colors = new Float32Array((numElements + outOfRange) * 3);
positions.set([
0,
0,
0,
0,
80,
0,
80,
0,
0,
80,
0,
0,
0,
80,
0,
80,
80,
0
]);
colors.set([1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1]);
geometry.addAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
geometry.addAttribute("color", new THREE.BufferAttribute(colors, 3));
geometry.setDrawRange(0, numElements);
object = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
vertexColors: THREE.VertexColors
})
);
object.name = "Custom buffered truncated";
object.position.set(340, -40, -200);
scene1.add(object);
// ---------------------------------------------------------------------
// Points
// ---------------------------------------------------------------------
var numPoints = 100;
var pointsArray = new Float32Array(numPoints * 3);
for (var i = 0; i < numPoints; i++) {
pointsArray[3 * i] = -50 + Math.random() * 100;
pointsArray[3 * i + 1] = Math.random() * 100;
pointsArray[3 * i + 2] = -50 + Math.random() * 100;
}
var pointsGeo = new THREE.BufferGeometry();
pointsGeo.addAttribute(
"position",
new THREE.BufferAttribute(pointsArray, 3)
);
var pointsMaterial = new THREE.PointsMaterial({
color: 0xffff00,
size: 5
});
var points = new THREE.Points(pointsGeo, pointsMaterial);
points.name = "Points";
points.position.set(-200, 0, -200);
scene1.add(points);
// ---------------------------------------------------------------------
// Ortho camera
// ---------------------------------------------------------------------
var cameraOrtho = new THREE.OrthographicCamera(
window.innerWidth / -2,
window.innerWidth / 2,
window.innerHeight / 2,
window.innerHeight / -2,
0.1,
10
);
scene1.add(cameraOrtho);
cameraOrtho.name = "OrthographicCamera";
material = new THREE.MeshLambertMaterial({
color: 0xffff00,
side: THREE.DoubleSide
});
object = new THREE.Mesh(
new THREE.CircleGeometry(50, 20, 0, Math.PI * 2),
material
);
object.position.set(200, 0, -400);
scene1.add(object);
object = new THREE.Mesh(
new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2),
material
);
object.position.set(0, 0, -400);
scene1.add(object);
object = new THREE.Mesh(
new THREE.CylinderGeometry(25, 75, 100, 40, 5),
material
);
object.position.set(-200, 0, -400);
scene1.add(object);
// ---------------------------------------------------------------------
// Big red box hidden just for testing `onlyVisible` option
// ---------------------------------------------------------------------
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
object = new THREE.Mesh(
new THREE.BoxBufferGeometry(200, 200, 200),
material
);
object.position.set(0, 0, 0);
object.name = "CubeHidden";
object.visible = false;
scene1.add(object);
// ---------------------------------------------------------------------
//
//
var loader = new THREE.OBJLoader();
loader.load("models/obj/walt/WaltHead.obj", function(obj) {
waltHead = obj;
waltHead.scale.multiplyScalar(1.5);
waltHead.position.set(400, 0, 0);
scene1.add(waltHead);
});
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
window.addEventListener("resize", onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 800;
camera.position.z = Math.sin(timer) * 800;
camera.lookAt(scene1.position);
renderer.render(scene1, camera);
}
};

14
types/three/test/examples/loaders/tdsloader.ts
View File

@ -1,14 +0,0 @@
import * as THREE from '../../../index'
const onSuccess = (object3D: THREE.Object3D) => {};
const onProgress = (progress: ProgressEvent) => {};
const onError = (event: ErrorEvent) => {};
() => {
new THREE.TDSLoader(THREE).load(
'folder/file.3ds',
onSuccess,
onProgress,
onError
);
}

83
types/three/test/examples/loaders/webgl_loader_obj_mtl.ts
View File

@ -1,83 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html
() => {
var container: HTMLElement;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 250;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
var onProgress = function ( xhr: ProgressEvent ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete) + '% downloaded' );
}
};
var onError = function ( xhr: ErrorEvent ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader: THREE.MTLLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/male02/' );
mtlLoader.load( 'male02_dds.mtl', function( materials: THREE.MaterialCreator ) {
materials.preload();
var objLoader: THREE.OBJLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/male02/' );
objLoader.load( 'male02.obj', function ( object: THREE.Object3D ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
});
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event: MouseEvent ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
}

9
types/three/test/examples/octree.ts
View File

@ -1,9 +0,0 @@
let _octree = new THREE.Octree({
underferred: false,
depthMax: Infinity,
objectsThreshold: 8,
overlapPct: 0.15,
});
console.log(_octree.getDepthEnd());

3586
types/three/test/math/test_unit_math.ts
View File

File diff suppressed because it is too large Load Diff

5
types/three/test/references.ts
View File

@ -1,5 +0,0 @@
// References used by tests
/// <reference types="stats.js" />
/// <reference types="tween.js" />
/// <reference types="dat.gui" />

290
types/three/test/webgl/webgl_animation_cloth.ts
View File

@ -1,290 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_cloth.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var cloth: any;
var clothFunction: any;
var ballPosition: any;
var ballSize: any;
var windStrength: any;
var windForce: any;
var simulate: Function;
// -------
/* testing cloth simulation */
var pinsFormation: number[][] = [];
var pins: number[] = [6];
pinsFormation.push(pins);
pins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
pinsFormation.push(pins);
pins = [0];
pinsFormation.push(pins);
pins = []; // cut the rope ;)
pinsFormation.push(pins);
pins = [0, cloth.w]; // classic 2 pins
pinsFormation.push(pins);
pins = pinsFormation[1];
function togglePins() {
pins = pinsFormation[~~(Math.random() * pinsFormation.length)];
}
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLElement;
var stats: Stats;
var camera: THREE.PerspectiveCamera;
var scene: THREE.Scene;
var renderer: THREE.WebGLRenderer;
var clothGeometry: THREE.ParametricGeometry;
var sphere: THREE.Mesh;
var object: THREE.Mesh;
var arrow: THREE.ArrowHelper;
var light: THREE.DirectionalLight;
var rotate = true;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// scene
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xcce0ff, 500, 10000);
// camera
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = 50;
camera.position.z = 1500;
scene.add(camera);
// lights
scene.add(new THREE.AmbientLight(0x666666));
light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(50, 200, 100);
light.position.multiplyScalar(1.3);
light.castShadow = true;
//light.shadowCameraVisible = true;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
var d = 300;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 1000;
//light.shadowDarkness = 0.5;
scene.add(light);
// cloth material
var clothTexture = THREE.ImageUtils.loadTexture('textures/patterns/circuit_pattern.png');
clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
clothTexture.anisotropy = 16;
var clothMaterial = new THREE.MeshPhongMaterial({ alphaTest: 0.5, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shininess: 10, map: clothTexture, side: THREE.DoubleSide });
// cloth geometry
clothGeometry = new THREE.ParametricGeometry(clothFunction, cloth.w, cloth.h);
//clothGeometry.dynamic = true;
clothGeometry.computeFaceNormals();
var uniforms = { texture: { value: clothTexture } };
var vertexShader = document.getElementById('vertexShaderDepth').textContent;
var fragmentShader = document.getElementById('fragmentShaderDepth').textContent;
// cloth mesh
object = new THREE.Mesh(clothGeometry, clothMaterial);
object.position.set(0, 0, 0);
object.castShadow = true;
object.receiveShadow = true;
scene.add(object);
//object.customDepthMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader });
// sphere
var ballGeo = new THREE.SphereGeometry(ballSize, 20, 20);
var ballMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
sphere = new THREE.Mesh(ballGeo, ballMaterial);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere);
// arrow
arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 50, 0xff0000);
arrow.position.set(-200, 0, -200);
// scene.add( arrow );
// ground
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 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;
scene.add(mesh);
// poles
var poleGeo = new THREE.BoxGeometry(5, 375, 5);
var poleMat = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, shininess: 100 });
var mesh = new THREE.Mesh(poleGeo, poleMat);
mesh.position.x = -125;
mesh.position.y = -62;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
var mesh = new THREE.Mesh(poleGeo, poleMat);
mesh.position.x = 125;
mesh.position.y = -62;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
var mesh = new THREE.Mesh(new THREE.BoxGeometry(255, 5, 5), poleMat);
mesh.position.y = -250 + 750 / 2;
mesh.position.x = 0;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
var gg = new THREE.BoxGeometry(10, 10, 10);
var mesh = new THREE.Mesh(gg, poleMat);
mesh.position.y = -250;
mesh.position.x = 125;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
var mesh = new THREE.Mesh(gg, poleMat);
mesh.position.y = -250;
mesh.position.x = -125;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color);
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMapEnabled = true;
//
stats = new Stats();
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
sphere.visible = !true
}
//
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
var time = Date.now();
windStrength = Math.cos(time / 7000) * 20 + 40;
windForce.set(Math.sin(time / 2000), Math.cos(time / 3000), Math.sin(time / 1000)).normalize().multiplyScalar(windStrength);
arrow.setLength(windStrength);
arrow.setDirection(windForce);
simulate(time);
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0002;
var p = cloth.particles;
for (var i = 0, il = p.length; i < il; i++) {
clothGeometry.vertices[i].copy(p[i].position);
}
clothGeometry.computeFaceNormals();
clothGeometry.computeVertexNormals();
clothGeometry.normalsNeedUpdate = true;
clothGeometry.verticesNeedUpdate = true;
sphere.position.copy(ballPosition);
if (rotate) {
camera.position.x = Math.cos(timer) * 1500;
camera.position.z = Math.sin(timer) * 1500;
}
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}

209
types/three/test/webgl/webgl_animation_skinning_morph.ts
View File

@ -1,209 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_skinning_morph.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
interface WEBGL {
isWebGLAvailable(): boolean;
isWebGL2Available(): boolean;
getWebGLErrorMessage(): HTMLDivElement;
getWebGL2ErrorMessage(): HTMLDivElement;
getErrorMessage(version: 1 | 2): HTMLDivElement;
}
var WEBGL: WEBGL;
// -------
if (WEBGL.isWebGLAvailable() === false) {
document.body.appendChild(WEBGL.getWebGLErrorMessage());
}
var container: HTMLElement
var stats: Stats;
var clock: THREE.Clock;
var gui: dat.GUI;
var mixer: THREE.AnimationMixer;
var actions: { [name: string]: THREE.AnimationAction };
var activeAction: THREE.AnimationAction;
var previousAction: THREE.AnimationAction;
var camera: THREE.PerspectiveCamera;
var scene: THREE.Scene;
var renderer: THREE.WebGLRenderer;
var model: THREE.Scene;
var face: THREE.Mesh;
type Emote = 'Jump' | 'Yes' | 'No' | 'Wave' | 'Punch' | 'ThumbsUp';
var api: { [name in Emote]?: () => void; } & { state: string; } = {state: 'Walking'};
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 100);
camera.position.set(-5, 3, 10);
camera.lookAt(new THREE.Vector3(0, 2, 0));
scene = new THREE.Scene();
scene.background = new THREE.Color(0xe0e0e0);
scene.fog = new THREE.Fog(0xe0e0e0, 20, 100);
clock = new THREE.Clock();
// lights
var light: THREE.Light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 20, 10);
scene.add(light);
// ground
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({
color: 0x999999,
depthWrite: false
}));
mesh.rotation.x = -Math.PI / 2;
scene.add(mesh);
var grid = new THREE.GridHelper(200, 40, 0x000000, 0x000000);
(grid.material as THREE.LineBasicMaterial).opacity = 0.2;
(grid.material as THREE.LineBasicMaterial).transparent = true;
scene.add(grid);
// model
var loader = new THREE.GLTFLoader();
loader.load('models/gltf/RobotExpressive/RobotExpressive.glb', function (gltf) {
model = gltf.scene;
scene.add(model);
createGUI(model, gltf.animations);
}, undefined, function (e) {
console.error(e);
});
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
// stats
stats = new Stats();
container.appendChild(stats.dom);
}
function createGUI(model: THREE.Scene, animations: THREE.AnimationClip[]) {
var states = ['Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing'];
var emotes: Emote[] = ['Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp'];
gui = new dat.GUI();
mixer = new THREE.AnimationMixer(model);
actions = {};
for (var i = 0; i < animations.length; i++) {
var clip = animations[i];
var action = mixer.clipAction(clip);
actions[clip.name] = action;
if (emotes.indexOf(clip.name as Emote) >= 0 || states.indexOf(clip.name) >= 4) {
action.clampWhenFinished = true;
action.loop = THREE.LoopOnce;
}
}
// states
var statesFolder = gui.addFolder('States');
var clipCtrl = statesFolder.add(api, 'state').options(states);
clipCtrl.onChange(function () {
fadeToAction(api.state, 0.5);
});
statesFolder.open();
// emotes
var emoteFolder = gui.addFolder('Emote');
function createEmoteCallback(name: Emote) {
api[name] = function () {
fadeToAction(name, 0.2);
mixer.addEventListener('finished', restoreState);
};
emoteFolder.add(api, name);
}
function restoreState() {
mixer.removeEventListener('finished', restoreState);
fadeToAction(api.state, 0.2);
}
for (var i = 0; i < emotes.length; i++) {
createEmoteCallback(emotes[i]);
}
emoteFolder.open();
// expressions
face = model.getObjectByName('Head_2') as THREE.Mesh;
var expressions = Object.keys(face.morphTargetDictionary);
var expressionFolder = gui.addFolder('Expressions');
for (var i = 0; i < expressions.length; i++) {
expressionFolder.add(face.morphTargetInfluences, i.toString(), 0, 1, 0.01).name(expressions[i]);
}
activeAction = actions['Walking'];
activeAction.play();
expressionFolder.open();
}
function fadeToAction(name: string, duration: number) {
previousAction = activeAction;
activeAction = actions[name];
if (previousAction !== activeAction) {
previousAction.fadeOut(duration);
}
activeAction
.reset()
.setEffectiveTimeScale(1)
.setEffectiveWeight(1)
.fadeIn(duration)
.play();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
var dt = clock.getDelta();
if (mixer) mixer.update(dt);
requestAnimationFrame(animate);
renderer.render(scene, camera);
stats.update();
}
}

217
types/three/test/webgl/webgl_buffergeometry.ts
View File

@ -1,217 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container: HTMLElement;
var stats: Stats;
var camera: THREE.PerspectiveCamera;
var scene: THREE.Scene;
var renderer: THREE.WebGLRenderer;
var mesh: THREE.Mesh;
init();
animate();
function init() {
container = document.getElementById( 'container' );
//
camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
camera.position.z = 2750;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
//
scene.add( new THREE.AmbientLight( 0x444444 ) );
var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
light1.position.set( 1, 1, 1 );
scene.add( light1 );
var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
light2.position.set( 0, -1, 0 );
scene.add( light2 );
//
var triangles = 160000;
var geometry = new THREE.BufferGeometry();
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();
var n = 800, n2 = n/2; // triangles spread in the cube
var d = 12, d2 = d/2; // individual triangle size
var pA = new THREE.Vector3();
var pB = new THREE.Vector3();
var pC = new THREE.Vector3();
var cb = new THREE.Vector3();
var ab = new THREE.Vector3();
for ( var i = 0; i < positions.length; i += 9 ) {
// positions
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
var ax = x + Math.random() * d - d2;
var ay = y + Math.random() * d - d2;
var az = z + Math.random() * d - d2;
var bx = x + Math.random() * d - d2;
var by = y + Math.random() * d - d2;
var bz = z + Math.random() * d - d2;
var cx = x + Math.random() * d - d2;
var cy = y + Math.random() * d - d2;
var cz = z + Math.random() * d - d2;
positions[ i ] = ax;
positions[ i + 1 ] = ay;
positions[ i + 2 ] = az;
positions[ i + 3 ] = bx;
positions[ i + 4 ] = by;
positions[ i + 5 ] = bz;
positions[ i + 6 ] = cx;
positions[ i + 7 ] = cy;
positions[ i + 8 ] = cz;
// flat face normals
pA.set( ax, ay, az );
pB.set( bx, by, bz );
pC.set( cx, cy, cz );
cb.subVectors( pC, pB );
ab.subVectors( pA, pB );
cb.cross( ab );
cb.normalize();
var nx = cb.x;
var ny = cb.y;
var nz = cb.z;
normals[ i ] = nx;
normals[ i + 1 ] = ny;
normals[ i + 2 ] = nz;
normals[ i + 3 ] = nx;
normals[ i + 4 ] = ny;
normals[ i + 5 ] = nz;
normals[ i + 6 ] = nx;
normals[ i + 7 ] = ny;
normals[ i + 8 ] = nz;
// colors
var vx = ( x / n ) + 0.5;
var vy = ( y / n ) + 0.5;
var vz = ( z / n ) + 0.5;
color.setRGB( vx, vy, vz );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
colors[ i + 3 ] = color.r;
colors[ i + 4 ] = color.g;
colors[ i + 5 ] = color.b;
colors[ i + 6 ] = color.r;
colors[ i + 7 ] = color.g;
colors[ i + 8 ] = color.b;
}
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.computeBoundingSphere();
var material = new THREE.MeshPhongMaterial( {
color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
side: THREE.DoubleSide, vertexColors: THREE.VertexColors
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.001;
mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.render( scene, camera );
}
}

234
types/three/test/webgl/webgl_camera.ts
View File

@ -1,234 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_camera.html
() => {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container: HTMLElement;
var stats: Stats;
var camera: THREE.PerspectiveCamera;
var scene: THREE.Scene;
var renderer: THREE.WebGLRenderer;
var mesh: THREE.Mesh;
var cameraRig: THREE.Group, activeCamera: THREE.PerspectiveCamera | THREE.OrthographicCamera, activeHelper: THREE.CameraHelper;
var cameraPerspective: THREE.PerspectiveCamera, cameraOrtho: THREE.OrthographicCamera;
var cameraPerspectiveHelper: THREE.CameraHelper, cameraOrthoHelper: THREE.CameraHelper;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
//
camera = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 2500;
cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
cameraPerspectiveHelper = new THREE.CameraHelper( cameraPerspective );
scene.add( cameraPerspectiveHelper );
//
cameraOrtho = new THREE.OrthographicCamera( 0.5 * SCREEN_WIDTH / - 2, 0.5 * SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, 150, 1000 );
cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho );
scene.add( cameraOrthoHelper );
//
activeCamera = cameraPerspective;
activeHelper = cameraPerspectiveHelper;
// counteract different front orientation of cameras vs rig
cameraOrtho.rotation.y = Math.PI;
cameraPerspective.rotation.y = Math.PI;
cameraRig = new THREE.Group();
cameraRig.add( cameraPerspective );
cameraRig.add( cameraOrtho );
scene.add( cameraRig );
//
mesh = new THREE.Mesh(
new THREE.SphereBufferGeometry( 100, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
);
scene.add( mesh );
var mesh2 = new THREE.Mesh(
new THREE.SphereBufferGeometry( 50, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
);
mesh2.position.y = 150;
mesh.add( mesh2 );
var mesh3 = new THREE.Mesh(
new THREE.SphereBufferGeometry( 5, 16, 8 ),
new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
);
mesh3.position.z = 150;
cameraRig.add( mesh3 );
//
var geometry = new THREE.Geometry();
for ( var i = 0; i < 10000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = THREE.Math.randFloatSpread( 2000 );
vertex.y = THREE.Math.randFloatSpread( 2000 );
vertex.z = THREE.Math.randFloatSpread( 2000 );
geometry.vertices.push( vertex );
}
var particles = new THREE.Points( geometry, new THREE.PointsMaterial( { 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 );
renderer.autoClear = false;
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );
}
//
function onKeyDown ( event: KeyboardEvent ) {
switch( event.keyCode ) {
case 79: /*O*/
activeCamera = cameraOrtho;
activeHelper = cameraOrthoHelper;
break;
case 80: /*P*/
activeCamera = cameraPerspective;
activeHelper = cameraPerspectiveHelper;
break;
}
}
//
function onWindowResize( event: Event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
cameraPerspective.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
cameraPerspective.updateProjectionMatrix();
cameraOrtho.left = - 0.5 * SCREEN_WIDTH / 2;
cameraOrtho.right = 0.5 * SCREEN_WIDTH / 2;
cameraOrtho.top = SCREEN_HEIGHT / 2;
cameraOrtho.bottom = - SCREEN_HEIGHT / 2;
cameraOrtho.updateProjectionMatrix();
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var r = Date.now() * 0.0005;
mesh.position.x = 700 * Math.cos( r );
mesh.position.z = 700 * Math.sin( r );
mesh.position.y = 700 * Math.sin( r );
mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );
mesh.children[ 0 ].position.z = 70 * Math.sin( r );
if ( activeCamera === cameraPerspective ) {
cameraPerspective.fov = 35 + 30 * Math.sin( 0.5 * r );
cameraPerspective.far = mesh.position.length();
cameraPerspective.updateProjectionMatrix();
cameraPerspectiveHelper.update();
cameraPerspectiveHelper.visible = true;
cameraOrthoHelper.visible = false;
} else {
cameraOrtho.far = mesh.position.length();
cameraOrtho.updateProjectionMatrix();
cameraOrthoHelper.update();
cameraOrthoHelper.visible = true;
cameraPerspectiveHelper.visible = false;
}
cameraRig.lookAt( mesh.position );
renderer.clear();
activeHelper.visible = false;
renderer.setViewport( 0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
renderer.render( scene, activeCamera );
activeHelper.visible = true;
renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
renderer.render( scene, camera );
}
}

122
types/three/test/webgl/webgl_custom_attributes.ts
View File

@ -1,122 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html
() => {
if (!Detector.webgl) Detector.addGetWebGLMessage();
var renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, stats: Stats;
var sphere: THREE.Mesh, uniforms: { amplitude: { type: string; value: number; }; color: { type: string; value: THREE.Color; }; texture: { type: string; value: THREE.Texture; }; };
var displacement: Float32Array, noise: Float32Array;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 300;
scene = new THREE.Scene();
uniforms = {
amplitude: { type: "f", value: 1.0 },
color: { type: "c", value: new THREE.Color(0xff2200) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/water.jpg") },
};
uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent
});
var radius = 50, segments = 128, rings = 64;
var geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
displacement = new Float32Array( geometry.getAttribute('position').count );
noise = new Float32Array( geometry.getAttribute('position').count );
for ( var i = 0; i < displacement.length; i ++ ) {
noise[ i ] = Math.random() * 5;
}
geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 1 ) );
sphere = new THREE.Mesh(geometry, shaderMaterial);
scene.add(sphere);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x050505);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var container = document.getElementById('container');
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var time = Date.now() * 0.01;
sphere.rotation.y = sphere.rotation.z = 0.01 * time;
uniforms.amplitude.value = 2.5 * Math.sin(sphere.rotation.y * 0.125);
uniforms.color.value.offsetHSL(0.0005, 0, 0);
for ( var i = 0; i < displacement.length; i ++ ) {
displacement[ i ] = Math.sin( 0.1 * i + time );
noise[ i ] += 0.5 * ( 0.5 - Math.random() );
noise[ i ] = THREE.Math.clamp( noise[ i ], -5, 5 );
displacement[ i ] += noise[ i ];
}
((sphere.geometry as THREE.BufferGeometry).getAttribute('displacement')as THREE.BufferAttribute).needsUpdate = true;
renderer.render(scene, camera);
}
}

179
types/three/test/webgl/webgl_geometries.ts
View File

@ -1,179 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometries.html
() => {
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.y = 400;
scene = new THREE.Scene();
var light: THREE.DirectionalLight, object: THREE.Mesh | THREE.AxesHelper | THREE.ArrowHelper;
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 0);
scene.add(light);
var map = THREE.ImageUtils.loadTexture('textures/UV_Grid_Sm.jpg');
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial({ map: map, side: THREE.DoubleSide });
//
object = new THREE.Mesh(new THREE.SphereGeometry(75, 20, 10), material);
object.position.set(-400, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 1), material);
object.position.set(-200, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 2), material);
object.position.set(0, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material);
object.position.set(200, 0, 200);
scene.add(object);
//
object = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 4, 4), material);
object.position.set(-400, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 4, 4, 4), material);
object.position.set(-200, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), material);
object.position.set(0, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2), material);
object.position.set(200, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.CylinderGeometry(25, 75, 100, 40, 5), material);
object.position.set(400, 0, 0);
scene.add(object);
//
var points: THREE.Vector2[] = [];
for (var i = 0; i < 50; i++) {
points.push(new THREE.Vector2(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, 0));
}
object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material);
object.position.set(-400, 0, -200);
scene.add(object);
object = new THREE.Mesh(new THREE.TorusGeometry(50, 20, 20, 20), material);
object.position.set(-200, 0, -200);
scene.add(object);
object = new THREE.Mesh(new THREE.TorusKnotGeometry(50, 10, 50, 20), material);
object.position.set(0, 0, -200);
scene.add(object);
object = new THREE.Mesh(
new THREE.ParametricGeometry(
(u:number, v:number, dest:THREE.Vector3):void => {
dest.set(u, v, 0);
},
25,
25
)
);
object = new THREE.AxesHelper(50);
object.position.set(200, 0, -200);
scene.add(object);
object = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 50);
object.position.set(400, 0, -200);
scene.add(object);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 800;
camera.position.z = Math.sin(timer) * 800;
camera.lookAt(scene.position);
for (var i = 0, l = scene.children.length; i < l; i++) {
var object = scene.children[i];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
renderer.render(scene, camera);
}
}

185
types/three/test/webgl/webgl_geometries_with_context.ts
View File

@ -1,185 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometries.html
() => {
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.y = 400;
scene = new THREE.Scene();
var light: THREE.DirectionalLight, object: THREE.Mesh | THREE.AxesHelper | THREE.ArrowHelper;
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 0);
scene.add(light);
var map = THREE.ImageUtils.loadTexture('textures/UV_Grid_Sm.jpg');
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial({ map: map, side: THREE.DoubleSide });
//
object = new THREE.Mesh(new THREE.SphereGeometry(75, 20, 10), material);
object.position.set(-400, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 1), material);
object.position.set(-200, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.OctahedronGeometry(75, 2), material);
object.position.set(0, 0, 200);
scene.add(object);
object = new THREE.Mesh(new THREE.TetrahedronGeometry(75, 0), material);
object.position.set(200, 0, 200);
scene.add(object);
//
object = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 4, 4), material);
object.position.set(-400, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 4, 4, 4), material);
object.position.set(-200, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), material);
object.position.set(0, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2), material);
object.position.set(200, 0, 0);
scene.add(object);
object = new THREE.Mesh(new THREE.CylinderGeometry(25, 75, 100, 40, 5), material);
object.position.set(400, 0, 0);
scene.add(object);
//
var points: THREE.Vector2[] = [];
for (var i = 0; i < 50; i++) {
points.push(new THREE.Vector2(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, 0));
}
object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material);
object.position.set(-400, 0, -200);
scene.add(object);
object = new THREE.Mesh(new THREE.TorusGeometry(50, 20, 20, 20), material);
object.position.set(-200, 0, -200);
scene.add(object);
object = new THREE.Mesh(new THREE.TorusKnotGeometry(50, 10, 50, 20), material);
object.position.set(0, 0, -200);
scene.add(object);
object = new THREE.Mesh(
new THREE.ParametricGeometry(
(u:number, v:number, dest:THREE.Vector3):void => {
dest.set(u, v, 0);
},
25,
25
)
);
object = new THREE.AxesHelper(50);
object.position.set(200, 0, -200);
scene.add(object);
object = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 50);
object.position.set(400, 0, -200);
scene.add(object);
//
/*
* Inserting a new Canvas' WebGL rendering context
* (https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
*/
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
renderer = new THREE.WebGLRenderer({ antialias: true, context: gl });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos(timer) * 800;
camera.position.z = Math.sin(timer) * 800;
camera.lookAt(scene.position);
for (var i = 0, l = scene.children.length; i < l; i++) {
var object = scene.children[i];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
renderer.render(scene, camera);
}
}

96
types/three/test/webgl/webgl_helpers.ts
View File

@ -1,96 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_helpers.html
() => {
var scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var camera: THREE.PerspectiveCamera, light: THREE.PointLight;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
light = new THREE.PointLight();
light.position.set(200, 100, 150);
scene.add(light);
scene.add(new THREE.PointLightHelper(light, 5));
var gridHelper = new THREE.GridHelper(200, 10);
gridHelper.setColors(0x0000ff, 0x808080);
gridHelper.position.y = - 150;
scene.add(gridHelper);
var plane = new THREE.Plane(new THREE.Vector3(1, 1, 0.2), 3);
var planeHelper = new THREE.PlaneHelper(plane, 1, 0xffff00);
scene.add(planeHelper);
var loader = new THREE.JSONLoader();
loader.load('obj/leeperrysmith/LeePerrySmith.js', function (geometry, materials) {
var material = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.multiplyScalar(50);
scene.add(mesh);
scene.add(new THREE.FaceNormalsHelper(mesh, 10));
scene.add(new THREE.VertexNormalsHelper(mesh, 10));
var helper = new THREE.WireframeHelper(mesh);
var wireframeMaterial = helper.material as THREE.Material;
wireframeMaterial.depthTest = false;
wireframeMaterial.opacity = 0.25;
wireframeMaterial.transparent = true;
scene.add(helper);
scene.add(new THREE.BoxHelper(mesh));
});
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
var time = - performance.now() * 0.0003;
camera.position.x = 400 * Math.cos(time);
camera.position.z = 400 * Math.sin(time);
camera.lookAt(scene.position);
light.position.x = Math.sin(time * 1.7) * 300;
light.position.y = Math.cos(time * 1.5) * 400;
light.position.z = Math.cos(time * 1.3) * 300;
renderer.render(scene, camera);
}
}

149
types/three/test/webgl/webgl_interactive_cubes.ts
View File

@ -1,149 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes.html
() => {
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, raycaster: THREE.Raycaster, renderer: THREE.WebGLRenderer;
var mouse = new THREE.Vector2(), INTERSECTED: THREE.Mesh | null;
var radius = 100, theta = 0;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff, 1);
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++) {
var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
object.scale.z = Math.random() + 0.5;
scene.add(object);
}
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);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
document.addEventListener('mousemove', onDocumentMouseMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event: MouseEvent) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
let INTERSECTED_currentHex = 0;
function render() {
theta += 0.1;
camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta));
camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta));
camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
camera.lookAt(scene.position);
camera.updateMatrixWorld(false);
// find intersections
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) (INTERSECTED.material as THREE.MeshLambertMaterial).emissive.setHex(INTERSECTED_currentHex);
INTERSECTED = intersects[0].object as THREE.Mesh;
INTERSECTED_currentHex = (INTERSECTED.material as THREE.MeshLambertMaterial).emissive.getHex();
(INTERSECTED.material as THREE.MeshLambertMaterial).emissive.setHex(0xff0000);
}
} else {
if (INTERSECTED) (INTERSECTED.material as THREE.MeshLambertMaterial).emissive.setHex(INTERSECTED_currentHex);
INTERSECTED = null;
}
renderer.render(scene, camera);
}
}

316
types/three/test/webgl/webgl_interactive_raycasting_points.ts
View File

@ -1,316 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_sprites.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material:THREE.SpriteMaterial;
var container:HTMLElement;
var pcBuffer:THREE.Points;
var v:any;
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
var renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, stats: Stats;
var pointclouds: THREE.Points[];
var raycaster: THREE.Raycaster;
var mouse = new THREE.Vector2();
var intersection: THREE.Intersection | null = null;
var spheres: THREE.Mesh[] = [];
var spheresIndex = 0;
var clock: THREE.Clock;
var threshold = 0.1;
var pointSize = 0.05;
var width = 150;
var length = 150;
var rotateY = new THREE.Matrix4().makeRotationY(0.005);
init();
animate();
function generatePointCloudGeometry(color: THREE.Color, width: number, length: number) {
var geometry = new THREE.BufferGeometry();
var numPoints = width * length;
var positions = new Float32Array(numPoints * 3);
var colors = new Float32Array(numPoints * 3);
var k = 0;
for (var i = 0; i < width; i++) {
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 z = v - 0.5;
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;
k++;
}
}
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeBoundingBox();
return geometry;
}
function generatePointcloud(color: THREE.Color, width: number, length: number) {
var geometry = generatePointCloudGeometry(color, width, length);
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
var pointcloud = new THREE.Points(geometry, material);
return pointcloud;
}
function generateIndexedPointcloud(color: THREE.Color, width: number, length: number) {
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array(numPoints);
var k = 0;
for (var i = 0; i < width; i++) {
for (var j = 0; j < length; j++) {
indices[k] = k;
k++;
}
}
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
var pointcloud = new THREE.Points(geometry, material);
return pointcloud;
}
function generateIndexedWithOffsetPointcloud(color: THREE.Color, width: number, length: number) {
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array(numPoints);
var k = 0;
for (var i = 0; i < width; i++) {
for (var j = 0; j < length; j++) {
indices[k] = k;
k++;
}
}
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
geometry.addDrawCall(0, indices.length);
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
var pointcloud = new THREE.Points(geometry, material);
return pointcloud;
}
function generateRegularPointcloud(color: THREE.Color, width: number, length: number) {
var geometry = new THREE.Geometry();
var colors: THREE.Color[] = [];
var k = 0;
for (var i = 0; i < width; i++) {
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 z = v - 0.5;
var v2 = new THREE.Vector3(x, y, z);
geometry.vertices.push(v2);
var intensity = ( y + 0.1 ) * 7;
colors[k] = ( color.clone().multiplyScalar(intensity) );
k++;
}
}
geometry.colors = colors;
geometry.computeBoundingBox();
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
var pointcloud = new THREE.Points(geometry, material);
return pointcloud;
}
function init() {
var 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));
//
var 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 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);
pointclouds = [pcBuffer, pcIndexed, pcIndexedOffset, pcRegular];
//
var sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, flatShading: true});
for (var i = 0; i < 40; i++) {
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
spheres.push(sphere);
}
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = threshold;
//
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove(event: MouseEvent) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
var toggle = 0;
function render() {
camera.applyMatrix(rotateY);
camera.updateMatrixWorld(false);
raycaster.setFromCamera(mouse, camera);
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;
toggle = 0;
}
for (var i = 0; i < spheres.length; i++) {
var sphere = spheres[i];
sphere.scale.multiplyScalar(0.98);
sphere.scale.clampScalar(0.01, 1);
}
toggle += clock.getDelta();
renderer.render(scene, camera);
}
}

167
types/three/test/webgl/webgl_lensflares.ts
View File

@ -1,167 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_lensflares.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var controls: any;
// -------
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 15000);
camera.position.z = 250;
controls = new THREE.FlyControls(camera);
controls.movementSpeed = 2500;
controls.domElement = container;
controls.rollSpeed = Math.PI / 6;
controls.autoForward = false;
controls.dragToLook = false
// scene
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 3500, 15000);
scene.fog.color.setHSL(0.51, 0.4, 0.01);
// world
var s = 250;
var cube = new THREE.BoxGeometry(s, s, s);
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 50 });
for (var i = 0; i < 3000; i++) {
var mesh = new THREE.Mesh(cube, material);
mesh.position.x = 8000 * (2.0 * Math.random() - 1.0);
mesh.position.y = 8000 * (2.0 * Math.random() - 1.0);
mesh.position.z = 8000 * (2.0 * Math.random() - 1.0);
mesh.rotation.x = Math.random() * Math.PI;
mesh.rotation.y = Math.random() * Math.PI;
mesh.rotation.z = Math.random() * Math.PI;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add(mesh);
}
// lights
var ambient = new THREE.AmbientLight(0xffffff);
ambient.color.setHSL(0.1, 0.3, 0.2);
scene.add(ambient);
var dirLight = new THREE.DirectionalLight(0xffffff, 0.125);
dirLight.position.set(0, -1, 0).normalize();
scene.add(dirLight);
dirLight.color.setHSL(0.1, 0.7, 0.5);
// lens flares
var textureFlare0 = THREE.ImageUtils.loadTexture("textures/lensflare/lensflare0.png");
var textureFlare2 = THREE.ImageUtils.loadTexture("textures/lensflare/lensflare2.png");
var textureFlare3 = THREE.ImageUtils.loadTexture("textures/lensflare/lensflare3.png");
addLight(0.55, 0.9, 0.5, 5000, 0, -1000);
addLight(0.08, 0.8, 0.5, 0, 0, -1000);
addLight(0.995, 0.5, 0.9, 5000, 5000, -1000);
function addLight(h: number, s: number, l: number, x: number, y: number, z: number) {
var light = new THREE.PointLight(0xffffff, 1.5, 4500);
light.color.setHSL(h, s, l);
light.position.set(x, y, z);
scene.add(light);
var flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(h, s, l + 0.5);
var lensFlare = new THREE.LensFlare();
lensFlare.addElement(new THREE.LensFlareElement(textureFlare2, 512, 0.0));
lensFlare.addElement(new THREE.LensFlareElement(textureFlare3, 512, 0.0));
lensFlare.position.copy(light.position);
scene.add(lensFlare);
}
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
renderer.gammaInput = true;
renderer.gammaOutput = true;
// stats
stats = new Stats();
container.appendChild(stats.dom);
// events
window.addEventListener('resize', onWindowResize, false);
}
//
function onWindowResize(event: Event) {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
}
}

213
types/three/test/webgl/webgl_lights_hemisphere.ts
View File

@ -1,213 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_lights_hemisphere.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var morph: any;
// -------
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, dirLight: THREE.DirectionalLight, hemiLight: THREE.HemisphereLight;
var mixers: THREE.AnimationMixer[] = [];
var stats: Stats;
var clock = new THREE.Clock();
init();
animate();
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.set( 0, 0, 250 );
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
scene.fog.color.setHSL( 0.6, 0, 1 );
/*
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.15;
*/
// LIGHTS
hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 500, 0 );
scene.add( hemiLight );
//
dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 50 );
scene.add( dirLight );
dirLight.castShadow = true;
dirLight.shadowMapWidth = 2048;
dirLight.shadowMapHeight = 2048;
var d = 50;
dirLight.shadowCameraLeft = -d;
dirLight.shadowCameraRight = d;
dirLight.shadowCameraTop = d;
dirLight.shadowCameraBottom = -d;
dirLight.shadowCameraFar = 3500;
dirLight.shadowBias = -0.0001;
//dirLight.shadowCameraVisible = true;
// GROUND
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x050505 } );
groundMat.color.setHSL( 0.095, 1, 0.75 );
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.rotation.x = -Math.PI/2;
ground.position.y = -33;
scene.add( ground );
ground.receiveShadow = true;
// SKYDOME
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
topColor: { value: new THREE.Color( 0x0077ff ) },
bottomColor: { value: new THREE.Color( 0xffffff ) },
offset: { value: 33 },
exponent: { value: 0.6 }
};
uniforms.topColor.value.copy( hemiLight.color );
scene.fog.color.copy( uniforms.bottomColor.value );
var skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
var sky = new THREE.Mesh( skyGeo, skyMat );
scene.add( sky );
// MODEL
var loader = new THREE.JSONLoader();
loader.load( "models/animated/flamingo.js", function( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, flatShading: true } );
var mesh = new THREE.Mesh( geometry, material );
var s = 0.35;
mesh.scale.set( s, s, s );
mesh.position.y = 15;
mesh.rotation.y = -1;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
var mixer = new THREE.AnimationMixer( mesh );
mixers.push( mixer );
} );
// 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.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.cullFace = THREE.CullFaceBack;
// STATS
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onKeyDown ( event: KeyboardEvent ) {
switch ( event.keyCode ) {
case 72: // h
hemiLight.visible = !hemiLight.visible;
break;
case 68: // d
dirLight.visible = !dirLight.visible;
break;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
//controls.update();
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( delta );
}
renderer.render( scene, camera );
}
}

211
types/three/test/webgl/webgl_lines_colors.ts
View File

@ -1,211 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_colors.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var hilbert3D: any;
var stats: Stats;
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
var effectFXAA: THREE.ShaderPass;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, material: THREE.LineBasicMaterial, composer: THREE.EffectComposer;
init();
animate();
function init() {
var i: number, container: HTMLDivElement;
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(33, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 700;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
container.appendChild(renderer.domElement);
var geometry = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D(new THREE.Vector3(0, 0, 0), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7),
colors: THREE.Color[] = [],
colors2: THREE.Color[] = [],
colors3: THREE.Color[] = [];
for (i = 0; i < points.length; i++) {
geometry.vertices.push(points[i]);
colors[i] = new THREE.Color(0xffffff);
colors[i].setHSL(0.6, 1.0, Math.max(0, (200 - points[i].x) / 400) * 0.5 + 0.5);
colors2[i] = new THREE.Color(0xffffff);
colors2[i].setHSL(0.3, 1.0, Math.max(0, (200 + points[i].x) / 400) * 0.5);
colors3[i] = new THREE.Color(0xffffff);
colors3[i].setHSL(i / points.length, 1.0, 0.5);
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
// lines
material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors });
var line: THREE.Line, scale = 0.3, d = 225;
var parameters : [THREE.LineBasicMaterial, number, [number, number, number], THREE.Geometry][] = [
[material, scale * 1.5, [-d, 0, 0], geometry],
[material, scale * 1.5, [0, 0, 0], geometry2],
[material, scale * 1.5, [d, 0, 0], geometry3]
];
for (const p of parameters) {
line = new THREE.Line(p[3], p[0]);
line.scale.x = line.scale.y = line.scale.z = p[1];
line.position.x = p[2][0];
line.position.y = p[2][1];
line.position.z = p[2][2];
scene.add(line);
}
//
stats = new Stats();
//container.appendChild( stats.domElement );
//
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
var renderModel = new THREE.RenderPass(scene, camera);
var effectBloom = new THREE.BloomPass(1.3);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer(renderer);
composer.addPass(renderModel);
composer.addPass(effectFXAA);
composer.addPass(effectBloom);
composer.addPass(effectCopy);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.reset();
}
//
function onDocumentMouseMove(event: MouseEvent) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart(event: TouchEvent) {
if (event.touches.length > 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove(event: TouchEvent) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (- mouseY + 200 - camera.position.y) * .05;
camera.lookAt(scene.position);
var time = Date.now() * 0.0005;
for (var i = 0; i < scene.children.length; i++) {
var object = scene.children[i];
if (object instanceof THREE.Line) object.rotation.y = time * (i % 2 ? 1 : -1);
}
renderer.clear();
composer.render();
}
}

111
types/three/test/webgl/webgl_loader_awd.ts
View File

@ -1,111 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_awd.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, controls: THREE.OrbitControls;
var pointLight: THREE.PointLight;
var trunk: THREE.Object3D;
var loader = new THREE.AWDLoader();
loader.materialFactory = createMaterial;
loader.load('./models/awd/simple/simple.awd', function (_trunk: THREE.Object3D) {
trunk = _trunk;
init();
render();
});
function createMaterial(name: string) {
console.log( name );
var mat = new THREE.MeshPhongMaterial({
color: 0xaaaaaa,
shininess: 20
});
return mat;
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(70, 50, -100);
controls = new THREE.OrbitControls(camera);
scene = new THREE.Scene();
// Add the AWD SCENE
scene.add(trunk);
// Lights
scene.add(new THREE.AmbientLight(0x606060));
var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee);
directionalLight.position.set(.2, -1, .2);
directionalLight.position.normalize();
scene.add(directionalLight);
pointLight = new THREE.PointLight(0xffffff, .6);
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render() {
requestAnimationFrame(render);
var timer = Date.now() * 0.0005;
pointLight.position.x = Math.sin(timer * 4) * 3000;
pointLight.position.y = 600
pointLight.position.z = Math.cos(timer * 4) * 3000;
renderer.render(scene, camera);
stats.update();
}
}

240
types/three/test/webgl/webgl_materials.ts
View File

@ -1,240 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, objects: THREE.Mesh[];
var particleLight: THREE.Mesh;
var materials: (THREE.MeshBasicMaterial |
THREE.MeshPhongMaterial |
THREE.MeshNormalMaterial |
THREE.MeshLambertMaterial |
THREE.MeshFaceMaterial |
THREE.MeshDepthMaterial)[] = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 200, 800);
scene = new THREE.Scene();
// Grid
var line_material = new THREE.LineBasicMaterial({ color: 0x303030 }),
geometry = new THREE.Geometry(),
floor = -75, step = 25;
for (var i = 0; i <= 40; i++) {
geometry.vertices.push(new THREE.Vector3(- 500, floor, i * step - 500));
geometry.vertices.push(new THREE.Vector3(500, floor, i * step - 500));
geometry.vertices.push(new THREE.Vector3(i * step - 500, floor, -500));
geometry.vertices.push(new THREE.Vector3(i * step - 500, floor, 500));
}
var line = new THREE.Line(geometry, line_material, THREE.LinePieces);
scene.add(line);
// Materials
var texture = new THREE.Texture(generateTexture());
texture.needsUpdate = true;
materials.push(new THREE.MeshLambertMaterial({ map: texture, transparent: true }));
materials.push(new THREE.MeshLambertMaterial({ color: 0xdddddd }));
materials.push(new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true }));
materials.push(new THREE.MeshNormalMaterial());
materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending }));
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
materials.push(new THREE.MeshLambertMaterial({ color: 0xdddddd }));
materials.push(new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: false, map: texture, transparent: true }));
materials.push(new THREE.MeshNormalMaterial({}));
materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, wireframe: true }));
materials.push(new THREE.MeshDepthMaterial());
materials.push(new THREE.MeshLambertMaterial({ color: 0x666666, emissive: 0xff0000 }));
materials.push(new THREE.MeshPhongMaterial({ color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, flatShading: false, opacity: 0.9, transparent: true }));
materials.push(new THREE.MeshBasicMaterial({ map: texture, transparent: true }));
// Spheres geometry
var geometry_smooth = new THREE.SphereGeometry(70, 32, 16);
var geometry_flat = new THREE.SphereGeometry(70, 32, 16);
var geometry_pieces = new THREE.SphereGeometry(70, 32, 16); // Extra geometry to be broken down for MeshFaceMaterial
for (var i = 0, l = geometry_pieces.faces.length; i < l; i++) {
var face = geometry_pieces.faces[i];
face.materialIndex = Math.floor(Math.random() * materials.length);
}
// isn't used.
// geometry_pieces.materials = materials;
materials.push(new THREE.MeshFaceMaterial(materials));
objects = [];
var sphere: THREE.Mesh, geometry: THREE.Geometry;
for (var i = 0, l = materials.length; i < l; i++) {
let material = materials[i];
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
(material.flatShading ? geometry_flat : geometry_smooth);
sphere = new THREE.Mesh(geometry, material);
sphere.position.x = (i % 4) * 200 - 400;
sphere.position.z = Math.floor(i / 4) * 200 - 200;
sphere.rotation.x = Math.random() * 200 - 100;
sphere.rotation.y = Math.random() * 200 - 100;
sphere.rotation.z = Math.random() * 200 - 100;
objects.push(sphere);
scene.add(sphere);
}
particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff }));
scene.add(particleLight);
// Lights
scene.add(new THREE.AmbientLight(0x111111));
var directionalLight = new THREE.DirectionalLight( /*Math.random() * */ 0xffffff, 0.125);
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add(directionalLight);
var pointLight = new THREE.PointLight(0xffffff, 1);
particleLight.add(pointLight);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function generateTexture() {
var canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext('2d');
var image = context.getImageData(0, 0, 256, 256);
var x = 0, y = 0;
for (var i = 0, j = 0, l = image.data.length; i < l;) {
x = j % 256;
y = x == 0 ? y + 1 : y;
image.data[i] = 255;
image.data[i + 1] = 255;
image.data[i + 2] = 255;
image.data[i + 3] = Math.floor(x ^ y);
i += 4;
j++;
}
context.putImageData(image, 0, 0);
return canvas;
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var timer = 0.0001 * Date.now();
camera.position.x = Math.cos(timer) * 1000;
camera.position.z = Math.sin(timer) * 1000;
camera.lookAt(scene.position);
for (var i = 0, l = objects.length; i < l; i++) {
var object = objects[i];
object.rotation.x += 0.01;
object.rotation.y += 0.005;
}
(materials[materials.length - 3] as THREE.MeshPhongMaterial).emissive.setHSL(0.54, 1, 0.35 * (0.5 + 0.5 * Math.sin(35 * timer)));
(materials[materials.length - 4] as THREE.MeshLambertMaterial).emissive.setHSL(0.04, 1, 0.35 * (0.5 + 0.5 * Math.cos(35 * timer)));
particleLight.position.x = Math.sin(timer * 7) * 300;
particleLight.position.y = Math.cos(timer * 5) * 400;
particleLight.position.z = Math.cos(timer * 3) * 300;
renderer.render(scene, camera);
}
}

126
types/three/test/webgl/webgl_morphtargets.ts
View File

@ -1,126 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_morphtargets.html
() => {
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLDivElement;
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var mouseX = 0, mouseY = 0;
var mesh: THREE.Mesh;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 15000);
camera.position.z = 500;
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 15000);
var light = new THREE.PointLight(0xff2200);
light.position.set(100, 100, 100);
scene.add(light);
var amblight = new THREE.AmbientLight(0x111111);
scene.add(amblight);
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({ color: 0xffffff, morphTargets: true });
// construct 8 blend shapes
for (var i = 0; i < geometry.vertices.length; i++) {
var vertices: THREE.Vector3[] = [];
for (var v = 0; v < geometry.vertices.length; v++) {
vertices.push(geometry.vertices[v].clone());
if (v === i) {
vertices[vertices.length - 1].x *= 2;
vertices[vertices.length - 1].y *= 2;
vertices[vertices.length - 1].z *= 2;
}
}
geometry.morphTargets.push({ name: "target" + i, vertices: vertices });
}
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x222222);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event: MouseEvent) {
mouseX = (event.clientX - windowHalfX);
mouseY = (event.clientY - windowHalfY) * 2;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.y += 0.01;
//mesh.morphTargetInfluences[ 0 ] = Math.sin( mesh.rotation.y ) * 0.5 + 0.5;
//camera.position.x += ( mouseX - camera.position.x ) * .005;
camera.position.y += (- mouseY - camera.position.y) * .01;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}

153
types/three/test/webgl/webgl_points_billboards.ts
View File

@ -1,153 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_particles_billboards.html
() => {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container: HTMLDivElement, stats: Stats;
var camera: THREE.PerspectiveCamera,
scene: THREE.Scene,
renderer: THREE.WebGLRenderer,
particles: THREE.Points,
geometry: THREE.Geometry,
material: THREE.PointsMaterial,
i: number,
h: number,
color: THREE.Color,
sprite: THREE.Texture;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
geometry = new THREE.Geometry();
sprite = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" );
for ( i = 0; i < 10000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = 2000 * Math.random() - 1000;
vertex.y = 2000 * Math.random() - 1000;
vertex.z = 2000 * Math.random() - 1000;
geometry.vertices.push( vertex );
}
material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7 );
particles = new THREE.Points( geometry, material );
scene.add( particles );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild( stats.dom );
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event: MouseEvent ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event: TouchEvent ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event: TouchEvent ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSL( h, 0.5, 0.5 );
renderer.render( scene, camera );
}
}

87
types/three/test/webgl/webgl_postprocessing.ts
View File

@ -1,87 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing.html
() => {
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, composer: THREE.EffectComposer;
var object: THREE.Object3D, light: THREE.DirectionalLight;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 1000);
object = new THREE.Object3D();
scene.add(object);
var geometry = new THREE.SphereGeometry(1, 4, 4);
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
for (var i = 0; i < 100; i++) {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
mesh.position.multiplyScalar(Math.random() * 400);
mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
object.add(mesh);
}
scene.add(new THREE.AmbientLight(0x222222));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
// postprocessing
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
var effect = new THREE.ShaderPass(THREE.DotScreenShader);
effect.uniforms['scale'].value = 4;
composer.addPass(effect);
var effect = new THREE.ShaderPass(THREE.RGBShiftShader);
effect.uniforms['amount'].value = 0.0015;
effect.renderToScreen = true;
composer.addPass(effect);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
object.rotation.x += 0.005;
object.rotation.y += 0.01;
composer.render();
}
}

84
types/three/test/webgl/webgl_shader.ts
View File

@ -1,84 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_shader.html
() => {
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container: HTMLElement, stats: Stats;
var camera: THREE.Camera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var uniforms: { time: { type: string; value: number; }; resolution: { type: string; value: THREE.Vector2; }; };
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.dom.style.position = 'absolute';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.resolution.value.x = renderer.domElement.width;
uniforms.resolution.value.y = renderer.domElement.height;
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
uniforms.time.value += 0.05;
renderer.render(scene, camera);
}
}

213
types/three/test/webgl/webgl_sprites.ts
View File

@ -1,213 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_sprites.html
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material: THREE.SpriteMaterial;
// -------
var camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
var cameraOrtho: THREE.OrthographicCamera, sceneOrtho: THREE.Scene;
var spriteTL: THREE.Sprite, spriteTR: THREE.Sprite, spriteBL: THREE.Sprite, spriteBR: THREE.Sprite, spriteC: THREE.Sprite;
var mapC: THREE.Texture;
var group: THREE.Group;
init();
animate();
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
camera.position.z = 1500;
cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
cameraOrtho.position.z = 10;
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
sceneOrtho = new THREE.Scene();
// create sprites
var amount = 200;
var radius = 500;
var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png", undefined, createHUDSprites );
var mapB = THREE.ImageUtils.loadTexture( "textures/sprite1.png" );
mapC = THREE.ImageUtils.loadTexture( "textures/sprite2.png" );
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 } );
for ( var a = 0; a < amount; a ++ ) {
var x = Math.random() - 0.5;
var y = Math.random() - 0.5;
var z = Math.random() - 0.5;
if ( z < 0 ) {
material = materialB.clone();
} else {
material = materialC.clone();
material.color.setHSL( 0.5 * Math.random(), 0.75, 0.5 );
material.map.offset.set( -0.5, -0.5 );
material.map.repeat.set( 2, 2 );
}
var sprite = new THREE.Sprite( material );
sprite.position.set( x, y, z );
sprite.position.normalize();
sprite.position.multiplyScalar( radius );
group.add( sprite );
}
scene.add( group );
// 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
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function createHUDSprites ( texture: THREE.Texture ) {
var material = new THREE.SpriteMaterial( { map: texture } );
var width = material.map.image.width;
var height = material.map.image.height;
spriteTL = new THREE.Sprite( material );
spriteTL.scale.set( width, height, 1 );
sceneOrtho.add( spriteTL );
spriteTR = new THREE.Sprite( material );
spriteTR.scale.set( width, height, 1 );
sceneOrtho.add( spriteTR );
spriteBL = new THREE.Sprite( material );
spriteBL.scale.set( width, height, 1 );
sceneOrtho.add( spriteBL );
spriteBR = new THREE.Sprite( material );
spriteBR.scale.set( width, height, 1 );
sceneOrtho.add( spriteBR );
spriteC = new THREE.Sprite( material );
spriteC.scale.set( width, height, 1 );
sceneOrtho.add( spriteC );
updateHUDSprites();
}
function updateHUDSprites () {
var width = window.innerWidth / 2;
var height = window.innerHeight / 2;
var material = spriteTL.material as THREE.SpriteMaterial;
var imageWidth = material.map.image.width / 2;
var imageHeight = material.map.image.height / 2;
spriteTL.position.set( - width + imageWidth, height - imageHeight, 1 ); // top left
spriteTR.position.set( width - imageWidth, height - imageHeight, 1 ); // top right
spriteBL.position.set( - width + imageWidth, - height + imageHeight, 1 ); // bottom left
spriteBR.position.set( width - imageWidth, - height + imageHeight, 1 ); // bottom right
spriteC.position.set( 0, 0, 1 ); // center
}
function onWindowResize() {
var width = window.innerWidth;
var height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
cameraOrtho.left = - width / 2;
cameraOrtho.right = width / 2;
cameraOrtho.top = height / 2;
cameraOrtho.bottom = - height / 2;
cameraOrtho.updateProjectionMatrix();
updateHUDSprites();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = Date.now() / 1000;
for ( var i = 0, l = group.children.length; i < l; i ++ ) {
var sprite = group.children[ i ] as THREE.Sprite;
var material = sprite.material as THREE.SpriteMaterial;
var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
var imageWidth = 1;
var imageHeight = 1;
if ( material.map && material.map.image && material.map.image.width ) {
imageWidth = material.map.image.width;
imageHeight = material.map.image.height;
}
material.rotation += 0.1 * ( i / l );
sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
if ( material.map !== mapC ) {
material.opacity = Math.sin( time + sprite.position.x * 0.01 ) * 0.4 + 0.6;
}
}
group.rotation.x = time * 0.5;
group.rotation.y = time * 0.75;
group.rotation.z = time * 1.0;
renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( sceneOrtho, cameraOrtho );
}
}

19
types/three/test/webvr/webvr.ts
View File

@ -1,19 +0,0 @@
// WebVRManager support
() => {
const renderer = new THREE.WebGLRenderer();
renderer.vr.enabled = true;
const camera = new THREE.PerspectiveCamera();
const vrCamera = renderer.vr.getCamera(camera);
const display: VRDisplay = renderer.vr.getDevice();
renderer.vr.setDevice(display);
const obj = new THREE.Object3D();
renderer.vr.setPoseTarget(obj);
renderer.vr.dispose();
const scene = new THREE.Scene();
const render = function() {
renderer.render(scene, camera);
}
renderer.animate(render);
}

40
types/three/three-FirstPersonControls.d.ts vendored
View File

@ -1,40 +0,0 @@
import { Camera, Object3D, Vector3 } from "./three-core";
export class FirstPersonControls {
constructor(object: Camera, domElement?: HTMLElement);
object: Object3D;
target: Vector3;
domElement: HTMLCanvasElement | HTMLDocument;
enabled: boolean;
movementSpeed: number;
lookSpeed: number;
noFly: boolean;
lookVertical: boolean;
autoForward: boolean;
activeLook: boolean;
heightSpeed: boolean;
heightCoef: number;
heightMin: number;
heightMax: number;
constrainVertical: boolean;
verticalMin: number;
verticalMax: number;
autoSpeedFactor: number;
mouseX: number;
mouseY: number;
lat: number;
lon: number;
phi: number;
theta: number;
moveForward: boolean;
moveBackward: boolean;
moveLeft: boolean;
moveRight: boolean;
freeze: boolean;
mouseDragOn: boolean;
update(delta: number): void;
dispose(): void;
}

76
types/three/three-canvasrenderer.d.ts vendored
View File

@ -1,76 +0,0 @@
import {
Camera,
Color,
Material,
MaterialParameters,
Renderer,
Scene
} from "./three-core";
export interface SpriteCanvasMaterialParameters extends MaterialParameters {
color?: number;
program?: (context: CanvasRenderingContext2D, color: Color) => void;
}
export class SpriteCanvasMaterial extends Material {
constructor(parameters?: SpriteCanvasMaterialParameters);
color: Color;
program(context: CanvasRenderingContext2D, color: Color): void;
}
export interface CanvasRendererParameters {
canvas?: HTMLCanvasElement;
devicePixelRatio?: number;
alpha?: boolean;
}
export class CanvasRenderer implements Renderer {
constructor(parameters?: CanvasRendererParameters);
domElement: HTMLCanvasElement;
autoClear: boolean;
sortObjects: boolean;
sortElements: boolean;
info: {render: {vertices: number; faces: number;};};
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;
enableScissorTest(): void;
setClearColor(color: Color | string | number, opacity?: number): void;
// setClearColor(color: string, opacity?: number): void;
// setClearColor(color: number, opacity?: number): void;
setClearColorHex(hex: number, alpha?: number): void;
getClearColor(): Color;
getClearAlpha(): number;
getMaxAnisotropy(): number;
clear(): void;
clearColor(): void;
clearDepth(): void;
clearStencil(): void;
render(scene: Scene, camera: Camera): void;
}

20
types/three/three-colladaLoader.d.ts vendored
View File

@ -1,20 +0,0 @@
import {
Scene
} from "./three-core";
export interface ColladaLoaderReturnType {
}
export class ColladaModel {
animations: any[];
kinematics: any;
scene: Scene;
library: any;
}
export class ColladaLoader {
constructor();
load(url: string, onLoad: (model: ColladaModel) => void, onProgress?: (request: ProgressEvent) => void, onError?:(event: ErrorEvent) => void): void;
setCrossOrigin(value: any): void;
parse(text: string): ColladaModel;
}

2
types/three/three-copyshader.d.ts vendored
View File

@ -1,2 +0,0 @@
import { Shader } from "./three-core";
export var CopyShader: Shader;

7823
types/three/three-core.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

24
types/three/three-css3drenderer.d.ts vendored
View File

@ -1,24 +0,0 @@
import { Camera, Object3D, Scene } from "./three-core";
export class CSS3DObject extends Object3D {
constructor(element: any);
element: any;
}
export class CSS3DSprite extends CSS3DObject {
constructor(element: any);
}
// This renderer does not work in IE. Can be found here for more information.
// https://github.com/mrdoob/three.js/issues/4783
export class CSS3DRenderer {
constructor();
domElement: HTMLElement;
setSize(width: number, height: number): void;
render(scene: Scene, camera: Camera): void;
}

28
types/three/three-ctmloader.d.ts vendored
View File

@ -1,28 +0,0 @@
import { Loader } from "./three-core";
export class CTMLoader extends Loader {
constructor();
/**
* load multiple CTM parts defined in JSON.
* @param url(required)
* @param callback(required)
* @param parameters
*/
loadParts(url: string, callback: () => any, parameters?: any): any;
/**
* Load CTMLoader compressed models
* @param url(required)
* @param callback(required)
* @param parameters
*/
load(url: string, callback: (geo: any) => any, parameters?: any): any;
/**
* create buffergeometry by ctm file.
* @param file(required)
* @param callback(required)
*/
createModel(file: string, callback: () => any): any;
}

16
types/three/three-ddsloader.d.ts vendored
View File

@ -1,16 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/DDSLoader.js
import { CompressedPixelFormat, CompressedTextureLoader } from "./three-core";
export interface Dds {
mipmaps: ImageData[];
width: number;
height: number;
format: CompressedPixelFormat;
mipmapCount: number;
}
export class DDSLoader extends CompressedTextureLoader {
constructor();
parse(buffer: string, loadMipmaps: boolean) : Dds;
}

5
types/three/three-dragcontrols.d.ts vendored
View File

@ -1,5 +0,0 @@
import {Camera, Object3D} from './three-core';
export class DragControls {
constructor(objects: Object3D[], camera: Camera, domElement?: HTMLElement);
}

19
types/three/three-editorcontrols.d.ts vendored
View File

@ -1,19 +0,0 @@
import { Camera, EventDispatcher, Object3D, Vector3 } from "./three-core";
export class EditorControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
enabled: boolean;
center: Vector3;
focus(target: Object3D, frame: boolean): void;
pan(delta: Vector3): void;
zoom(delta: Vector3): void;
rotate(delta: Vector3): void;
dispose(): void;
}

44
types/three/three-effectcomposer.d.ts vendored
View File

@ -1,44 +0,0 @@
import { WebGLRenderTarget, WebGLRenderer } from "./three-core";
import { ShaderPass } from "./three-shaderpass";
export class EffectComposer {
constructor(renderer: WebGLRenderer, renderTarget?: WebGLRenderTarget);
renderTarget1: WebGLRenderTarget;
renderTarget2: WebGLRenderTarget;
writeBuffer: WebGLRenderTarget;
readBuffer: WebGLRenderTarget;
passes: Pass[];
copyPass: ShaderPass;
swapBuffers(): void;
addPass(pass: any): void;
insertPass(pass: any, index: number): void;
render(delta?: number): void;
reset(renderTarget?: WebGLRenderTarget): void;
setSize(width: number, height: number): void;
}
export class Pass{
// if set to true, the pass is processed by the composer
enabled: boolean;
// if set to true, the pass indicates to swap read and write buffer after rendering
needsSwap: boolean;
// if set to true, the pass clears its buffer before rendering
clear: boolean;
// if set to true, the result of the pass is rendered to screen
renderToScreen: boolean;
setSize(width: number, height:number ): void;
render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget, delta: number, maskActive?: boolean): void;
}

12
types/three/three-examples.d.ts vendored
View File

@ -1,12 +0,0 @@
// Things from three.js/examples/ that do not (yet) have their own file
import { EventDispatcher, Shader } from "./three-core";
export var AWDLoader: any;
export var OBJLoader2: any;
export var STLLoader: any;
export var FlyControls: any;
export var BloomPass: any;
export var DotScreenShader: Shader;
export var RGBShiftShader: Shader;
export var FXAAShader: Shader;

17
types/three/three-fbxloader.d.ts vendored
View File

@ -1,17 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/FBXLoader.js
import { LoadingManager } from "./three-core";
import { AnimationClip, Group } from "./three-core";
interface IFbxSceneGraph extends Group {
animations: AnimationClip[];
}
export class FBXLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
load(url: string, onLoad: (group: IFbxSceneGraph) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): void;
parse(FBXText: string, resourceDirectory: string) : Group;
}

13
types/three/three-filmpass.d.ts vendored
View File

@ -1,13 +0,0 @@
import { OrthographicCamera, Scene, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, Mesh, IUniform } from "./three-core";
import {Pass} from "./three-effectcomposer";
export class FilmPass extends Pass {
constructor(noiseIntensity?: number, scanlinesIntensity?: number, scanlinesCount?: number, grayscale?: boolean);
scene: Scene;
camera: OrthographicCamera;
uniforms: { [uniform: string]: IUniform };
material: ShaderMaterial;
quad: Mesh;
}

7
types/three/three-gltfexporter.d.ts vendored
View File

@ -1,7 +0,0 @@
import { Object3D } from "./three-core";
export class GLTFExporter {
constructor();
parse(input: Object3D, onCompleted: (gltf: object) => void, options: object): null;
}

29
types/three/three-gltfloader.d.ts vendored
View File

@ -1,29 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js
import {AnimationClip} from "./three-core";
import {Camera} from "./three-core";
import {LoadingManager} from "./three-core";
import {Scene} from "./three-core";
export class GLTF {
animations: AnimationClip[];
scene: Scene;
scenes: Scene[];
cameras: Camera[];
asset: object;
}
export class GLTFLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
path: string;
load(url: string, onLoad: (gltf: GLTF) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void) : void;
setPath(path: string) : GLTFLoader;
setResourcePath(path: string) : GLTFLoader;
setCrossOrigin(value: string): void;
setDRACOLoader(dracoLoader: object): void;
parse(data: ArrayBuffer, path: string, onLoad: (gltf: GLTF) => void, onError?: (event: ErrorEvent) => void) : void;
}

27
types/three/three-lensflare.d.ts vendored
View File

@ -1,27 +0,0 @@
import {Mesh, Camera, Scene, WebGLRenderer, Blending, Vector3, Color, Shader, Texture, BufferGeometry} from "./three-core";
export class LensFlare extends Mesh {
constructor();
type: 'LensFlare';
frustumCulled: false;
renderOrder: number;
addElement(element: LensFlareElement): this;
onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera) => void;
dispose(): void;
isLensflare: true;
}
export class LensFlareElement {
constructor(texture: Texture, size?: number, distance?: number, color?: Color);
texture: Texture;
size: number;
distance: number;
color: Color;
static Shader: Shader;
static Geometry: BufferGeometry
}

71
types/three/three-mapcontrols.d.ts vendored
View File

@ -1,71 +0,0 @@
import {
Camera,
EventDispatcher,
MOUSE,
Object3D,
Vector3
} from "./three-core";
export class MapControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement | HTMLDocument;
// API
enabled: boolean;
target: Vector3;
enableZoom: boolean;
zoomSpeed: number;
minDistance: number;
maxDistance: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
keyPanSpeed: number;
maxZoom: number;
minZoom: number;
panSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableKeys: boolean;
screenSpacePanning: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number };
mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE };
enableDamping: boolean;
dampingFactor: number;
target0: Vector3;
position0: Vector3;
zoom0: number;
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;
saveState(): void;
update(): boolean;
reset(): void;
dispose(): void;
getPolarAngle(): number;
getAzimuthalAngle(): number;
}

15
types/three/three-maskpass.d.ts vendored
View File

@ -1,15 +0,0 @@
import { Camera, Scene, WebGLRenderTarget, WebGLRenderer } from "./three-core";
import { Pass } from "./three-effectcomposer";
export class MaskPass extends Pass {
constructor(scene: Scene, camera: Camera);
scene: Scene;
camera: Camera;
clear: true;
needsSwap: false;
inverse: boolean;
}
export class ClearMaskPass extends Pass {
needsSwap: false;
}

108
types/three/three-mtlloader.d.ts vendored
View File

@ -1,108 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js
import { Material } from "./three-core";
import {LoadingManager} from "./three-core";
import {Mapping} from "./three-core";
import {EventDispatcher} from "./three-core";
import {BufferGeometry} from "./three-core";
import {Side} from "./three-core";
import {Texture} from "./three-core";
import {Vector2} from "./three-core";
import {Wrapping} from "./three-core";
export interface MaterialCreatorOptions {
/**
* side: Which side to apply the material
* THREE.FrontSide (default), THREE.BackSide, THREE.DoubleSide
*/
side?: Side;
/*
* wrap: What type of wrapping to apply for textures
* THREE.RepeatWrapping (default), THREE.ClampToEdgeWrapping, THREE.MirroredRepeatWrapping
*/
wrap?: Wrapping;
/*
* normalizeRGB: RGBs need to be normalized to 0-1 from 0-255
* Default: false, assumed to be already normalized
*/
normalizeRGB?: boolean;
/*
* ignoreZeroRGBs: Ignore values of RGBs (Ka,Kd,Ks) that are all 0's
* Default: false
*/
ignoreZeroRGBs?: boolean;
/*
* invertTrProperty: Use values 1 of Tr field for fully opaque. This option is useful for obj
* exported from 3ds MAX, vcglib or meshlab.
* Default: false
*/
invertTrProperty?: boolean;
}
export class MTLLoader extends EventDispatcher {
constructor(manager?: LoadingManager);
manager: LoadingManager;
materialOptions: MaterialCreatorOptions;
path: string;
texturePath: string;
crossOrigin: boolean;
load(url: string, onLoad: (materialCreator: MaterialCreator) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): void;
parse(text: string) : MaterialCreator;
setPath(path: string) : void;
setTexturePath(path: string) : void;
setBaseUrl(path: string) : void;
setCrossOrigin(value: boolean) : void;
setMaterialOptions(value: MaterialCreatorOptions) : void;
}
export interface MaterialInfo {
ks?: number[];
kd?: number[];
ke?: number[];
map_kd?: string;
map_ks?: string;
map_ke?: string;
norm?: string;
map_bump?: string;
bump?: string;
map_d?: string;
ns?: number;
d?: number;
tr?: number;
}
export interface TexParams {
scale: Vector2;
offset: Vector2;
url: string;
}
export class MaterialCreator {
constructor(baseUrl?: string, options?: MaterialCreatorOptions);
baseUrl : string;
options : MaterialCreatorOptions;
materialsInfo : {[key: string]: MaterialInfo};
materials : {[key: string]: Material};
private materialsArray : Material[];
nameLookup : {[key: string]: number};
side : Side;
wrap : Wrapping;
setCrossOrigin( value: boolean ) : void;
setManager( value: LoadingManager ) : void;
setMaterials( materialsInfo: {[key: string]: MaterialInfo} ) : void;
convert( materialsInfo: {[key: string]: MaterialInfo} ) : {[key: string]: MaterialInfo};
preload() : void;
getIndex( materialName: string ) : Material;
getAsArray() : Material[];
create( materialName: string ) : Material;
createMaterial_( materialName: string ) : Material;
getTextureParams( value: string, matParams: any ) : TexParams;
loadTexture(url: string, mapping?: Mapping, onLoad?: (bufferGeometry: BufferGeometry) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Texture;
}

22
types/three/three-objloader.d.ts vendored
View File

@ -1,22 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js
import { Material } from "./three-core";
import {LoadingManager} from "./three-core";
import {Group} from "./three-core";
import {MaterialCreator} from "./three-mtlloader";
export class OBJLoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
regexp: any;
materials: Material[];
path: string;
load(url: string, onLoad: (group: Group) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): void;
parse(data: string) : Group;
setPath(value: string) : void;
setMaterials(materials: MaterialCreator) : void;
_createParserState() : any;
}

33
types/three/three-octree.d.ts vendored
View File

@ -1,33 +0,0 @@
import { Vector3 } from "./three-core";
export class Octree {
constructor(parameters?: any);
update(): void;
add(object: any, options?: any): any;
addDeferred(object: any, options?: any): any;
addObjectData(object: any, part: any): any;
remove(object: any): any;
extend(octree: Octree): any;
rebuild(): any;
updateObject(object: any): any;
search(position: Vector3, radius: number, organizeByObject: boolean, direction: Vector3): any;
setRoot(root: any): any;
getDepthEnd(): number;
getNodeCountEnd(): number;
getObjectCountEnd(): number;
toConsole(): any;
}

70
types/three/three-orbitcontrols.d.ts vendored
View File

@ -1,70 +0,0 @@
import { Camera, MOUSE, Object3D, Vector3 } from "./three-core";
export class OrbitControls {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement | HTMLDocument;
// API
enabled: boolean;
target: Vector3;
// deprecated
center: Vector3;
enableZoom: boolean;
zoomSpeed: number;
minDistance: number;
maxDistance: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
keyPanSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableKeys: boolean;
keys: {LEFT: number; UP: number; RIGHT: number; BOTTOM: number;};
mouseButtons: {ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE;};
enableDamping: boolean;
dampingFactor: number;
screenSpacePanning: boolean;
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;
dispose(): void;
getPolarAngle(): number;
getAzimuthalAngle(): number;
// EventDispatcher mixins
addEventListener(type: string, listener: (event: any) => void): void;
hasEventListener(type: string, listener: (event: any) => void): boolean;
removeEventListener(type: string, listener: (event: any) => void): void;
dispatchEvent(event: {type: string; target: any;}): void;
}

50
types/three/three-orthographictrackballcontrols.d.ts vendored
View File

@ -1,50 +0,0 @@
import { Camera, EventDispatcher, Vector3 } from "./three-core";
export class OrthographicTrackballControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement;
// API
enabled: boolean;
screen: {left: number; top: number; width: number; height: number};
radius: number;
rotateSpeed: number;
zoomSpeed: number;
panSpeed: number;
noRotate: boolean;
noZoom: boolean;
noPan: boolean;
noRoll: boolean;
staticMoving: boolean;
dynamicDampingFactor: number;
keys: number[];
target: Vector3;
position0: Vector3;
target0: Vector3;
up0: Vector3;
left0: number;
right0: number;
top0: number;
bottom0: number;
update(): void;
reset(): void;
checkDistances(): void;
zoomCamera(): void;
panCamera(): void;
rotateCamera(): void;
handleResize(): void;
handleEvent(event: any): void;
}

40
types/three/three-outlinepass.d.ts vendored
View File

@ -1,40 +0,0 @@
import { Camera, Color, Object3D, Scene, Vector2, MeshBasicMaterial, ShaderMaterial, WebGLRenderTarget, IUniform, Matrix4 } from './three-core';
import {Pass} from "./three-effectcomposer";
export class OutlinePass extends Pass {
constructor(resolution: Vector2, scene: Scene, camera: Camera, selectedObjects?: Object3D[]);
selectedObjects: Object3D[];
renderCamera: Camera;
renderScene: Scene;
visibleEdgeColor: Color;
hiddenEdgeColor: Color;
edgeGlow: number;
usePatternTexture: boolean;
edgeThickness: number;
edgeStrength: number;
downSampleRatio: number;
pulsePeriod: number;
resolution: Vector2;
maskBufferMaterial: MeshBasicMaterial;
prepareMaskMaterial: ShaderMaterial;
renderTargetDepthBuffer: WebGLRenderTarget;
renderTargetMaskDownSampleBuffer: WebGLRenderTarget;
renderTargetBlurBuffer1: WebGLRenderTarget;
renderTargetBlurBuffer2: WebGLRenderTarget;
edgeDetectionMaterial: ShaderMaterial;
separableBlurMaterial: ShaderMaterial;
overlayMaterial: ShaderMaterial;
copyUniforms: { [uniform: string]: IUniform };
materialCopy: ShaderMaterial;
oldClearColor: Color;
tempPulseColor1: Color;
tempPulseColor2: Color;
textureMatrix: Matrix4;
static BlurDirectionX: Vector2;
static BlurDirectionY: Vector2;
dispose(): void;
changeVisibilityOfSelectedObjects(bVisible: boolean): void;
changeVisibilityOfNonSelectedObjects(bVisible: boolean): void;
updateTextureMatrix(): void;
}

101
types/three/three-projector.d.ts vendored
View File

@ -1,101 +0,0 @@
import {
Camera,
Color,
Face3,
Light,
Material,
Object3D,
Scene,
Vector2,
Vector3,
Vector4
} from "./three-core";
// Renderers / Renderables /////////////////////////////////////////////////////////////////////
export class RenderableObject {
constructor();
id: number;
object: any;
z: number;
}
export class RenderableFace {
constructor();
id: number;
v1: RenderableVertex;
v2: RenderableVertex;
v3: RenderableVertex;
normalModel: Vector3;
vertexNormalsModel: Vector3[];
vertexNormalsLength: number;
color: Color;
material: Material;
uvs: Vector2[][];
z: number;
}
export class RenderableVertex {
constructor();
position: Vector3;
positionWorld: Vector3;
positionScreen: Vector4;
visible: boolean;
copy(vertex: RenderableVertex): void;
}
export class RenderableLine {
constructor();
id: number;
v1: RenderableVertex;
v2: RenderableVertex;
vertexColors: Color[];
material: Material;
z: number;
}
export class RenderableSprite {
constructor();
id: number;
object: any;
x: number;
y: number;
z: number;
rotation: number;
scale: Vector2;
material: Material;
}
/**
* Projects points between spaces.
*/
export class Projector {
constructor();
// deprecated.
projectVector(vector: Vector3, camera: Camera): Vector3;
// deprecated.
unprojectVector(vector: Vector3, camera: Camera): Vector3;
/**
* Transforms a 3D scene object into 2D render data that can be rendered in a screen with your renderer of choice, projecting and clipping things out according to the used camera.
* If the scene were a real scene, this method would be the equivalent of taking a picture with the camera (and developing the film would be the next step, using a Renderer).
*
* @param scene scene to project.
* @param camera camera to use in the projection.
* @param sort select whether to sort elements using the Painter's algorithm.
*/
projectScene(scene: Scene, camera: Camera, sortObjects: boolean, sortElements?: boolean): {
objects: Object3D[]; // Mesh, Line or other object
sprites: Object3D[]; // Sprite or Particle
lights: Light[];
elements: Face3[]; // Line, Particle, Face3 or Face4
};
}

22
types/three/three-renderpass.d.ts vendored
View File

@ -1,22 +0,0 @@
import {
Camera,
Color,
Material,
Scene,
WebGLRenderTarget,
WebGLRenderer
} from "./three-core";
import { Pass } from "./three-effectcomposer";
export class RenderPass extends Pass{
constructor(scene: Scene, camera: Camera, overrideMaterial?: Material | null, clearColor?: Color | string | number, clearAlpha?: number);
scene: Scene;
camera: Camera;
overrideMaterial: Material | null | undefined;
clearColor: Color | string | number | undefined;
clearAlpha: number | undefined;
clear: boolean;
needsSwap: false;
clearDepth: false;
}

22
types/three/three-shaderpass.d.ts vendored
View File

@ -1,22 +0,0 @@
import {
OrthographicCamera,
IUniform,
Mesh,
Scene,
Shader,
ShaderMaterial,
WebGLRenderTarget,
WebGLRenderer
} from "./three-core";
import { Pass } from "./three-effectcomposer";
export class ShaderPass extends Pass {
constructor(shader: Shader, textureID?: string);
textureID: string;
uniforms: { [uniform: string]: IUniform };
material: ShaderMaterial;
camera: OrthographicCamera;
scene: Scene;
quad: Mesh;
}

24
types/three/three-smaapass.d.ts vendored
View File

@ -1,24 +0,0 @@
import { WebGLRenderTarget, Texture, IUniform, ShaderMaterial, OrthographicCamera, Scene, Mesh } from "./three-core";
import { Pass } from "./three-effectcomposer";
export class SMAAPass extends Pass {
constructor(width: number, height: number);
edgesRT: WebGLRenderTarget;
weightsRT: WebGLRenderTarget;
areaTexture: Texture;
searchTexture: Texture;
uniformsEdges: { [uniform: string]: IUniform };
materialEdges: ShaderMaterial;
uniformsWeights: { [uniform: string]: IUniform };
materialWeights: ShaderMaterial;
uniformsBlend: { [uniform: string]: IUniform };
materialBlend: ShaderMaterial;
needsSwap: false;
camera: OrthographicCamera;
scene: Scene;
quad: Mesh;
getAreaTexture(): string;
getSearchTexture(): string;
}

19
types/three/three-ssaapass.d.ts vendored
View File

@ -1,19 +0,0 @@
import { Pass } from "./three-effectcomposer";
import { Scene, Camera, Color, IUniform, ShaderMaterial, OrthographicCamera, Mesh } from "./three-core";
export class SSAARenderPass extends Pass {
constructor(scene: Scene, camera: Camera, clearColor?: Color | string | number, clearAlpha?: number);
scene: Scene;
camera: Camera;
sampleLevel: number;
unbiased: boolean;
clearColor: Color | string | number;
clearAlpha: number;
copyUniforms: { [uniform: string]: IUniform };
copyMaterial: ShaderMaterial;
camera2: OrthographicCamera;
scene2: Scene;
quad2: Mesh;
dispose(): void;
static readonly JitterVectors: number[][][];
}

195
types/three/three-tdsloader.d.ts vendored
View File

@ -1,195 +0,0 @@
// https://github.com/codetheorist/three-tds-loader/blob/master/src/index.js
import * as THREE from "./index";
export class TDSLoader {
constructor(three: typeof THREE);
/**
* Load 3ds file from url.
*
* @param url URL for the file.
* @param onLoad onLoad callback, receives group object3D as argument.
* @param onProgress onProgress callback.
* @param onError onError callback.
*/
load: (url: string, onLoad: (object3D: THREE.Object3D) => void, onProgress?: (progress: ProgressEvent) => void, onError?: (event: ErrorEvent) => void) => void;
/**
* Parse arraybuffer data and load 3ds file.
*
* @param arraybuffer Arraybuffer data to be loaded.
* @param path Path for external resources.
* @return Group loaded from 3ds file.
*/
parse: (arraybuffer: ArrayBuffer, path: string) => THREE.Object3D;
/**
* Decode file content to read 3ds data.
*
* @param arraybuffer Arraybuffer data to be loaded.
*/
readFile: (arraybuffer: ArrayBuffer, path: string) => void;
/**
* Read mesh data chunk.
*
* @param data Dataview in use.
*/
readMeshData: (data: DataView, path: string) => void;
/**
* Read named object chunk.
*
* @param data Dataview in use.
*/
readNamedobject: (data: DataView) => void;
/**
* Read material data chunk and add it to the material list.
*
* @param data Dataview in use.
*/
readMaterialEntry: (data: DataView, path: string) => void;
/**
* Read mesh data chunk.
*
* @param data Dataview in use.
*/
readMesh: (data: DataView) => void;
/**
* Read face array data chunk.
*
* @param data Dataview in use.
* @param mesh Mesh to be filled with the data read.
*/
readFaceArray: (data: DataView, mesh: THREE.Mesh) => void;
/**
* Read texture map data chunk.
*
* @param data Dataview in use.
* @return Texture read from this data chunk.
*/
readMap: (data: DataView, path: string) => THREE.Texture;
/**
* Read material group data chunk.
*
* @param data Dataview in use.
* @return object with name and index of the object.
*/
readMaterialGroup: (data: DataView) => object;
/**
* Read a color value.
*
* @param data Dataview.
* @return Color value read..
*/
readColor: (data: DataView) => THREE.Color;
/**
* Read next chunk of data.
*
* @param data Dataview.
* @return Chunk of data read.
*/
readChunk: (data: DataView) => object;
/**
* Set position to the end of the current chunk of data.
*
* @param chunk Data chunk.
*/
endChunk: (chunk: object) => void;
/**
* Move to the next data chunk.
*
* @param data Dataview.
* @param chunk Data chunk.
*/
nextChunk: (data: DataView, chunk: object) => number;
/**
* Reset dataview position.
*/
resetPosition: () => void;
/**
* Read byte value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readByte: (data: DataView) => number;
/**
* Read 32 bit float value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readFloat: (data: DataView) => number;
/**
* Read 32 bit signed integer value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readInt: (data: DataView) => number;
/**
* Read 16 bit signed integer value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readShort: (data: DataView) => number;
/**
* Read 64 bit unsigned integer value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readDWord: (data: DataView) => number;
/**
* Read 32 bit unsigned integer value.
*
* @param data Dataview to read data from.
* @return Data read from the dataview.
*/
readWord: (data: DataView) => number;
/**
* Read string value.
*
* @param data Dataview to read data from.
* @param maxLength Max size of the string to be read.
* @return Data read from the dataview.
*/
readString: (data: DataView, maxLength: number) => string;
/**
* Set resource path used to determine the file path to attached resources.
*
* @param path Path to resources.
* @return Self for chaining.
*/
setPath: (path: string) => TDSLoader;
/**
* Print debug message to the console.
*
* Is controlled by a flag to show or hide debug messages.
*
* @param message Debug message to print to the console.
*/
debugMessage: (message: string) => void;
}

11
types/three/three-tgaloader.d.ts vendored
View File

@ -1,11 +0,0 @@
// https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/TGALoader.js
import { LoadingManager, Texture } from "./three-core";
export class TGALoader {
constructor(manager?: LoadingManager);
manager: LoadingManager;
load(url: string, onLoad?: (texture: Texture) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Texture;
}

47
types/three/three-trackballcontrols.d.ts vendored
View File

@ -1,47 +0,0 @@
import { Camera, EventDispatcher, Vector3 } from "./three-core";
export class TrackballControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement;
// API
enabled: boolean;
screen: {left: number; top: number; width: number; height: number};
rotateSpeed: number;
zoomSpeed: number;
panSpeed: number;
noRotate: boolean;
noZoom: boolean;
noPan: boolean;
noRoll: boolean;
staticMoving: boolean;
dynamicDampingFactor: number;
minDistance: number;
maxDistance: number;
keys: number[];
target: Vector3;
position0: Vector3;
target0: Vector3;
up0: Vector3;
update(): void;
reset(): void;
dispose(): void;
checkDistances(): void;
zoomCamera(): void;
panCamera(): void;
rotateCamera(): void;
handleResize(): void;
handleEvent(event: any): void;
}

32
types/three/three-transformcontrols.d.ts vendored
View File

@ -1,32 +0,0 @@
import { Camera, Object3D } from "./three-core";
export class TransformControls extends Object3D {
constructor(object: Camera, domElement?: HTMLElement);
size: number;
space: string;
object: Object3D;
update(): void;
detach(): void;
attach(object: Object3D): void;
getMode(): string;
setMode(mode: string): void;
setSnap(snap: any): void;
setSize(size: number): void;
setSpace(space: string): void;
setTranslationSnap(size: number): void;
setRotationSnap(size: number): void;
}

32
types/three/three-unrealbloompass.d.ts vendored
View File

@ -1,32 +0,0 @@
import { Pass } from "./three-effectcomposer";
import { Vector2, ShaderMaterial, WebGLRenderTarget, IUniform, Color, Scene, Mesh, OrthographicCamera } from "./three-core";
export class UnrealBloomPass extends Pass {
constructor(resolution?: Vector2, strength?: number, radius?: number, threshold?: number);
strength: number;
resolution: Vector2;
nMips: number;
renderTargetBright: WebGLRenderTarget;
highPassUniforms: { [uniform: string]: IUniform };
renderTargetsHorizontal: WebGLRenderTarget[];
renderTargetsVertical: WebGLRenderTarget[];
materialHighPassFilter: ShaderMaterial;
separableBlurMaterials: ShaderMaterial[];
compositeMaterial: ShaderMaterial;
bloomTintColors: Color[];
copyUniforms: { [uniform: string]: IUniform };
materialCopy: ShaderMaterial;
needsSwap: false;
oldClearAlpha: number;
oldClearColor: Color;
camera: OrthographicCamera;
scene: Scene;
quad: Mesh;
radius: number;
threshold: number;
dispose(): void;
getSeparableBlurMaterial(): ShaderMaterial;
getCompositeMaterial(): ShaderMaterial;
static BlurDirectionX: Vector2;
static BlurDirectionY: Vector2;
}

16
types/three/three-vrcontrols.d.ts vendored
View File

@ -1,16 +0,0 @@
import { Camera } from "./three-core";
export class VRControls {
constructor(camera: Camera, callback?: (param: string) => void);
/**
* Update VR Instance Tracking
*/
update(): void;
zeroSensor(): void;
scale: number;
setVRDisplay(display: VRDisplay): void;
}

33
types/three/three-vreffect.d.ts vendored
View File

@ -1,33 +0,0 @@
import { Camera, Matrix4, Renderer, Scene } from "./three-core";
export class VREffect {
constructor(renderer: Renderer, callback?: (params: string) => void);
render(scene: Scene, camera: Camera): void;
setSize(width: number, height: number): void;
setFullScreen(flag: boolean): void;
startFullscreen(): void;
FovToNDCScaleOffset(fov: VRFov): VREffectOffset;
FovPortToProjection(fov: VRFov, rightHanded: boolean, zNear: number, zFar: number): Matrix4;
FovToProjection(fov: VRFov, rightHanded: boolean, zNear: number, zFar: number): Matrix4;
setVRDisplay(display: VRDisplay): void;
}
export interface VRFov {
leftTan: number;
rightTan: number;
upTan: number;
downTan: number;
}
export interface VREffectOffset {
scale: number;
offset: number;
}

64
types/three/tsconfig.json
View File

@ -1,64 +0,0 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": false,
"strictNullChecks": false,
"strictFunctionTypes": false,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"detector.d.ts",
"test/references.ts",
"test/docs/scenes/bones_browser.ts",
"test/math/test_unit_math.ts",
"test/webgl/webgl_animation_cloth.ts",
"test/webgl/webgl_animation_skinning_morph.ts",
"test/webgl/webgl_buffergeometry.ts",
"test/webgl/webgl_camera.ts",
"test/webgl/webgl_custom_attributes.ts",
"test/webgl/webgl_geometries.ts",
"test/webgl/webgl_geometries_with_context.ts",
"test/webgl/webgl_helpers.ts",
"test/webgl/webgl_interactive_cubes.ts",
"test/webgl/webgl_interactive_raycasting_points.ts",
"test/webgl/webgl_lensflares.ts",
"test/webgl/webgl_lights_hemisphere.ts",
"test/webgl/webgl_lines_colors.ts",
"test/webgl/webgl_loader_awd.ts",
"test/webgl/webgl_materials.ts",
"test/webgl/webgl_morphtargets.ts",
"test/webgl/webgl_points_billboards.ts",
"test/webgl/webgl_postprocessing.ts",
"test/webgl/webgl_shader.ts",
"test/webgl/webgl_sprites.ts",
"test/css3d/css3d_periodictable.ts",
"test/css3d/css3d_sprites.ts",
"test/canvas/canvas_camera_orthographic.ts",
"test/canvas/canvas_geometry_cube.ts",
"test/canvas/canvas_interactive_cubes_tween.ts",
"test/canvas/canvas_lights_pointlights.ts",
"test/canvas/canvas_materials.ts",
"test/canvas/canvas_particles_floor.ts",
"test/examples/detector.ts",
"test/examples/effects/vreffect.ts",
"test/examples/controls/vrcontrols.ts",
"test/examples/ctm/ctmloader.ts",
"test/examples/octree.ts",
"test/examples/loaders/webgl_loader_obj_mtl.ts",
"test/examples/loaders/tdsloader.ts",
"test/examples/exporters/gltf-exporter.ts",
"test/webvr/webvr.ts"
]
}

80
types/three/tslint.json
View File

@ -1,80 +0,0 @@
{
"extends": "dtslint/dt.json",
"rules": {
"adjacent-overload-signatures": false,
"array-type": false,
"arrow-return-shorthand": false,
"ban-types": false,
"callable-types": false,
"comment-format": false,
"dt-header": false,
"npm-naming": false,
"eofline": false,
"export-just-namespace": false,
"import-spacing": false,
"interface-name": false,
"interface-over-type-literal": false,
"jsdoc-format": false,
"max-line-length": false,
"member-access": false,
"new-parens": false,
"no-any-union": false,
"no-boolean-literal-compare": false,
"no-conditional-assignment": false,
"no-consecutive-blank-lines": false,
"no-construct": false,
"no-declare-current-package": false,
"no-duplicate-imports": false,
"no-duplicate-variable": false,
"no-empty-interface": false,
"no-for-in-array": false,
"no-inferrable-types": false,
"no-internal-module": false,
"no-irregular-whitespace": false,
"no-mergeable-namespace": false,
"no-misused-new": false,
"no-namespace": false,
"no-object-literal-type-assertion": false,
"no-padding": false,
"no-redundant-jsdoc": false,
"no-redundant-jsdoc-2": false,
"no-redundant-undefined": false,
"no-reference-import": false,
"no-relative-import-in-test": false,
"no-self-import": false,
"no-single-declare-module": false,
"no-string-throw": false,
"no-unnecessary-callback-wrapper": false,
"no-unnecessary-class": false,
"no-unnecessary-generics": false,
"no-unnecessary-qualifier": false,
"no-unnecessary-type-assertion": false,
"no-useless-files": false,
"no-var-keyword": false,
"no-var-requires": false,
"no-void-expression": false,
"no-trailing-whitespace": false,
"object-literal-key-quotes": false,
"object-literal-shorthand": false,
"one-line": false,
"one-variable-per-declaration": false,
"only-arrow-functions": false,
"prefer-conditional-expression": false,
"prefer-const": false,
"prefer-declare-function": false,
"prefer-for-of": false,
"prefer-method-signature": false,
"prefer-template": false,
"radix": false,
"semicolon": false,
"space-before-function-paren": false,
"space-within-parens": false,
"strict-export-declare-modifiers": false,
"trim-file": false,
"triple-equals": false,
"typedef-whitespace": false,
"unified-signatures": false,
"void-return": false,
"whitespace": false
}
}