mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-10 11:40:16 +08:00
Divided test scripts for ease of update.
This commit is contained in:
satoru kimura
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user