mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-24 05:06:02 +08:00
Divided test scripts for ease of update.
This commit is contained in:
satoru kimura
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);
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user