mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-08-20 12:00:53 +08:00
Added missing properties for three.d.ts.
This commit is contained in:
satoru kimura
@@ -11,13 +11,15 @@
|
||||
var SCREEN_HEIGHT = window.innerHeight;
|
||||
var FLOOR = -250;
|
||||
|
||||
var container, stats;
|
||||
var container,stats;
|
||||
|
||||
var camera, scene;
|
||||
var renderer;
|
||||
|
||||
var mesh, helper;
|
||||
|
||||
var mixer;
|
||||
|
||||
var mouseX = 0, mouseY = 0;
|
||||
|
||||
var windowHalfX = window.innerWidth / 2;
|
||||
@@ -25,51 +27,49 @@
|
||||
|
||||
var clock = new THREE.Clock();
|
||||
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
||||
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.getElementById('container');
|
||||
container = document.getElementById( 'container' );
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
|
||||
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
|
||||
camera.position.z = 2200;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
scene.fog = new THREE.Fog(0xffffff, 2000, 10000);
|
||||
scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
|
||||
|
||||
scene.add(camera);
|
||||
scene.add( camera );
|
||||
|
||||
// GROUND
|
||||
|
||||
var geometry = new THREE.PlaneBufferGeometry(16000, 16000);
|
||||
var material = new THREE.MeshPhongMaterial({ emissive: 0xbbbbbb });
|
||||
var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );
|
||||
var material = new THREE.MeshPhongMaterial( { emissive: 0x888888 } );
|
||||
|
||||
var ground = new THREE.Mesh(geometry, material);
|
||||
ground.position.set(0, FLOOR, 0);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
scene.add(ground);
|
||||
var ground = new THREE.Mesh( geometry, material );
|
||||
ground.position.set( 0, FLOOR, 0 );
|
||||
ground.rotation.x = -Math.PI/2;
|
||||
scene.add( ground );
|
||||
|
||||
ground.receiveShadow = true;
|
||||
|
||||
|
||||
// LIGHTS
|
||||
|
||||
var ambient = new THREE.AmbientLight(0x222222);
|
||||
scene.add(ambient);
|
||||
scene.add( new THREE.HemisphereLight( 0x111111, 0x444444 ) );
|
||||
|
||||
|
||||
var light = new THREE.DirectionalLight(0xebf3ff, 1.6);
|
||||
light.position.set(0, 140, 500).multiplyScalar(1.1);
|
||||
scene.add(light);
|
||||
var light = new THREE.DirectionalLight( 0xebf3ff, 1.5 );
|
||||
light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
|
||||
scene.add( light );
|
||||
|
||||
light.castShadow = true;
|
||||
|
||||
light.shadowMapWidth = 1024;
|
||||
light.shadowMapHeight = 2048;
|
||||
light.shadowMapHeight = 1024;
|
||||
|
||||
var d = 390;
|
||||
|
||||
@@ -81,41 +81,35 @@
|
||||
light.shadowCameraFar = 3500;
|
||||
//light.shadowCameraVisible = true;
|
||||
|
||||
//
|
||||
|
||||
var light = new THREE.DirectionalLight(0x497f13, 1);
|
||||
light.position.set(0, -1, 0);
|
||||
scene.add(light);
|
||||
|
||||
// RENDERER
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setClearColor(scene.fog.color);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setClearColor( scene.fog.color );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
||||
renderer.domElement.style.position = "relative";
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
renderer.shadowMapEnabled = true;
|
||||
renderer.shadowMap.enabled = true;
|
||||
|
||||
|
||||
// STATS
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
container.appendChild( stats.domElement );
|
||||
|
||||
//
|
||||
|
||||
var loader = new THREE.JSONLoader();
|
||||
loader.load("models/skinned/knight.js", function (geometry, materials) {
|
||||
loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
|
||||
|
||||
createScene(geometry, materials, 0, FLOOR, -300, 60)
|
||||
createScene( geometry, materials, 0, FLOOR, -300, 60 )
|
||||
|
||||
});
|
||||
} );
|
||||
|
||||
// GUI
|
||||
|
||||
@@ -123,7 +117,7 @@
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
}
|
||||
|
||||
@@ -135,30 +129,13 @@
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
}
|
||||
|
||||
function ensureLoop(animation) {
|
||||
function createScene( geometry, materials, x, y, z, s ) {
|
||||
|
||||
for (var i = 0; i < animation.hierarchy.length; i++) {
|
||||
|
||||
var bone = animation.hierarchy[i];
|
||||
|
||||
var first = bone.keys[0];
|
||||
var last = bone.keys[bone.keys.length - 1];
|
||||
|
||||
last.pos = first.pos;
|
||||
last.rot = first.rot;
|
||||
last.scl = first.scl;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createScene(geometry, materials, x, y, z, s) {
|
||||
|
||||
ensureLoop(geometry.animation);
|
||||
//ensureLoop( geometry.animation );
|
||||
|
||||
geometry.computeBoundingBox();
|
||||
var bb = geometry.boundingBox;
|
||||
@@ -171,24 +148,15 @@
|
||||
path + 'posz' + format, path + 'negz' + format
|
||||
];
|
||||
|
||||
for ( var i = 0; i < materials.length; i ++ ) {
|
||||
|
||||
//var envMap = THREE.ImageUtils.loadTextureCube( urls );
|
||||
|
||||
//var map = THREE.ImageUtils.loadTexture( "textures/UV_Grid_Sm.jpg" );
|
||||
|
||||
//var bumpMap = THREE.ImageUtils.generateDataTexture( 1, 1, new THREE.Color() );
|
||||
//var bumpMap = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
|
||||
|
||||
for (var i = 0; i < materials.length; i++) {
|
||||
|
||||
var m = materials[i];
|
||||
var m = materials[ i ];
|
||||
m.skinning = true;
|
||||
m.morphTargets = true;
|
||||
|
||||
m.specular.setHSL(0, 0, 0.1);
|
||||
m.specular.setHSL( 0, 0, 0.1 );
|
||||
|
||||
m.color.setHSL(0.6, 0, 0.6);
|
||||
m.ambient.copy(m.color);
|
||||
m.color.setHSL( 0.6, 0, 0.6 );
|
||||
|
||||
//m.map = map;
|
||||
//m.envMap = envMap;
|
||||
@@ -198,47 +166,49 @@
|
||||
//m.combine = THREE.MixOperation;
|
||||
//m.reflectivity = 0.75;
|
||||
|
||||
m.wrapAround = true;
|
||||
|
||||
}
|
||||
|
||||
mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
|
||||
mesh.position.set(x, y - bb.min.y * s, z);
|
||||
mesh.scale.set(s, s, s);
|
||||
scene.add(mesh);
|
||||
mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
|
||||
mesh.position.set( x, y - bb.min.y * s, z );
|
||||
mesh.scale.set( s, s, s );
|
||||
scene.add( mesh );
|
||||
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
|
||||
helper = new THREE.SkeletonHelper(mesh);
|
||||
helper = new THREE.SkeletonHelper( mesh );
|
||||
helper.material.linewidth = 3;
|
||||
helper.visible = false;
|
||||
scene.add(helper);
|
||||
scene.add( helper );
|
||||
|
||||
var animation = new THREE.Animation(mesh, geometry.animation);
|
||||
animation.play();
|
||||
|
||||
var clipMorpher = THREE.AnimationClip.CreateFromMorphTargetSequence( 'facialExpressions', mesh.geometry.morphTargets, 3 );
|
||||
var clipBones = geometry.animations[0];
|
||||
|
||||
mixer = new THREE.AnimationMixer( mesh );
|
||||
mixer.addAction( new THREE.AnimationAction( clipMorpher ) );
|
||||
mixer.addAction( new THREE.AnimationAction( clipBones ) );
|
||||
}
|
||||
|
||||
function initGUI() {
|
||||
|
||||
var API = {
|
||||
'show model': true,
|
||||
'show skeleton': false
|
||||
'show model' : true,
|
||||
'show skeleton' : false
|
||||
};
|
||||
|
||||
var gui = new dat.GUI();
|
||||
|
||||
gui.add(API, 'show model').onChange(function () { mesh.visible = API['show model']; });
|
||||
gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
|
||||
|
||||
gui.add(API, 'show skeleton').onChange(function () { helper.visible = API['show skeleton']; });
|
||||
gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
|
||||
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(event) {
|
||||
function onDocumentMouseMove( event ) {
|
||||
|
||||
mouseX = (event.clientX - windowHalfX);
|
||||
mouseY = (event.clientY - windowHalfY);
|
||||
mouseX = ( event.clientX - windowHalfX );
|
||||
mouseY = ( event.clientY - windowHalfY );
|
||||
|
||||
}
|
||||
|
||||
@@ -246,7 +216,7 @@
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
render();
|
||||
stats.update();
|
||||
@@ -257,38 +227,17 @@
|
||||
|
||||
var delta = 0.75 * clock.getDelta();
|
||||
|
||||
camera.position.x += (mouseX - camera.position.x) * .05;
|
||||
camera.position.y = THREE.Math.clamp(camera.position.y + (- mouseY - camera.position.y) * .05, 0, 1000);
|
||||
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
||||
camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );
|
||||
|
||||
camera.lookAt(scene.position);
|
||||
|
||||
// update skinning
|
||||
|
||||
THREE.AnimationHandler.update(delta);
|
||||
|
||||
if (helper !== undefined) helper.update();
|
||||
|
||||
// update morphs
|
||||
|
||||
if (mesh) {
|
||||
|
||||
var time = Date.now() * 0.001;
|
||||
|
||||
// mouth
|
||||
|
||||
mesh.morphTargetInfluences[1] = (1 + Math.sin(4 * time)) / 2;
|
||||
|
||||
// frown ?
|
||||
|
||||
mesh.morphTargetInfluences[2] = (1 + Math.sin(2 * time)) / 2;
|
||||
|
||||
// eyes
|
||||
|
||||
mesh.morphTargetInfluences[3] = (1 + Math.cos(4 * time)) / 2;
|
||||
camera.lookAt( scene.position );
|
||||
|
||||
if( mixer ) {
|
||||
mixer.update( delta );
|
||||
helper.update();
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
// -------
|
||||
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
||||
|
||||
var container, stats;
|
||||
|
||||
@@ -21,27 +21,27 @@
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.getElementById('container');
|
||||
container = document.getElementById( 'container' );
|
||||
|
||||
//
|
||||
|
||||
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 3500);
|
||||
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.fog = new THREE.Fog( 0x050505, 2000, 3500 );
|
||||
|
||||
//
|
||||
|
||||
scene.add(new THREE.AmbientLight(0x444444));
|
||||
scene.add( new THREE.AmbientLight( 0x444444 ) );
|
||||
|
||||
var light1 = new THREE.DirectionalLight(0xffffff, 0.5);
|
||||
light1.position.set(1, 1, 1);
|
||||
scene.add(light1);
|
||||
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 light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
|
||||
light2.position.set( 0, -1, 0 );
|
||||
scene.add( light2 );
|
||||
|
||||
//
|
||||
|
||||
@@ -49,29 +49,14 @@
|
||||
|
||||
var geometry = new THREE.BufferGeometry();
|
||||
|
||||
// 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 = new Uint16Array(triangles * 3);
|
||||
|
||||
for (var i = 0; i < indices.length; i++) {
|
||||
|
||||
indices[i] = i % (3 * chunkSize);
|
||||
|
||||
}
|
||||
|
||||
var positions = new Float32Array(triangles * 3 * 3);
|
||||
var normals = new Float32Array(triangles * 3 * 3);
|
||||
var colors = new Float32Array(triangles * 3 * 3);
|
||||
var positions = new Float32Array( triangles * 3 * 3 );
|
||||
var normals = new Float32Array( triangles * 3 * 3 );
|
||||
var colors = new Float32Array( triangles * 3 * 3 );
|
||||
|
||||
var color = new THREE.Color();
|
||||
|
||||
var n = 800, n2 = n / 2; // triangles spread in the cube
|
||||
var d = 12, d2 = d / 2; // individual triangle size
|
||||
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();
|
||||
@@ -80,7 +65,7 @@
|
||||
var cb = new THREE.Vector3();
|
||||
var ab = new THREE.Vector3();
|
||||
|
||||
for (var i = 0; i < positions.length; i += 9) {
|
||||
for ( var i = 0; i < positions.length; i += 9 ) {
|
||||
|
||||
// positions
|
||||
|
||||
@@ -100,27 +85,27 @@
|
||||
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 ] = ax;
|
||||
positions[ i + 1 ] = ay;
|
||||
positions[ i + 2 ] = az;
|
||||
|
||||
positions[i + 3] = bx;
|
||||
positions[i + 4] = by;
|
||||
positions[i + 5] = bz;
|
||||
positions[ i + 3 ] = bx;
|
||||
positions[ i + 4 ] = by;
|
||||
positions[ i + 5 ] = bz;
|
||||
|
||||
positions[i + 6] = cx;
|
||||
positions[i + 7] = cy;
|
||||
positions[i + 8] = cz;
|
||||
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);
|
||||
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.subVectors( pC, pB );
|
||||
ab.subVectors( pA, pB );
|
||||
cb.cross( ab );
|
||||
|
||||
cb.normalize();
|
||||
|
||||
@@ -128,91 +113,76 @@
|
||||
var ny = cb.y;
|
||||
var nz = cb.z;
|
||||
|
||||
normals[i] = nx;
|
||||
normals[i + 1] = ny;
|
||||
normals[i + 2] = nz;
|
||||
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 + 3 ] = nx;
|
||||
normals[ i + 4 ] = ny;
|
||||
normals[ i + 5 ] = nz;
|
||||
|
||||
normals[i + 6] = nx;
|
||||
normals[i + 7] = ny;
|
||||
normals[i + 8] = 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;
|
||||
var vx = ( x / n ) + 0.5;
|
||||
var vy = ( y / n ) + 0.5;
|
||||
var vz = ( z / n ) + 0.5;
|
||||
|
||||
color.setRGB(vx, vy, vz);
|
||||
color.setRGB( vx, vy, vz );
|
||||
|
||||
colors[i] = color.r;
|
||||
colors[i + 1] = color.g;
|
||||
colors[i + 2] = color.b;
|
||||
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 + 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;
|
||||
colors[ i + 6 ] = color.r;
|
||||
colors[ i + 7 ] = color.g;
|
||||
colors[ i + 8 ] = color.b;
|
||||
|
||||
}
|
||||
|
||||
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
|
||||
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
|
||||
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
var offsets = triangles / chunkSize;
|
||||
|
||||
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.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
|
||||
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
|
||||
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
|
||||
|
||||
geometry.computeBoundingSphere();
|
||||
|
||||
var material = new THREE.MeshPhongMaterial({
|
||||
var material = new THREE.MeshPhongMaterial( {
|
||||
color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
|
||||
side: THREE.DoubleSide, vertexColors: THREE.VertexColors
|
||||
});
|
||||
} );
|
||||
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
mesh = new THREE.Mesh( geometry, material );
|
||||
scene.add( mesh );
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: false });
|
||||
renderer.setClearColor(scene.fog.color);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer = new THREE.WebGLRenderer( { antialias: false } );
|
||||
renderer.setClearColor( scene.fog.color );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
container.appendChild(stats.domElement);
|
||||
container.appendChild( stats.domElement );
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
}
|
||||
|
||||
@@ -221,7 +191,7 @@
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
}
|
||||
|
||||
@@ -229,7 +199,7 @@
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
render();
|
||||
stats.update();
|
||||
@@ -243,7 +213,7 @@
|
||||
mesh.rotation.x = time * 0.25;
|
||||
mesh.rotation.y = time * 0.5;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
}
|
||||
@@ -18,27 +18,27 @@
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
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 = 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);
|
||||
cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT, 150, 1000 );
|
||||
|
||||
cameraPerspectiveHelper = new THREE.CameraHelper(cameraPerspective);
|
||||
scene.add(cameraPerspectiveHelper);
|
||||
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);
|
||||
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);
|
||||
cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho );
|
||||
scene.add( cameraOrthoHelper );
|
||||
|
||||
//
|
||||
|
||||
@@ -51,72 +51,81 @@
|
||||
cameraOrtho.rotation.y = Math.PI;
|
||||
cameraPerspective.rotation.y = Math.PI;
|
||||
|
||||
cameraRig = new THREE.Object3D();
|
||||
cameraRig = new THREE.Group();
|
||||
|
||||
cameraRig.add(cameraPerspective);
|
||||
cameraRig.add(cameraOrtho);
|
||||
cameraRig.add( cameraPerspective );
|
||||
cameraRig.add( cameraOrtho );
|
||||
|
||||
scene.add(cameraRig);
|
||||
scene.add( cameraRig );
|
||||
|
||||
//
|
||||
|
||||
mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 16, 8), new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }));
|
||||
scene.add(mesh);
|
||||
mesh = new THREE.Mesh(
|
||||
new THREE.SphereBufferGeometry( 100, 16, 8 ),
|
||||
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
|
||||
);
|
||||
scene.add( mesh );
|
||||
|
||||
var mesh2 = new THREE.Mesh(new THREE.SphereGeometry(50, 16, 8), new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }));
|
||||
var mesh2 = new THREE.Mesh(
|
||||
new THREE.SphereBufferGeometry( 50, 16, 8 ),
|
||||
new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
|
||||
);
|
||||
mesh2.position.y = 150;
|
||||
mesh.add(mesh2);
|
||||
mesh.add( mesh2 );
|
||||
|
||||
var mesh3 = new THREE.Mesh(new THREE.SphereGeometry(5, 16, 8), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true }));
|
||||
var mesh3 = new THREE.Mesh(
|
||||
new THREE.SphereBufferGeometry( 5, 16, 8 ),
|
||||
new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
|
||||
);
|
||||
mesh3.position.z = 150;
|
||||
cameraRig.add(mesh3);
|
||||
cameraRig.add( mesh3 );
|
||||
|
||||
//
|
||||
|
||||
var geometry = new THREE.Geometry();
|
||||
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
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);
|
||||
vertex.x = THREE.Math.randFloatSpread( 2000 );
|
||||
vertex.y = THREE.Math.randFloatSpread( 2000 );
|
||||
vertex.z = THREE.Math.randFloatSpread( 2000 );
|
||||
|
||||
geometry.vertices.push(vertex);
|
||||
geometry.vertices.push( vertex );
|
||||
|
||||
}
|
||||
|
||||
var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({ color: 0x888888 }));
|
||||
scene.add(particles);
|
||||
var particles = new THREE.Points( geometry, new THREE.PointsMaterial( { color: 0x888888 } ) );
|
||||
scene.add( particles );
|
||||
|
||||
//
|
||||
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
||||
renderer.domElement.style.position = "relative";
|
||||
container.appendChild(renderer.domElement);
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
renderer.autoClear = false;
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
container.appendChild( stats.domElement );
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
document.addEventListener( 'keydown', onKeyDown, false );
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function onKeyDown(event) {
|
||||
function onKeyDown ( event ) {
|
||||
|
||||
switch (event.keyCode) {
|
||||
switch( event.keyCode ) {
|
||||
|
||||
case 79: /*O*/
|
||||
|
||||
@@ -134,16 +143,16 @@
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function onWindowResize(event) {
|
||||
function onWindowResize( event ) {
|
||||
|
||||
SCREEN_WIDTH = window.innerWidth;
|
||||
SCREEN_HEIGHT = window.innerHeight;
|
||||
|
||||
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
||||
|
||||
camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
|
||||
camera.updateProjectionMatrix();
|
||||
@@ -151,9 +160,9 @@
|
||||
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.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();
|
||||
|
||||
@@ -163,7 +172,7 @@
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
render();
|
||||
stats.update();
|
||||
@@ -175,16 +184,16 @@
|
||||
|
||||
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.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);
|
||||
mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );
|
||||
mesh.children[ 0 ].position.z = 70 * Math.sin( r );
|
||||
|
||||
if (activeCamera === cameraPerspective) {
|
||||
if ( activeCamera === cameraPerspective ) {
|
||||
|
||||
cameraPerspective.fov = 35 + 30 * Math.sin(0.5 * r);
|
||||
cameraPerspective.fov = 35 + 30 * Math.sin( 0.5 * r );
|
||||
cameraPerspective.far = mesh.position.length();
|
||||
cameraPerspective.updateProjectionMatrix();
|
||||
|
||||
@@ -205,19 +214,19 @@
|
||||
|
||||
}
|
||||
|
||||
cameraRig.lookAt(mesh.position);
|
||||
cameraRig.lookAt( mesh.position );
|
||||
|
||||
renderer.clear();
|
||||
|
||||
activeHelper.visible = false;
|
||||
|
||||
renderer.setViewport(0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
|
||||
renderer.render(scene, activeCamera);
|
||||
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);
|
||||
renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
}
|
||||
+31
-34
@@ -5,17 +5,17 @@
|
||||
|
||||
() => {
|
||||
// ------- variable definitions that does not exist in the original code. These are for typescript.
|
||||
var material: THREE.SpriteMaterial;
|
||||
var container: HTMLElement;
|
||||
var pcBuffer: THREE.PointCloud;
|
||||
var v: any;
|
||||
var material:THREE.SpriteMaterial;
|
||||
var container:HTMLElement;
|
||||
var pcBuffer:THREE.Points;
|
||||
var v:any;
|
||||
// -------
|
||||
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
var renderer, scene, camera, stats;
|
||||
var pointclouds;
|
||||
var raycaster, intersects;
|
||||
var raycaster;
|
||||
var mouse = new THREE.Vector2();
|
||||
var intersection = null;
|
||||
var spheres = [];
|
||||
@@ -48,14 +48,14 @@
|
||||
var u = i / width;
|
||||
var v = j / length;
|
||||
var x = u - 0.5;
|
||||
var y = (Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8)) / 20;
|
||||
var y = ( Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8) ) / 20;
|
||||
var z = v - 0.5;
|
||||
|
||||
positions[3 * k] = x;
|
||||
positions[3 * k + 1] = y;
|
||||
positions[3 * k + 2] = z;
|
||||
|
||||
var intensity = (y + 0.1) * 5;
|
||||
var intensity = ( y + 0.1 ) * 5;
|
||||
colors[3 * k] = color.r * intensity;
|
||||
colors[3 * k + 1] = color.g * intensity;
|
||||
colors[3 * k + 2] = color.b * intensity;
|
||||
@@ -78,8 +78,8 @@
|
||||
|
||||
var geometry = generatePointCloudGeometry(color, width, length);
|
||||
|
||||
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
|
||||
var pointcloud = new THREE.PointCloud(geometry, material);
|
||||
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
|
||||
var pointcloud = new THREE.Points(geometry, material);
|
||||
|
||||
return pointcloud;
|
||||
|
||||
@@ -104,10 +104,10 @@
|
||||
|
||||
}
|
||||
|
||||
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
|
||||
|
||||
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
|
||||
var pointcloud = new THREE.PointCloud(geometry, material);
|
||||
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
|
||||
var pointcloud = new THREE.Points(geometry, material);
|
||||
|
||||
return pointcloud;
|
||||
|
||||
@@ -132,13 +132,11 @@
|
||||
|
||||
}
|
||||
|
||||
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
|
||||
geometry.addDrawCall(0, indices.length);
|
||||
|
||||
var offset = { start: 0, count: indices.length, index: 0 };
|
||||
geometry.offsets.push(offset);
|
||||
|
||||
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
|
||||
var pointcloud = new THREE.PointCloud(geometry, material);
|
||||
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
|
||||
var pointcloud = new THREE.Points(geometry, material);
|
||||
|
||||
return pointcloud;
|
||||
|
||||
@@ -147,7 +145,6 @@
|
||||
function generateRegularPointcloud(color, width, length) {
|
||||
|
||||
var geometry = new THREE.Geometry();
|
||||
var numPoints = width * length;
|
||||
|
||||
var colors = [];
|
||||
|
||||
@@ -160,17 +157,17 @@
|
||||
var u = i / width;
|
||||
var v = j / length;
|
||||
var x = u - 0.5;
|
||||
var y = (Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8)) / 20;
|
||||
var y = ( Math.cos(u * Math.PI * 8) + Math.sin(v * Math.PI * 8) ) / 20;
|
||||
var z = v - 0.5;
|
||||
var vec = new THREE.Vector3(x, y, z);
|
||||
var v2 = new THREE.Vector3(x, y, z);
|
||||
|
||||
var intensity = (y + 0.1) * 7;
|
||||
var intensity = ( y + 0.1 ) * 7;
|
||||
colors[3 * k] = color.r * intensity;
|
||||
colors[3 * k + 1] = color.g * intensity;
|
||||
colors[3 * k + 2] = color.b * intensity;
|
||||
|
||||
geometry.vertices.push(vec);
|
||||
colors[k] = (color.clone().multiplyScalar(intensity));
|
||||
geometry.vertices.push(v2);
|
||||
colors[k] = ( color.clone().multiplyScalar(intensity) );
|
||||
|
||||
k++;
|
||||
|
||||
@@ -181,8 +178,8 @@
|
||||
geometry.colors = colors;
|
||||
geometry.computeBoundingBox();
|
||||
|
||||
var material = new THREE.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
|
||||
var pointcloud = new THREE.PointCloud(geometry, material);
|
||||
var material = new THREE.PointsMaterial({size: pointSize, vertexColors: THREE.VertexColors});
|
||||
var pointcloud = new THREE.Points(geometry, material);
|
||||
|
||||
return pointcloud;
|
||||
|
||||
@@ -190,7 +187,7 @@
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.getElementById('container');
|
||||
var container = document.getElementById('container');
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
@@ -202,7 +199,7 @@
|
||||
|
||||
//
|
||||
|
||||
pcBuffer = generatePointcloud(new THREE.Color(1, 0, 0), width, length);
|
||||
var pcBuffer = generatePointcloud(new THREE.Color(1, 0, 0), width, length);
|
||||
pcBuffer.scale.set(10, 10, 10);
|
||||
pcBuffer.position.set(-5, 0, 5);
|
||||
scene.add(pcBuffer);
|
||||
@@ -227,7 +224,7 @@
|
||||
//
|
||||
|
||||
var sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
|
||||
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, shading: THREE.FlatShading });
|
||||
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, shading: THREE.FlatShading});
|
||||
|
||||
for (var i = 0; i < 40; i++) {
|
||||
|
||||
@@ -247,7 +244,7 @@
|
||||
//
|
||||
|
||||
raycaster = new THREE.Raycaster();
|
||||
raycaster.params.PointCloud.threshold = threshold;
|
||||
raycaster.params.Points.threshold = threshold;
|
||||
|
||||
//
|
||||
|
||||
@@ -267,8 +264,8 @@
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
||||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
||||
mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
|
||||
|
||||
}
|
||||
|
||||
@@ -300,13 +297,13 @@
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
|
||||
var intersections = raycaster.intersectObjects(pointclouds);
|
||||
intersection = (intersections.length) > 0 ? intersections[0] : null;
|
||||
intersection = ( intersections.length ) > 0 ? intersections[0] : null;
|
||||
|
||||
if (toggle > 0.02 && intersection !== null) {
|
||||
|
||||
spheres[spheresIndex].position.copy(intersection.point);
|
||||
spheres[spheresIndex].scale.set(1, 1, 1);
|
||||
spheresIndex = (spheresIndex + 1) % spheres.length;
|
||||
spheresIndex = ( spheresIndex + 1 ) % spheres.length;
|
||||
|
||||
toggle = 0;
|
||||
|
||||
@@ -7,10 +7,11 @@
|
||||
// ------- variable definitions that does not exist in the original code. These are for typescript.
|
||||
var morph: any;
|
||||
// -------
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
||||
|
||||
var camera, scene, renderer, dirLight, hemiLight;
|
||||
var morphs = [];
|
||||
var mixers = [];
|
||||
var stats;
|
||||
|
||||
var clock = new THREE.Clock();
|
||||
@@ -20,45 +21,45 @@
|
||||
|
||||
function init() {
|
||||
|
||||
var container = document.getElementById('container');
|
||||
var container = document.getElementById( 'container' );
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 5000);
|
||||
camera.position.set(0, 0, 250);
|
||||
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);
|
||||
scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
|
||||
scene.fog.color.setHSL( 0.6, 0, 1 );
|
||||
|
||||
/*
|
||||
controls = new THREE.TrackballControls( camera );
|
||||
controls = new THREE.TrackballControls( camera );
|
||||
|
||||
controls.rotateSpeed = 1.0;
|
||||
controls.zoomSpeed = 1.2;
|
||||
controls.panSpeed = 0.8;
|
||||
controls.rotateSpeed = 1.0;
|
||||
controls.zoomSpeed = 1.2;
|
||||
controls.panSpeed = 0.8;
|
||||
|
||||
controls.noZoom = false;
|
||||
controls.noPan = false;
|
||||
controls.noZoom = false;
|
||||
controls.noPan = false;
|
||||
|
||||
controls.staticMoving = true;
|
||||
controls.dynamicDampingFactor = 0.15;
|
||||
*/
|
||||
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);
|
||||
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 = 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;
|
||||
|
||||
@@ -74,108 +75,89 @@
|
||||
|
||||
dirLight.shadowCameraFar = 3500;
|
||||
dirLight.shadowBias = -0.0001;
|
||||
dirLight.shadowDarkness = 0.35;
|
||||
//dirLight.shadowCameraVisible = true;
|
||||
|
||||
// GROUND
|
||||
|
||||
var groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
|
||||
var groundMat = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x050505 });
|
||||
groundMat.color.setHSL(0.095, 1, 0.75);
|
||||
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
|
||||
var groundMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x050505 } );
|
||||
groundMat.color.setHSL( 0.095, 1, 0.75 );
|
||||
|
||||
var ground = new THREE.Mesh(groundGeo, groundMat);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
var ground = new THREE.Mesh( groundGeo, groundMat );
|
||||
ground.rotation.x = -Math.PI/2;
|
||||
ground.position.y = -33;
|
||||
scene.add(ground);
|
||||
scene.add( ground );
|
||||
|
||||
ground.receiveShadow = true;
|
||||
|
||||
// SKYDOME
|
||||
|
||||
var vertexShader = document.getElementById('vertexShader').textContent;
|
||||
var fragmentShader = document.getElementById('fragmentShader').textContent;
|
||||
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);
|
||||
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);
|
||||
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 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);
|
||||
var sky = new THREE.Mesh( skyGeo, skyMat );
|
||||
scene.add( sky );
|
||||
|
||||
// MODEL
|
||||
|
||||
var loader = new THREE.JSONLoader();
|
||||
|
||||
loader.load("models/animated/flamingo.js", function (geometry) {
|
||||
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 material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
|
||||
var mesh = new THREE.Mesh( geometry, material );
|
||||
|
||||
var s = 0.35;
|
||||
meshAnim.scale.set(s, s, s);
|
||||
meshAnim.position.y = 15;
|
||||
meshAnim.rotation.y = -1;
|
||||
mesh.scale.set( s, s, s );
|
||||
mesh.position.y = 15;
|
||||
mesh.rotation.y = -1;
|
||||
|
||||
meshAnim.castShadow = true;
|
||||
meshAnim.receiveShadow = true;
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
|
||||
scene.add(meshAnim);
|
||||
morphs.push(meshAnim);
|
||||
scene.add( mesh );
|
||||
|
||||
});
|
||||
var mixer = new THREE.AnimationMixer( mesh );
|
||||
mixer.addAction( new THREE.AnimationAction( geometry.animations[ 0 ] ).warpToDuration( 1 ) );
|
||||
mixers.push( mixer );
|
||||
|
||||
} );
|
||||
|
||||
// RENDERER
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setClearColor(scene.fog.color);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
||||
renderer.setClearColor( scene.fog.color );
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
renderer.shadowMapEnabled = true;
|
||||
renderer.shadowMapCullFace = THREE.CullFaceBack;
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.cullFace = THREE.CullFaceBack;
|
||||
|
||||
// STATS
|
||||
|
||||
stats = new Stats();
|
||||
container.appendChild(stats.domElement);
|
||||
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];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
document.addEventListener( 'keydown', onKeyDown, false );
|
||||
|
||||
}
|
||||
|
||||
@@ -184,20 +166,20 @@
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
}
|
||||
|
||||
function onKeyDown(event) {
|
||||
function onKeyDown ( event ) {
|
||||
|
||||
switch (event.keyCode) {
|
||||
switch ( event.keyCode ) {
|
||||
|
||||
case 72: /*h*/
|
||||
case 72: // h
|
||||
|
||||
hemiLight.visible = !hemiLight.visible;
|
||||
break;
|
||||
|
||||
case 68: /*d*/
|
||||
case 68: // d
|
||||
|
||||
dirLight.visible = !dirLight.visible;
|
||||
break;
|
||||
@@ -210,7 +192,7 @@
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
render();
|
||||
stats.update();
|
||||
@@ -223,14 +205,13 @@
|
||||
|
||||
//controls.update();
|
||||
|
||||
for (var i = 0; i < morphs.length; i++) {
|
||||
for ( var i = 0; i < mixers.length; i ++ ) {
|
||||
|
||||
morph = morphs[i];
|
||||
morph.updateAnimation(1000 * delta);
|
||||
mixers[ i ].update( delta );
|
||||
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
renderer.render( scene, camera );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
/// <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.PointCloudMaterial({ size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true });
|
||||
material.color.setHSL(1.0, 0.3, 0.7);
|
||||
|
||||
particles = new THREE.PointCloud(geometry, material);
|
||||
scene.add(particles);
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.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);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
|
||||
material.color.setHSL( 1.0, 0.3, 0.7 );
|
||||
|
||||
particles = new THREE.Points( geometry, material );
|
||||
scene.add( particles );
|
||||
|
||||
//
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
//
|
||||
|
||||
stats = new Stats();
|
||||
stats.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 );
|
||||
|
||||
}
|
||||
}
|
||||
@@ -25,14 +25,14 @@
|
||||
var width = window.innerWidth;
|
||||
var height = window.innerHeight;
|
||||
|
||||
camera = new THREE.PerspectiveCamera(60, width / height, 1, 2100);
|
||||
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 = 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);
|
||||
scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );
|
||||
|
||||
sceneOrtho = new THREE.Scene();
|
||||
|
||||
@@ -41,93 +41,93 @@
|
||||
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");
|
||||
var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png", undefined, createHUDSprites );
|
||||
var mapB = THREE.ImageUtils.loadTexture( "textures/sprite1.png" );
|
||||
mapC = THREE.ImageUtils.loadTexture( "textures/sprite2.png" );
|
||||
|
||||
group = new THREE.Group();
|
||||
|
||||
var materialC = new THREE.SpriteMaterial({ map: mapC, color: 0xffffff, fog: true });
|
||||
var materialB = new THREE.SpriteMaterial({ map: mapB, color: 0xffffff, fog: true });
|
||||
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++) {
|
||||
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) {
|
||||
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);
|
||||
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);
|
||||
var sprite = new THREE.Sprite( material );
|
||||
|
||||
sprite.position.set(x, y, z);
|
||||
sprite.position.set( x, y, z );
|
||||
sprite.position.normalize();
|
||||
sprite.position.multiplyScalar(radius);
|
||||
sprite.position.multiplyScalar( radius );
|
||||
|
||||
group.add(sprite);
|
||||
group.add( sprite );
|
||||
|
||||
}
|
||||
|
||||
scene.add(group);
|
||||
scene.add( group );
|
||||
|
||||
// renderer
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
renderer.autoClear = false; // To allow render overlay on top of sprited sphere
|
||||
|
||||
document.body.appendChild(renderer.domElement);
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
//
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
}
|
||||
|
||||
function createHUDSprites(texture) {
|
||||
function createHUDSprites ( texture ) {
|
||||
|
||||
var material = new THREE.SpriteMaterial({ map: 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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
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);
|
||||
spriteC = new THREE.Sprite( material );
|
||||
spriteC.scale.set( width, height, 1 );
|
||||
sceneOrtho.add( spriteC );
|
||||
|
||||
updateHUDSprites();
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
function updateHUDSprites() {
|
||||
function updateHUDSprites () {
|
||||
|
||||
var width = window.innerWidth / 2;
|
||||
var height = window.innerHeight / 2;
|
||||
@@ -137,13 +137,13 @@
|
||||
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
|
||||
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() {
|
||||
|
||||
@@ -161,13 +161,13 @@
|
||||
|
||||
updateHUDSprites();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
requestAnimationFrame( animate );
|
||||
render();
|
||||
|
||||
}
|
||||
@@ -176,28 +176,28 @@
|
||||
|
||||
var time = Date.now() / 1000;
|
||||
|
||||
for (var i = 0, l = group.children.length; i < l; i++) {
|
||||
for ( var i = 0, l = group.children.length; i < l; i ++ ) {
|
||||
|
||||
var sprite = group.children[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 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) {
|
||||
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);
|
||||
sprite.material.rotation += 0.1 * ( i / l );
|
||||
sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
|
||||
|
||||
if (material.map !== mapC) {
|
||||
if ( material.map !== mapC ) {
|
||||
|
||||
material.opacity = Math.sin(time + sprite.position.x * 0.01) * 0.4 + 0.6;
|
||||
material.opacity = Math.sin( time + sprite.position.x * 0.01 ) * 0.4 + 0.6;
|
||||
|
||||
}
|
||||
|
||||
@@ -208,9 +208,9 @@
|
||||
group.rotation.z = time * 1.0;
|
||||
|
||||
renderer.clear();
|
||||
renderer.render(scene, camera);
|
||||
renderer.render( scene, camera );
|
||||
renderer.clearDepth();
|
||||
renderer.render(sceneOrtho, cameraOrtho);
|
||||
renderer.render( sceneOrtho, cameraOrtho );
|
||||
|
||||
}
|
||||
}
|
||||
@@ -33,14 +33,14 @@ THE SOFTWARE.
|
||||
/// <reference path="./tests/webgl/webgl_geometries.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_helpers.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_interactive_cubes.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_interactive_raycasting_pointcloud.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_interactive_raycasting_points.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lensflares.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lights_heimsphere.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_lines_colors.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_loader_awd.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_materials.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_morphtargets.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_particles_billboards.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_points_billboards.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_postprocessing.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_shader.ts" />
|
||||
/// <reference path="./tests/webgl/webgl_sprites.ts" />
|
||||
|
||||
Vendored
+936
-751
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user