mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-06-28 22:30:01 +00:00
Divided test scripts for ease of update.
This commit is contained in:
satoru kimura
146
threejs/tests/canvas/canvas_camera_orthographic.ts
Normal file
146
threejs/tests/canvas/canvas_camera_orthographic.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_camera_orthographic.html
|
||||
|
||||
() => {
|
||||
|
||||
var container, stats;
|
||||
var camera, scene, renderer;
|
||||
|
||||
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 material1 = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 });
|
||||
|
||||
var line = new THREE.Line(geometry, material1);
|
||||
line.type = THREE.LinePieces;
|
||||
scene.add(line);
|
||||
|
||||
// Cubes
|
||||
|
||||
var geometry = new THREE.BoxGeometry(50, 50, 50);
|
||||
var material2 = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, overdraw: 0.5 });
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
|
||||
var cube = new THREE.Mesh(geometry, 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.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
187
threejs/tests/canvas/canvas_geometry_cube.ts
Normal file
187
threejs/tests/canvas/canvas_geometry_cube.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_cube.html
|
||||
|
||||
() => {
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
var cube, plane;
|
||||
|
||||
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.CubeGeometry(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 geometry = new THREE.PlaneGeometry(200, 200);
|
||||
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI / 2));
|
||||
|
||||
var material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, overdraw: 0.5 });
|
||||
|
||||
plane = new THREE.Mesh(geometry, material);
|
||||
scene.add(plane);
|
||||
|
||||
renderer = new THREE.CanvasRenderer();
|
||||
renderer.setClearColor(0xf0f0f0);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
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) {
|
||||
|
||||
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) {
|
||||
|
||||
mouseX = event.clientX - windowHalfX;
|
||||
|
||||
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
|
||||
|
||||
}
|
||||
|
||||
function onDocumentMouseUp(event) {
|
||||
|
||||
document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
||||
document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
||||
document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
||||
|
||||
}
|
||||
|
||||
function onDocumentMouseOut(event) {
|
||||
|
||||
document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
||||
document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
||||
document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchStart(event) {
|
||||
|
||||
if (event.touches.length === 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
|
||||
targetRotationOnMouseDown = targetRotation;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
147
threejs/tests/canvas/canvas_interactive_cubes_tween.ts
Normal file
147
threejs/tests/canvas/canvas_interactive_cubes_tween.ts
Normal file
@@ -0,0 +1,147 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html
|
||||
|
||||
() => {
|
||||
var container, stats;
|
||||
var camera, scene, projector, renderer;
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
projector = new THREE.Projector();
|
||||
|
||||
renderer = new THREE.CanvasRenderer();
|
||||
renderer.setClearColor(0xf0f0f0);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
document.addEventListener('mousedown', onDocumentMouseDown, false);
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
function onDocumentMouseDown(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1, 0.5);
|
||||
projector.unprojectVector(vector, camera);
|
||||
|
||||
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
124
threejs/tests/canvas/canvas_lights_pointlights.ts
Normal file
124
threejs/tests/canvas/canvas_lights_pointlights.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, scene, renderer,
|
||||
particle1, particle2, particle3,
|
||||
light1, light2, light3,
|
||||
loader, 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) {
|
||||
|
||||
context.beginPath();
|
||||
context.arc(0, 0, 0.5, 0, PI2, true);
|
||||
context.fill();
|
||||
|
||||
}
|
||||
|
||||
particle1 = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xff0040, program: program }));
|
||||
scene.add(particle1);
|
||||
|
||||
particle2 = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x0040ff, program: program }));
|
||||
scene.add(particle2);
|
||||
|
||||
particle3 = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x80ff80, program: program }));
|
||||
scene.add(particle3);
|
||||
|
||||
loader = new THREE.JSONLoader();
|
||||
loader.load('obj/WaltHeadLo.js', function (geometry) {
|
||||
|
||||
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, overdraw: 0.5 }));
|
||||
scene.add(mesh);
|
||||
|
||||
});
|
||||
|
||||
renderer = new THREE.CanvasRenderer();
|
||||
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;
|
||||
|
||||
particle1.position.x = Math.sin(time * 0.7) * 30;
|
||||
particle1.position.y = Math.cos(time * 0.5) * 40;
|
||||
particle1.position.z = Math.cos(time * 0.3) * 30;
|
||||
|
||||
light1.position.x = particle1.position.x;
|
||||
light1.position.y = particle1.position.y;
|
||||
light1.position.z = particle1.position.z;
|
||||
|
||||
particle2.position.x = Math.cos(time * 0.3) * 30;
|
||||
particle2.position.y = Math.sin(time * 0.5) * 40;
|
||||
particle2.position.z = Math.sin(time * 0.7) * 30;
|
||||
|
||||
light2.position.x = particle2.position.x;
|
||||
light2.position.y = particle2.position.y;
|
||||
light2.position.z = particle2.position.z;
|
||||
|
||||
particle3.position.x = Math.sin(time * 0.7) * 30;
|
||||
particle3.position.y = Math.cos(time * 0.3) * 40;
|
||||
particle3.position.z = Math.sin(time * 0.5) * 30;
|
||||
|
||||
light3.position.x = particle3.position.x;
|
||||
light3.position.y = particle3.position.y;
|
||||
light3.position.z = particle3.position.z;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
}
|
||||
213
threejs/tests/canvas/canvas_materials.ts
Normal file
213
threejs/tests/canvas/canvas_materials.ts
Normal file
@@ -0,0 +1,213 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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 materials: THREE.Material[];
|
||||
var debugContext: any;
|
||||
// -------
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer, objects;
|
||||
var particleLight, 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);
|
||||
line.type = THREE.LinePieces;
|
||||
scene.add(line);
|
||||
|
||||
// Spheres
|
||||
|
||||
var geometry = new THREE.SphereGeometry(100, 14, 7);
|
||||
|
||||
materials = [
|
||||
|
||||
new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, side: THREE.DoubleSide }),
|
||||
new THREE.MeshBasicMaterial({ color: 0xff0000, blending: THREE.AdditiveBlending }),
|
||||
new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, overdraw: 0.5 }),
|
||||
new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.SmoothShading, 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', new THREE.SphericalReflectionMapping()), overdraw: 0.5 }),
|
||||
new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', new THREE.SphericalRefractionMapping()), overdraw: 0.5 })
|
||||
|
||||
];
|
||||
|
||||
for (var i = 0, l = geometry.faces.length; i < l; i++) {
|
||||
|
||||
var face = geometry.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) {
|
||||
|
||||
context.beginPath();
|
||||
context.arc(0, 0, 0.5, 0, PI2, true);
|
||||
context.fill();
|
||||
|
||||
}
|
||||
|
||||
particleLight = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xffffff, program: program }));
|
||||
particleLight.scale.x = particleLight.scale.y = 8;
|
||||
scene.add(particleLight);
|
||||
|
||||
// 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);
|
||||
|
||||
renderer = new THREE.CanvasRenderer();
|
||||
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);
|
||||
|
||||
debugContext = debugCanvas.getContext('2d');
|
||||
debugContext.setTransform(1, 0, 0, 1, 256, 256);
|
||||
debugContext.strokeStyle = '#000000';
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
function loadImage(path) {
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
particleLight.position.x = Math.sin(timer * 7) * 300;
|
||||
particleLight.position.y = Math.cos(timer * 5) * 400;
|
||||
particleLight.position.z = Math.cos(timer * 3) * 300;
|
||||
|
||||
pointLight.position.x = particleLight.position.x;
|
||||
pointLight.position.y = particleLight.position.y;
|
||||
pointLight.position.z = particleLight.position.z;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
131
threejs/tests/canvas/canvas_particles_floor.ts
Normal file
131
threejs/tests/canvas/canvas_particles_floor.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, stats;
|
||||
var camera, scene, renderer, particle;
|
||||
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.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
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) {
|
||||
|
||||
mouseX = event.clientX - windowHalfX;
|
||||
mouseY = event.clientY - windowHalfY;
|
||||
}
|
||||
|
||||
function onDocumentTouchStart(event) {
|
||||
|
||||
if (event.touches.length > 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouseX = event.touches[0].pageX - windowHalfX;
|
||||
mouseY = event.touches[0].pageY - windowHalfY;
|
||||
}
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
353
threejs/tests/css3d/css3d_periodictable.ts
Normal file
353
threejs/tests/css3d/css3d_periodictable.ts
Normal file
@@ -0,0 +1,353 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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 object: any;
|
||||
// -------
|
||||
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, scene, renderer;
|
||||
var controls;
|
||||
|
||||
var objects = [];
|
||||
var targets = { table: [], sphere: [], helix: [], grid: [] };
|
||||
|
||||
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);
|
||||
|
||||
object = new THREE.CSS3DObject(element);
|
||||
object.position.x = Math.random() * 4000 - 2000;
|
||||
object.position.y = Math.random() * 4000 - 2000;
|
||||
object.position.z = Math.random() * 4000 - 2000;
|
||||
scene.add(object);
|
||||
|
||||
objects.push(object);
|
||||
|
||||
//
|
||||
object = new THREE.Object3D();
|
||||
object.position.x = (<number>table[i + 3] * 140) - 1330;
|
||||
object.position.y = - (<number>table[i + 4] * 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) {
|
||||
|
||||
transform(targets.table, 2000);
|
||||
|
||||
}, false);
|
||||
|
||||
var button = document.getElementById('sphere');
|
||||
button.addEventListener('click', function (event) {
|
||||
|
||||
transform(targets.sphere, 2000);
|
||||
|
||||
}, false);
|
||||
|
||||
var button = document.getElementById('helix');
|
||||
button.addEventListener('click', function (event) {
|
||||
|
||||
transform(targets.helix, 2000);
|
||||
|
||||
}, false);
|
||||
|
||||
var button = document.getElementById('grid');
|
||||
button.addEventListener('click', function (event) {
|
||||
|
||||
transform(targets.grid, 2000);
|
||||
|
||||
}, false);
|
||||
|
||||
transform(targets.table, 5000);
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
}
|
||||
|
||||
function transform(targets, duration) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
195
threejs/tests/css3d/css3d_sprites.ts
Normal file
195
threejs/tests/css3d/css3d_sprites.ts
Normal file
@@ -0,0 +1,195 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, scene, renderer;
|
||||
var controls;
|
||||
|
||||
var particlesTotal = 512;
|
||||
var positions = [];
|
||||
var objects = [];
|
||||
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 sprite = document.createElement('img');
|
||||
sprite.addEventListener('load', function (event) {
|
||||
|
||||
for (var i = 0, j = 0; i < particlesTotal; i++, j += 3) {
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = sprite.width;
|
||||
canvas.height = sprite.height;
|
||||
|
||||
var context = canvas.getContext('2d');
|
||||
context.drawImage(sprite, 0, 0);
|
||||
|
||||
var object = new THREE.CSS3DSprite(canvas);
|
||||
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);
|
||||
sprite.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; i++, j += 3) {
|
||||
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
3084
threejs/tests/math/test_unit_math.ts
Normal file
3084
threejs/tests/math/test_unit_math.ts
Normal file
File diff suppressed because it is too large
Load Diff
84
threejs/tests/three-tests-setup.ts
Normal file
84
threejs/tests/three-tests-setup.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Lib.d.ts browser specific fixes necessary for these tests to work :
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
interface CSSStyleDeclaration {
|
||||
WebkitFilter: string;
|
||||
}
|
||||
interface Document {
|
||||
pointerLockElement: any;
|
||||
mozPointerLockElement: any;
|
||||
webkitPointerLockElement: any;
|
||||
fullscreenElement: any;
|
||||
mozFullscreenElement: any;
|
||||
mozFullScreenElement: any;
|
||||
webkitFullscreenElement: any;
|
||||
}
|
||||
interface HTMLElement {
|
||||
requestPointerLock: any;
|
||||
mozRequestPointerLock: any;
|
||||
webkitRequestPointerLock: any;
|
||||
requestFullScreen: any;
|
||||
requestFullscreen: any;
|
||||
mozRequestFullScreen: any;
|
||||
mozRequestFullscreen: any;
|
||||
webkitRequestFullscreen: any;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////
|
||||
// https://github.com/mrdoob/three.js/tree/master/examples
|
||||
//////////////////////////////////////////////////////////////
|
||||
|
||||
declare var Stats: any;
|
||||
declare var TWEEN: any;
|
||||
declare var Detector: any;
|
||||
declare var Qrcode: any;
|
||||
declare var ImprovedNoise: any;
|
||||
|
||||
|
||||
declare module THREE {
|
||||
var AnaglyphEffect: any;
|
||||
var AWDLoader: any;
|
||||
var PDBLoader: any;
|
||||
var CSS3Renderer: any;
|
||||
var CSS3DSprite: any;
|
||||
var CSS3DRenderer: any;
|
||||
var CSS3DObject: any;
|
||||
var DotScreenShader: any;
|
||||
var TrackballControls: any;
|
||||
var FlyControls: any;
|
||||
var RenderPass: any;
|
||||
var FilmPass: any;
|
||||
var EffectComposer: any;
|
||||
var OrbitControls: any;
|
||||
var PathControls: any;
|
||||
var PointerLockControls: any;
|
||||
var RGBShiftShader: any;
|
||||
var RollControls: any;
|
||||
var FirstPersonControls: any;
|
||||
var SVGRenderer: any;
|
||||
var SoftwareRenderer: any;
|
||||
var UVsDebug: any;
|
||||
var UVsUtils: any;
|
||||
var Curves: any;
|
||||
var ParametricGeometries: any;
|
||||
var BinaryLoader: any;
|
||||
var OculusRiftEffect: any;
|
||||
var SubdivisionModifier: any;
|
||||
var TessellateModifier: any;
|
||||
var ExplodeModifier: any;
|
||||
var RenderPass: any;
|
||||
var BloomPass: any;
|
||||
var FilmPass: any;
|
||||
var ShaderPass: any;
|
||||
var FXAAShader: any;
|
||||
var CopyShader: any;
|
||||
var ColladaLoader: any;
|
||||
var CTMLoader: any;
|
||||
var VTKLoader: any;
|
||||
var STLLoader: any;
|
||||
var OBJLoader: any;
|
||||
var ColladaLoader: any;
|
||||
var UTF8Loader: any;
|
||||
var UnpackDepthRGBAShader: any;
|
||||
}
|
||||
|
||||
299
threejs/tests/webgl/webgl_animation_cloth.ts
Normal file
299
threejs/tests/webgl/webgl_animation_cloth.ts
Normal file
@@ -0,0 +1,299 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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 = [];
|
||||
var pins = [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, stats;
|
||||
var camera, scene, renderer;
|
||||
|
||||
var clothGeometry;
|
||||
var sphere;
|
||||
var object, arrow;
|
||||
|
||||
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
|
||||
|
||||
var light, materials;
|
||||
|
||||
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 = 2048;
|
||||
light.shadowMapHeight = 2048;
|
||||
|
||||
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);
|
||||
|
||||
light = new THREE.DirectionalLight(0x3dff0c, 0.35);
|
||||
light.position.set(0, -1, 0);
|
||||
|
||||
scene.add(light);
|
||||
|
||||
// cloth material
|
||||
|
||||
var clothTexture = THREE.ImageUtils.loadTexture('textures/patterns/circuit_pattern.png');
|
||||
clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
|
||||
clothTexture.anisotropy = 16;
|
||||
|
||||
var clothMaterial = new THREE.MeshPhongMaterial({ alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shiness: 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: { type: "t", 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 initColor = new THREE.Color(0x497f13);
|
||||
var initTexture = THREE.ImageUtils.generateDataTexture(1, 1, initColor);
|
||||
|
||||
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: initTexture });
|
||||
|
||||
var groundTexture = THREE.ImageUtils.loadTexture("textures/terrain/grasslight-big.jpg", undefined, function () { groundMaterial.map = groundTexture });
|
||||
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
|
||||
groundTexture.repeat.set(25, 25);
|
||||
groundTexture.anisotropy = 16;
|
||||
|
||||
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20000, 20000), groundMaterial);
|
||||
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, shiness: 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.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.domElement);
|
||||
|
||||
//
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
248
threejs/tests/webgl/webgl_buffergeometry.ts
Normal file
248
threejs/tests/webgl/webgl_buffergeometry.ts
Normal file
@@ -0,0 +1,248 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
var 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();
|
||||
|
||||
geometry.addAttribute('index', new Uint16Array(triangles * 3), 1);
|
||||
geometry.addAttribute('position', new Float32Array(triangles * 3 * 3), 3);
|
||||
geometry.addAttribute('normal', new Float32Array(triangles * 3 * 3), 3);
|
||||
geometry.addAttribute('color', new Float32Array(triangles * 3 * 3), 3);
|
||||
|
||||
// break geometry into
|
||||
// chunks of 21,845 triangles (3 unique vertices per triangle)
|
||||
// for indices to fit into 16 bit integer number
|
||||
// floor(2^16 / 3) = 21845
|
||||
|
||||
var chunkSize = 21845;
|
||||
|
||||
var indices = geometry.getAttribute('index').array;
|
||||
|
||||
for (var i = 0; i < indices.length; i++) {
|
||||
|
||||
indices[i] = i % (3 * chunkSize);
|
||||
|
||||
}
|
||||
|
||||
var positions = geometry.getAttribute('position').array;
|
||||
var normals = geometry.getAttribute('normal').array;
|
||||
var colors = geometry.getAttribute('color').array;
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
var offsets = triangles / chunkSize;
|
||||
|
||||
for (var i = 0; i < offsets; i++) {
|
||||
|
||||
var offset = {
|
||||
start: i * chunkSize * 3,
|
||||
index: i * chunkSize * 3,
|
||||
count: Math.min(triangles - (i * chunkSize), chunkSize) * 3
|
||||
};
|
||||
|
||||
geometry.offsets.push(offset);
|
||||
|
||||
}
|
||||
|
||||
geometry.computeBoundingSphere();
|
||||
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
color: 0xaaaaaa, ambient: 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, 1);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.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();
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
218
threejs/tests/webgl/webgl_camera.ts
Normal file
218
threejs/tests/webgl/webgl_camera.ts
Normal file
@@ -0,0 +1,218 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_camera.html
|
||||
|
||||
() => {
|
||||
var SCREEN_WIDTH = window.innerWidth;
|
||||
var SCREEN_HEIGHT = window.innerHeight;
|
||||
|
||||
var container, stats;
|
||||
var camera, scene, renderer, mesh;
|
||||
var cameraRig, activeCamera, activeHelper;
|
||||
var cameraPerspective, cameraOrtho;
|
||||
var cameraPerspectiveHelper, cameraOrthoHelper;
|
||||
|
||||
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.Object3D();
|
||||
|
||||
cameraRig.add(cameraPerspective);
|
||||
cameraRig.add(cameraOrtho);
|
||||
|
||||
scene.add(cameraRig);
|
||||
|
||||
//
|
||||
|
||||
mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 16, 8), new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }));
|
||||
scene.add(mesh);
|
||||
|
||||
var mesh2 = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 8), new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }));
|
||||
mesh2.position.y = 150;
|
||||
mesh.add(mesh2);
|
||||
|
||||
var mesh3 = new THREE.Mesh(new THREE.SphereGeometry(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.ParticleSystem(geometry, new THREE.ParticleSystemMaterial({ color: 0x888888 }));
|
||||
scene.add(particles);
|
||||
|
||||
//
|
||||
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
renderer.domElement.style.position = "relative";
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
renderer.autoClear = false;
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function onKeyDown(event) {
|
||||
|
||||
switch (event.keyCode) {
|
||||
|
||||
case 79: /*O*/
|
||||
|
||||
activeCamera = cameraOrtho;
|
||||
activeHelper = cameraOrthoHelper;
|
||||
|
||||
break;
|
||||
|
||||
case 80: /*P*/
|
||||
|
||||
activeCamera = cameraPerspective;
|
||||
activeHelper = cameraPerspectiveHelper;
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//
|
||||
|
||||
function onWindowResize(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);
|
||||
}
|
||||
}
|
||||
134
threejs/tests/webgl/webgl_custom_attributes.ts
Normal file
134
threejs/tests/webgl/webgl_custom_attributes.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html
|
||||
|
||||
() => {
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var renderer, scene, camera, stats;
|
||||
|
||||
var sphere, uniforms, attributes;
|
||||
|
||||
var noise = [];
|
||||
|
||||
var WIDTH = window.innerWidth,
|
||||
HEIGHT = window.innerHeight;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, WIDTH / HEIGHT, 1, 10000);
|
||||
camera.position.z = 300;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
attributes = {
|
||||
|
||||
displacement: { type: 'f', value: [] }
|
||||
|
||||
};
|
||||
|
||||
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,
|
||||
attributes: attributes,
|
||||
vertexShader: document.getElementById('vertexshader').textContent,
|
||||
fragmentShader: document.getElementById('fragmentshader').textContent
|
||||
|
||||
});
|
||||
|
||||
|
||||
var radius = 50, segments = 128, rings = 64;
|
||||
var geometry = new THREE.SphereGeometry(radius, segments, rings);
|
||||
geometry.dynamic = true;
|
||||
|
||||
sphere = new THREE.Mesh(geometry, shaderMaterial);
|
||||
|
||||
var vertices = sphere.geometry.vertices;
|
||||
var values = attributes.displacement.value;
|
||||
|
||||
for (var v = 0; v < vertices.length; v++) {
|
||||
|
||||
values[v] = 0;
|
||||
noise[v] = Math.random() * 5;
|
||||
|
||||
}
|
||||
|
||||
scene.add(sphere);
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setClearColor(0x050505, 1);
|
||||
renderer.setSize(WIDTH, HEIGHT);
|
||||
|
||||
var container = document.getElementById('container');
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.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();
|
||||
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 < attributes.displacement.value.length; i++) {
|
||||
|
||||
attributes.displacement.value[i] = Math.sin(0.1 * i + time);
|
||||
|
||||
noise[i] += 0.5 * (0.5 - Math.random());
|
||||
noise[i] = THREE.Math.clamp(noise[i], -5, 5);
|
||||
|
||||
attributes.displacement.value[i] += noise[i];
|
||||
|
||||
}
|
||||
|
||||
attributes.displacement.needsUpdate = true;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
170
threejs/tests/webgl/webgl_geometries.ts
Normal file
170
threejs/tests/webgl/webgl_geometries.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometries.html
|
||||
|
||||
() => {
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
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, object;
|
||||
|
||||
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({ ambient: 0xbbbbbb, 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 = [];
|
||||
|
||||
for (var i = 0; i < 50; i++) {
|
||||
|
||||
points.push(new THREE.Vector3(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, 0, (i - 5) * 2));
|
||||
|
||||
}
|
||||
|
||||
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.AxisHelper(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.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.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();
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
92
threejs/tests/webgl/webgl_helpers.ts
Normal file
92
threejs/tests/webgl/webgl_helpers.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_helpers.html
|
||||
|
||||
() => {
|
||||
var scene, renderer;
|
||||
var camera, light;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
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 helper = new THREE.GridHelper(200, 10);
|
||||
helper.setColors(0x0000ff, 0x808080);
|
||||
helper.position.y = - 150;
|
||||
scene.add(helper);
|
||||
|
||||
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);
|
||||
helper.material.depthTest = false;
|
||||
helper.material.opacity = 0.25;
|
||||
helper.material.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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
155
threejs/tests/webgl/webgl_interactive_cubes.ts
Normal file
155
threejs/tests/webgl/webgl_interactive_cubes.ts
Normal file
@@ -0,0 +1,155 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes.html
|
||||
|
||||
() => {
|
||||
var container, stats;
|
||||
var camera, scene, projector, raycaster, renderer;
|
||||
|
||||
var mouse = new THREE.Vector2(), INTERSECTED;
|
||||
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, 2);
|
||||
light.position.set(1, 1, 1).normalize();
|
||||
scene.add(light);
|
||||
|
||||
var light = new THREE.DirectionalLight(0xffffff);
|
||||
light.position.set(-1, -1, -1).normalize();
|
||||
scene.add(light);
|
||||
|
||||
var geometry = new THREE.BoxGeometry(20, 20, 20);
|
||||
|
||||
for (var i = 0; i < 2000; i++) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
projector = new THREE.Projector();
|
||||
raycaster = new THREE.Raycaster();
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setClearColor(0xf0f0f0);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.sortObjects = false;
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
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) {
|
||||
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
// find intersections
|
||||
|
||||
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
|
||||
projector.unprojectVector(vector, camera);
|
||||
|
||||
raycaster.set(camera.position, vector.sub(camera.position).normalize());
|
||||
|
||||
var intersects = raycaster.intersectObjects(scene.children);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
|
||||
if (INTERSECTED != intersects[0].object) {
|
||||
|
||||
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
|
||||
|
||||
INTERSECTED = intersects[0].object;
|
||||
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
|
||||
INTERSECTED.material.emissive.setHex(0xff0000);
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
|
||||
|
||||
INTERSECTED = null;
|
||||
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
}
|
||||
205
threejs/tests/webgl/webgl_lensflares.ts
Normal file
205
threejs/tests/webgl/webgl_lensflares.ts
Normal file
@@ -0,0 +1,205 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
var clock = new THREE.Clock();
|
||||
|
||||
var composer;
|
||||
|
||||
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({ ambient: 0x333333, 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, s, l, x, y, z) {
|
||||
|
||||
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(textureFlare0, 700, 0.0, THREE.AdditiveBlending, flareColor);
|
||||
|
||||
lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending);
|
||||
lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending);
|
||||
lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending);
|
||||
|
||||
lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
|
||||
lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
|
||||
lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
|
||||
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
|
||||
|
||||
lensFlare.customUpdateCallback = lensFlareUpdateCallback;
|
||||
lensFlare.position = light.position;
|
||||
|
||||
scene.add(lensFlare);
|
||||
|
||||
}
|
||||
|
||||
// renderer
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setClearColor(scene.fog.color, 1);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
//
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
// stats
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
// events
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function lensFlareUpdateCallback(object) {
|
||||
|
||||
var f, fl = object.lensFlares.length;
|
||||
var flare;
|
||||
var vecX = -object.positionScreen.x * 2;
|
||||
var vecY = -object.positionScreen.y * 2;
|
||||
|
||||
|
||||
for (f = 0; f < fl; f++) {
|
||||
|
||||
flare = object.lensFlares[f];
|
||||
|
||||
flare.x = object.positionScreen.x + vecX * flare.distance;
|
||||
flare.y = object.positionScreen.y + vecY * flare.distance;
|
||||
|
||||
flare.rotation = 0;
|
||||
|
||||
}
|
||||
|
||||
object.lensFlares[2].y += 0.025;
|
||||
object.lensFlares[3].rotation = object.positionScreen.x * 0.5 + THREE.Math.degToRad(45);
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function onWindowResize(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);
|
||||
|
||||
}
|
||||
}
|
||||
236
threejs/tests/webgl/webgl_lights_heimsphere.ts
Normal file
236
threejs/tests/webgl/webgl_lights_heimsphere.ts
Normal file
@@ -0,0 +1,236 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, scene, renderer, dirLight, hemiLight;
|
||||
var morphs = [];
|
||||
var 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.shadowDarkness = 0.35;
|
||||
//dirLight.shadowCameraVisible = true;
|
||||
|
||||
// GROUND
|
||||
|
||||
var groundGeo = new THREE.PlaneGeometry(10000, 10000);
|
||||
var groundMat = new THREE.MeshPhongMaterial({ ambient: 0xffffff, 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: { type: "c", value: new THREE.Color(0x0077ff) },
|
||||
bottomColor: { type: "c", value: new THREE.Color(0xffffff) },
|
||||
offset: { type: "f", value: 33 },
|
||||
exponent: { type: "f", 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) {
|
||||
|
||||
morphColorsToFaceColors(geometry);
|
||||
geometry.computeMorphNormals();
|
||||
|
||||
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading });
|
||||
var meshAnim = new THREE.MorphAnimMesh(geometry, material);
|
||||
|
||||
meshAnim.duration = 1000;
|
||||
|
||||
var s = 0.35;
|
||||
meshAnim.scale.set(s, s, s);
|
||||
meshAnim.position.y = 15;
|
||||
meshAnim.rotation.y = -1;
|
||||
|
||||
meshAnim.castShadow = true;
|
||||
meshAnim.receiveShadow = true;
|
||||
|
||||
scene.add(meshAnim);
|
||||
morphs.push(meshAnim);
|
||||
|
||||
});
|
||||
|
||||
// RENDERER
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
renderer.setClearColor(scene.fog.color, 1);
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
renderer.shadowMapEnabled = true;
|
||||
renderer.shadowMapCullFace = THREE.CullFaceBack;
|
||||
|
||||
// STATS
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
|
||||
}
|
||||
|
||||
function morphColorsToFaceColors(geometry) {
|
||||
|
||||
if (geometry.morphColors && geometry.morphColors.length) {
|
||||
|
||||
var colorMap = geometry.morphColors[0];
|
||||
|
||||
for (var i = 0; i < colorMap.colors.length; i++) {
|
||||
|
||||
geometry.faces[i].color = colorMap.colors[i];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
function onKeyDown(event) {
|
||||
|
||||
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 < morphs.length; i++) {
|
||||
|
||||
morph = morphs[i];
|
||||
morph.updateAnimation(1000 * delta);
|
||||
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
}
|
||||
216
threejs/tests/webgl/webgl_lines_colors.ts
Normal file
216
threejs/tests/webgl/webgl_lines_colors.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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: any;
|
||||
// -------
|
||||
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var effectFXAA;
|
||||
|
||||
var mouseX = 0, mouseY = 0,
|
||||
|
||||
windowHalfX = window.innerWidth / 2,
|
||||
windowHalfY = window.innerHeight / 2,
|
||||
|
||||
camera, scene, renderer, material, composer;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
var i, container;
|
||||
|
||||
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.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 = [], colors2 = [], colors3 = [];
|
||||
|
||||
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, p, scale = 0.3, d = 225;
|
||||
var parameters = [
|
||||
[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 (i = 0; i < parameters.length; ++i) {
|
||||
|
||||
p = parameters[i];
|
||||
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();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
//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) {
|
||||
|
||||
mouseX = event.clientX - windowHalfX;
|
||||
mouseY = event.clientY - windowHalfY;
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchStart(event) {
|
||||
|
||||
if (event.touches.length > 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouseX = event.touches[0].pageX - windowHalfX;
|
||||
mouseY = event.touches[0].pageY - windowHalfY;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event) {
|
||||
|
||||
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();
|
||||
|
||||
}
|
||||
}
|
||||
116
threejs/tests/webgl/webgl_loader_awd.ts
Normal file
116
threejs/tests/webgl/webgl_loader_awd.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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, stats;
|
||||
|
||||
var camera, scene, renderer, objects, controls;
|
||||
var particleLight, pointLight;
|
||||
var trunk;
|
||||
|
||||
var loader = new THREE.AWDLoader();
|
||||
|
||||
loader.materialFactory = createMaterial;
|
||||
loader.load('./models/awd/simple/simple.awd', function (_trunk) {
|
||||
|
||||
trunk = _trunk;
|
||||
|
||||
init();
|
||||
render();
|
||||
|
||||
});
|
||||
|
||||
|
||||
function createMaterial(name) {
|
||||
// console.log( name );
|
||||
// var mat = new THREE.MeshPhongMaterial({
|
||||
// color: 0xaaaaaa,
|
||||
// shininess: 20
|
||||
|
||||
// });
|
||||
// return mat;
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
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.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
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();
|
||||
|
||||
}
|
||||
}
|
||||
238
threejs/tests/webgl/webgl_materials.ts
Normal file
238
threejs/tests/webgl/webgl_materials.ts
Normal file
@@ -0,0 +1,238 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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.
|
||||
var geometry: THREE.Geometry;
|
||||
// -------
|
||||
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer, objects;
|
||||
var particleLight, pointLight;
|
||||
|
||||
var materials = [];
|
||||
|
||||
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, shading: THREE.FlatShading }));
|
||||
materials.push(new THREE.MeshPhongMaterial({ ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading }));
|
||||
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, shading: THREE.SmoothShading }));
|
||||
materials.push(new THREE.MeshPhongMaterial({ ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: texture, transparent: true }));
|
||||
materials.push(new THREE.MeshNormalMaterial({ shading: THREE.SmoothShading }));
|
||||
materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, wireframe: true }));
|
||||
|
||||
materials.push(new THREE.MeshDepthMaterial());
|
||||
|
||||
materials.push(new THREE.MeshLambertMaterial({ color: 0x666666, emissive: 0xff0000, ambient: 0x000000, shading: THREE.SmoothShading }));
|
||||
materials.push(new THREE.MeshPhongMaterial({ color: 0x000000, specular: 0x666666, emissive: 0xff0000, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, 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);
|
||||
|
||||
}
|
||||
|
||||
materials.push(new THREE.MeshFaceMaterial(materials));
|
||||
|
||||
objects = [];
|
||||
|
||||
var sphere, material;
|
||||
|
||||
for (var i = 0, l = materials.length; i < l; i++) {
|
||||
|
||||
material = materials[i];
|
||||
|
||||
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
|
||||
(material.shading == THREE.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);
|
||||
|
||||
pointLight = new THREE.PointLight(0xffffff, 1);
|
||||
scene.add(pointLight);
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
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; i += 4, j++) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
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].emissive.setHSL(0.54, 1, 0.35 * (0.5 + 0.5 * Math.sin(35 * timer)));
|
||||
materials[materials.length - 4].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;
|
||||
|
||||
pointLight.position.x = particleLight.position.x;
|
||||
pointLight.position.y = particleLight.position.y;
|
||||
pointLight.position.z = particleLight.position.z;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
}
|
||||
131
threejs/tests/webgl/webgl_morphtargets.ts
Normal file
131
threejs/tests/webgl/webgl_morphtargets.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_morphtargets.html
|
||||
|
||||
() => {
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
var geometry, objects;
|
||||
|
||||
var mouseX = 0, mouseY = 0;
|
||||
|
||||
var mesh;
|
||||
var windowHalfX = window.innerWidth / 2;
|
||||
var windowHalfY = window.innerHeight / 2;
|
||||
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
var light: THREE.Light;
|
||||
|
||||
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);
|
||||
|
||||
light = new THREE.PointLight(0xff2200);
|
||||
light.position.set(100, 100, 100);
|
||||
scene.add(light);
|
||||
|
||||
light = new THREE.AmbientLight(0x111111);
|
||||
scene.add(light);
|
||||
|
||||
|
||||
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 = [];
|
||||
|
||||
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, 1);
|
||||
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) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
147
threejs/tests/webgl/webgl_particles_billboards.ts
Normal file
147
threejs/tests/webgl/webgl_particles_billboards.ts
Normal file
@@ -0,0 +1,147 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_particles_billboards.html
|
||||
|
||||
() => {
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var container, stats;
|
||||
var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size;
|
||||
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.ParticleSystemMaterial({ size: 35, sizeAttenuation: false, map: sprite, transparent: true });
|
||||
material.color.setHSL(1.0, 0.3, 0.7);
|
||||
|
||||
particles = new THREE.ParticleSystem(geometry, material);
|
||||
particles.sortParticles = true;
|
||||
scene.add(particles);
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ clearAlpha: 1 });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
//
|
||||
|
||||
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) {
|
||||
|
||||
mouseX = event.clientX - windowHalfX;
|
||||
mouseY = event.clientY - windowHalfY;
|
||||
|
||||
}
|
||||
|
||||
function onDocumentTouchStart(event) {
|
||||
|
||||
if (event.touches.length == 1) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouseX = event.touches[0].pageX - windowHalfX;
|
||||
mouseY = event.touches[0].pageY - windowHalfY;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
91
threejs/tests/webgl/webgl_postprocessing.ts
Normal file
91
threejs/tests/webgl/webgl_postprocessing.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing.html
|
||||
|
||||
() => {
|
||||
var camera, scene, renderer, composer;
|
||||
var object, light;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
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, shading: THREE.FlatShading });
|
||||
|
||||
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);
|
||||
|
||||
var time = Date.now();
|
||||
|
||||
object.rotation.x += 0.005;
|
||||
object.rotation.y += 0.01;
|
||||
|
||||
composer.render();
|
||||
|
||||
}
|
||||
}
|
||||
86
threejs/tests/webgl/webgl_shader.ts
Normal file
86
threejs/tests/webgl/webgl_shader.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_shader.html
|
||||
|
||||
() => {
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer;
|
||||
|
||||
var uniforms;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.getElementById('container');
|
||||
|
||||
camera = new THREE.Camera();
|
||||
camera.position.z = 1;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
var geometry = new THREE.PlaneGeometry(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();
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
|
||||
onWindowResize();
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
uniforms.resolution.value.x = window.innerWidth;
|
||||
uniforms.resolution.value.y = window.innerHeight;
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
render();
|
||||
stats.update();
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
uniforms.time.value += 0.05;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
}
|
||||
215
threejs/tests/webgl/webgl_sprites.ts
Normal file
215
threejs/tests/webgl/webgl_sprites.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
/// <reference path="../../three.d.ts" />
|
||||
/// <reference path="../three-tests-setup.ts" />
|
||||
|
||||
// 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: any;
|
||||
// -------
|
||||
|
||||
var camera, scene, renderer;
|
||||
var cameraOrtho, sceneOrtho;
|
||||
|
||||
var spriteTL, spriteTR, spriteBL, spriteBR, spriteC;
|
||||
|
||||
var mapC;
|
||||
|
||||
var 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.Object3D();
|
||||
|
||||
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.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) {
|
||||
|
||||
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;
|
||||
|
||||
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];
|
||||
var material = sprite.material;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
sprite.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);
|
||||
|
||||
}
|
||||
}
|
||||
56
threejs/three-all-tests.ts
Normal file
56
threejs/three-all-tests.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2010-2013 three.js authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/// <reference path="./tests/math/test_unit_math.ts" />
|
||||
|
||||
// webGL renderer test.
|
||||
/// <reference path="./tests/webgl/webgl_animation_cloth.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_buffergeometry.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_camera.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_custom_attributes.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_geometries.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_helpers.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_interactive_cubes.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lensflares.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lights_heimsphere.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lines_colors.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_loader_awd.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_materials.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_morphtargets.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_particles_billboards.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_postprocessing.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_shader.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_sprites.ts" />
|
||||
|
||||
// css3d renderer test.
|
||||
/// <reference path="./tests/css3d/css3d_periodictable.ts" />
|
||||
/// <reference path="./tests/css3d/css3d_sprites.ts" />
|
||||
|
||||
// canvas renderer test.
|
||||
/// <reference path="./tests/canvas/canvas_camera_orthographic.ts" />
|
||||
/// <reference path="./tests/canvas/canvas_geometry_cube.ts" />
|
||||
/// <reference path="./tests/canvas/canvas_interactive_cubes_tween.ts" />
|
||||
/// <reference path="./tests/canvas/canvas_lights_pointlights.ts" />
|
||||
/// <reference path="./tests/canvas/canvas_materials.ts" />
|
||||
/// <reference path="./tests/canvas/canvas_particles_floor.ts" />
|
||||
23653
threejs/three-tests.ts
23653
threejs/three-tests.ts
File diff suppressed because it is too large
Load Diff
148
threejs/three.d.ts
vendored
148
threejs/three.d.ts
vendored
@@ -325,23 +325,44 @@ declare module THREE {
|
||||
}
|
||||
|
||||
// Core ///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
export class BufferAttribute {
|
||||
constructor();
|
||||
|
||||
interface BufferGeometryAttributeArray extends ArrayBufferView{
|
||||
length: number;
|
||||
set(value: number): void;
|
||||
setX(index: number, x: number): void;
|
||||
setY(index: number, y: number): void;
|
||||
setZ(index: number, z: number): void;
|
||||
setXY(index: number, x: number, y: number): void;
|
||||
setXYZ(index: number, x: number, y: number, z: number): void;
|
||||
setXYZW(index: number, x: number, y: number, z: number, w: number): void;
|
||||
}
|
||||
|
||||
interface BufferGeometryAttribute{
|
||||
itemSize: number;
|
||||
array: BufferGeometryAttributeArray;
|
||||
numItems: number;
|
||||
export class Int8Attribute extends BufferAttribute{
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
|
||||
interface BufferGeometryAttributes{
|
||||
[name: string]: BufferGeometryAttribute;
|
||||
index?: BufferGeometryAttribute;
|
||||
position?: BufferGeometryAttribute;
|
||||
normal?: BufferGeometryAttribute;
|
||||
color?: BufferGeometryAttribute;
|
||||
export class Uint8Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Uint8ClampedAttribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Int16Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Uint16Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Int32Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Uint32Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Float32Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
export class Float64Attribute extends BufferAttribute {
|
||||
constructor(size: number, itemSize: number);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -361,51 +382,25 @@ declare module THREE {
|
||||
* Unique number of this buffergeometry instance
|
||||
*/
|
||||
id: number;
|
||||
|
||||
/**
|
||||
* This hashmap has as id the name of the attribute to be set and as value the buffer to set it to.
|
||||
*/
|
||||
attributes: BufferGeometryAttributes;
|
||||
|
||||
/**
|
||||
* When set, it holds certain buffers in memory to have faster updates for this object. When unset, it deletes those buffers and saves memory.
|
||||
*/
|
||||
dynamic: boolean;
|
||||
|
||||
|
||||
uuid: number;
|
||||
name: string;
|
||||
attributes: BufferAttribute[];
|
||||
drawcalls: { start: number; count: number; index: number; }[];
|
||||
offsets: { start: number; count: number; index: number; }[];
|
||||
|
||||
/**
|
||||
* Bounding box.
|
||||
*/
|
||||
boundingBox: BoundingBox3D;
|
||||
|
||||
/**
|
||||
* Bounding sphere.
|
||||
*/
|
||||
boundingSphere: BoundingSphere;
|
||||
|
||||
morphTargets: any[];
|
||||
hasTangents: boolean;
|
||||
|
||||
addAttribute(name: string, type: Function, numItems: number, itemSize: number): any;
|
||||
addAttribute(name: string, attribute: BufferAttribute): any;
|
||||
addAttribute(name: string, array: any, itemSize: number): any;
|
||||
getAttribute(name: string): any;
|
||||
addDrawCall(start: number, count: number, index: number): void;
|
||||
|
||||
/**
|
||||
* Bakes matrix transform directly into vertex coordinates.
|
||||
*/
|
||||
applyMatrix(matrix: Matrix4): void;
|
||||
|
||||
/**
|
||||
* Computes vertex normals by averaging face normals.
|
||||
*/
|
||||
computeVertexNormals(): void;
|
||||
|
||||
/**
|
||||
* Computes vertex tangents.
|
||||
* Based on http://www.terathon.com/code/tangent.html
|
||||
* Geometry must have vertex UVs (layer 0 will be used).
|
||||
*/
|
||||
computeTangents(): void;
|
||||
|
||||
/**
|
||||
* Computes bounding box of the geometry, updating Geometry.boundingBox attribute.
|
||||
* Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are null.
|
||||
@@ -418,15 +413,30 @@ declare module THREE {
|
||||
*/
|
||||
computeBoundingSphere(): void;
|
||||
|
||||
/**
|
||||
* Computes vertex normals by averaging face normals.
|
||||
*/
|
||||
computeVertexNormals(): void;
|
||||
|
||||
/**
|
||||
* Computes vertex tangents.
|
||||
* Based on http://www.terathon.com/code/tangent.html
|
||||
* Geometry must have vertex UVs (layer 0 will be used).
|
||||
*/
|
||||
computeTangents(): void;
|
||||
|
||||
computeOffsets(indexBufferSize: number): void;
|
||||
merge(): void;
|
||||
normalizeNormals(): void;
|
||||
reorderBuffers(indexBuffer: number, indexMap: number[], vertexCount: number): void;
|
||||
clone(): BufferGeometry;
|
||||
|
||||
/**
|
||||
* Disposes the object from memory.
|
||||
* You need to call this when you want the bufferGeometry removed while the application is running.
|
||||
*/
|
||||
dispose(): void;
|
||||
|
||||
normalizeNormals(): void;
|
||||
|
||||
clone(): BufferGeometry;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2180,19 +2190,13 @@ declare module THREE {
|
||||
clone(): ParticleSystemMaterial;
|
||||
}
|
||||
|
||||
export interface Uniforms {
|
||||
[name: string]: { type: string; value: any; };
|
||||
|
||||
color?: { type: string; value: THREE.Color; };
|
||||
}
|
||||
|
||||
export class RawShaderMaterial extends ShaderMaterial {
|
||||
constructor(parameters?: ShaderMaterialParameters);
|
||||
|
||||
}
|
||||
|
||||
export interface ShaderMaterialParameters {
|
||||
uniforms?: Uniforms;
|
||||
uniforms?: any;
|
||||
fragmentShader?: string;
|
||||
vertexShader?: string;
|
||||
morphTargets?: boolean;
|
||||
@@ -2212,7 +2216,7 @@ declare module THREE {
|
||||
export class ShaderMaterial extends Material {
|
||||
constructor(parameters?: ShaderMaterialParameters);
|
||||
|
||||
uniforms: Uniforms;
|
||||
uniforms: any;
|
||||
fragmentShader: string;
|
||||
vertexShader: string;
|
||||
morphTargets: boolean;
|
||||
@@ -4368,24 +4372,22 @@ declare module THREE {
|
||||
export var ShaderChunk: ShaderChunk;
|
||||
|
||||
export var UniformsUtils: {
|
||||
merge(uniforms: Object[]): Uniforms;
|
||||
merge(uniforms: Uniforms[]): Uniforms;
|
||||
clone(uniforms_src: Uniforms): Uniforms;
|
||||
merge(uniforms: any[]): any;
|
||||
clone(uniforms_src: any): any;
|
||||
};
|
||||
|
||||
export var UniformsLib: {
|
||||
common: Uniforms;
|
||||
bump: Uniforms;
|
||||
normalmap: Uniforms;
|
||||
fog: Uniforms;
|
||||
lights: Uniforms;
|
||||
particle: Uniforms;
|
||||
shadowmap: Uniforms;
|
||||
common: any;
|
||||
bump: any;
|
||||
normalmap: any;
|
||||
fog: any;
|
||||
lights: any;
|
||||
particle: any;
|
||||
shadowmap: any;
|
||||
};
|
||||
|
||||
|
||||
export interface Shader {
|
||||
uniforms: Uniforms;
|
||||
uniforms: any;
|
||||
vertexShader: string;
|
||||
fragmentShader: string;
|
||||
}
|
||||
@@ -4404,6 +4406,8 @@ declare module THREE {
|
||||
depthRGBA: Shader;
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Renderers / WebGL /////////////////////////////////////////////////////////////////////
|
||||
export class WebGLProgram{
|
||||
constructor(renderer: WebGLRenderer, code: string, material: ShaderMaterial, parameters: WebGLRendererParameters);
|
||||
@@ -4573,7 +4577,7 @@ declare module THREE {
|
||||
anisotropy?: number
|
||||
);
|
||||
|
||||
image: Object; // HTMLImageElement or ImageData ;
|
||||
image: any; // HTMLImageElement or ImageData ;
|
||||
mapping: Mapping;
|
||||
wrapS: Wrapping;
|
||||
wrapT: Wrapping;
|
||||
|
||||
Reference in New Issue
Block a user