wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-09-10 11:40:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

update to three.js r70.

Browse Source
This commit is contained in:
satoru kimura
2015-01-20 13:19:00 +09:00
parent 2deb7cab53
commit 33bd3c9d76
32 changed files with 496 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
threejs/tests/webgl/webgl_animation_cloth.ts
+7 -14
View File
@@ -86,8 +86,8 @@
light.castShadow = true;
//light.shadowCameraVisible = true;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
var d = 300;
@@ -101,11 +101,6 @@
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');
@@ -151,17 +146,14 @@
// 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 });
var groundTexture = THREE.ImageUtils.loadTexture("textures/terrain/grasslight-big.jpg");
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(25, 25);
groundTexture.anisotropy = 16;
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20000, 20000), groundMaterial);
var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x111111, map: groundTexture });
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(20000, 20000), groundMaterial);
mesh.position.y = -250;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
@@ -211,6 +203,7 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color);
threejs/tests/webgl/webgl_animation_skinning_morph.ts
+71 -74
View File
@@ -5,16 +5,13 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material: THREE.SpriteMaterial;
var geometry: THREE.Geometry;
var dat:any;
// -------
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container,stats;
var container, stats;
var camera, scene;
var renderer;
@@ -28,56 +25,56 @@
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 groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );
var geometry = new THREE.PlaneBufferGeometry(16000, 16000);
var material = new THREE.MeshPhongMaterial({ emissive: 0xbbbbbb });
var ground = new THREE.Mesh( planeGeometry, groundMaterial );
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 );
var ambient = new THREE.AmbientLight(0x222222);
scene.add(ambient);
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.6);
light.position.set(0, 140, 500).multiplyScalar(1.1);
scene.add(light);
light.castShadow = true;
light.shadowMapWidth = 2048;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 2048;
var d = 390;
light.shadowCameraLeft = -d * 2;
light.shadowCameraRight = d * 2;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d * 1.5;
light.shadowCameraBottom = -d;
@@ -86,19 +83,19 @@
//
var light = new THREE.DirectionalLight( 0x497f13, 1 );
light.position.set( 0, -1, 0 );
scene.add( light );
var light = new THREE.DirectionalLight(0x497f13, 1);
light.position.set(0, -1, 0);
scene.add(light);
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
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";
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
@@ -109,16 +106,16 @@
// 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
@@ -126,7 +123,7 @@
//
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener('resize', onWindowResize, false);
}
@@ -138,18 +135,18 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(window.innerWidth, window.innerHeight);
}
function ensureLoop( animation ) {
function ensureLoop(animation) {
for ( var i = 0; i < animation.hierarchy.length; i ++ ) {
for (var i = 0; i < animation.hierarchy.length; i++) {
var bone = animation.hierarchy[ i ];
var bone = animation.hierarchy[i];
var first = bone.keys[ 0 ];
var last = bone.keys[ bone.keys.length - 1 ];
var first = bone.keys[0];
var last = bone.keys[bone.keys.length - 1];
last.pos = first.pos;
last.rot = first.rot;
@@ -159,9 +156,9 @@
}
function createScene( geometry, materials, x, y, z, s ) {
function createScene(geometry, materials, x, y, z, s) {
ensureLoop( geometry.animation );
ensureLoop(geometry.animation);
geometry.computeBoundingBox();
var bb = geometry.boundingBox;
@@ -182,16 +179,16 @@
//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 ++ ) {
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.ambient.copy(m.color);
//m.map = map;
//m.envMap = envMap;
@@ -205,20 +202,20 @@
}
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 );
var animation = new THREE.Animation(mesh, geometry.animation);
animation.play();
}
@@ -226,22 +223,22 @@
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);
}
@@ -249,7 +246,7 @@
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame(animate);
render();
stats.update();
@@ -260,38 +257,38 @@
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 );
camera.lookAt(scene.position);
// update skinning
THREE.AnimationHandler.update( delta );
THREE.AnimationHandler.update(delta);
if ( helper !== undefined ) helper.update();
if (helper !== undefined) helper.update();
// update morphs
if ( mesh ) {
if (mesh) {
var time = Date.now() * 0.001;
// mouth
mesh.morphTargetInfluences[ 1 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
mesh.morphTargetInfluences[1] = (1 + Math.sin(4 * time)) / 2;
// frown ?
mesh.morphTargetInfluences[ 2 ] = ( 1 + Math.sin( 2 * time ) ) / 2;
mesh.morphTargetInfluences[2] = (1 + Math.sin(2 * time)) / 2;
// eyes
mesh.morphTargetInfluences[ 3 ] = ( 1 + Math.cos( 4 * time ) ) / 2;
mesh.morphTargetInfluences[3] = (1 + Math.cos(4 * time)) / 2;
}
renderer.render( scene, camera );
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_buffergeometry.ts
+10 -9
View File
@@ -56,7 +56,7 @@
var chunkSize = 21845;
var indices = new Uint16Array( triangles * 3 );
var indices = new Uint16Array(triangles * 3);
for (var i = 0; i < indices.length; i++) {
@@ -64,9 +64,9 @@
}
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();
@@ -162,10 +162,10 @@
}
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 ) );
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;
@@ -194,7 +194,8 @@
//
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setClearColor(scene.fog.color, 1);
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.gammaInput = true;
threejs/tests/webgl/webgl_camera.ts
+6 -1
View File
@@ -17,6 +17,7 @@
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
@@ -85,13 +86,14 @@
}
var particles = new THREE.PointCloud( geometry, new THREE.PointCloudMaterial( { color: 0x888888 } ) );
var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({ color: 0x888888 }));
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.domElement.style.position = "relative";
container.appendChild(renderer.domElement);
@@ -168,6 +170,7 @@
}
function render() {
var r = Date.now() * 0.0005;
@@ -191,6 +194,7 @@
cameraOrthoHelper.visible = false;
} else {
cameraOrtho.far = mesh.position.length();
cameraOrtho.updateProjectionMatrix();
@@ -214,5 +218,6 @@
renderer.setViewport(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_custom_attributes.ts
+3 -2
View File
@@ -35,7 +35,7 @@
amplitude: { type: "f", value: 1.0 },
color: { type: "c", value: new THREE.Color(0xff2200) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/water.jpg") }
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/water.jpg") },
};
@@ -70,7 +70,8 @@
scene.add(sphere);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x050505, 1);
renderer.setClearColor(0x050505);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(WIDTH, HEIGHT);
var container = document.getElementById('container');
threejs/tests/webgl/webgl_geometries.ts
+1
View File
@@ -110,6 +110,7 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_helpers.ts
+1
View File
@@ -13,6 +13,7 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_interactive_cubes.ts
+6 -11
View File
@@ -5,7 +5,7 @@
() => {
var container, stats;
var camera, scene, projector, raycaster, renderer;
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 100, theta = 0;
@@ -30,14 +30,10 @@
scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff, 2);
var light = new THREE.DirectionalLight(0xffffff, 1);
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++) {
@@ -60,11 +56,11 @@
}
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
@@ -120,12 +116,11 @@
camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta));
camera.lookAt(scene.position);
camera.updateMatrixWorld();
// 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());
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts
+111 -118
View File
@@ -6,61 +6,59 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var material: THREE.SpriteMaterial;
var intersection: THREE.Intersection;
var container: HTMLElement;
var pcBuffer: THREE.PointCloud;
var v: any;
// -------
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
if (!Detector.webgl) Detector.addGetWebGLMessage();
var renderer, scene, camera, stats;
var pointclouds;
var projector, raycaster, intersects;
var mouse = { x: 1, y: 1 };
var vector = new THREE.Vector3();
intersection = null;
var raycaster, intersects;
var mouse = new THREE.Vector2();
var intersection = null;
var spheres = [];
var spheresIndex = 0;
var clock;
var threshold = 0.1;
var pointSize = 0.01;
var pointSize = 0.05;
var width = 150;
var length = 150;
var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
var rotateY = new THREE.Matrix4().makeRotationY(0.005);
init();
animate();
function generatePointCloudGeometry( color, width, length ){
function generatePointCloudGeometry(color, width, length) {
var geometry = new THREE.BufferGeometry();
var numPoints = width*length;
var numPoints = width * length;
var positions = new Float32Array( numPoints*3 );
var colors = new Float32Array( numPoints*3 );
var positions = new Float32Array(numPoints * 3);
var colors = new Float32Array(numPoints * 3);
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
var u = i / width;
var v = j / length;
var x = u - 0.5;
var y = ( Math.cos( u * Math.PI * 8 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
var 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;
positions[3 * k] = x;
positions[3 * k + 1] = y;
positions[3 * k + 2] = z;
var intensity = ( y + 0.1 ) * 5;
colors[ 3 * k ] = color.r * intensity;
colors[ 3 * k + 1 ] = color.g * intensity;
colors[ 3 * k + 2 ] = color.b * intensity;
var intensity = (y + 0.1) * 5;
colors[3 * k] = color.r * intensity;
colors[3 * k + 1] = color.g * intensity;
colors[3 * k + 2] = color.b * intensity;
k++;
@@ -68,85 +66,85 @@
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeBoundingBox();
return geometry;
}
function generatePointcloud( color, width, length ) {
function generatePointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
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.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateIndexedPointcloud( color, width, length ) {
function generateIndexedPointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array( numPoints );
var indices = new Uint16Array(numPoints);
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
indices[ k ] = k;
indices[k] = k;
k++;
}
}
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute('index', 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.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateIndexedWithOffsetPointcloud( color, width, length ){
function generateIndexedWithOffsetPointcloud(color, width, length) {
var geometry = generatePointCloudGeometry( color, width, length );
var geometry = generatePointCloudGeometry(color, width, length);
var numPoints = width * length;
var indices = new Uint16Array( numPoints );
var indices = new Uint16Array(numPoints);
var k = 0;
for( var i = 0; i < width; i++ ){
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
indices[ k ] = k;
indices[k] = k;
k++;
}
}
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1));
var offset = { start: 0, count: indices.length, index: 0 };
geometry.offsets.push( offset );
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.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
}
function generateRegularPointcloud( color, width, length ) {
function generateRegularPointcloud(color, width, length) {
var geometry = new THREE.Geometry();
var numPoints = width * length;
@@ -155,24 +153,24 @@
var k = 0;
for( var i = 0; i < width; i++ ) {
for (var i = 0; i < width; i++) {
for( var j = 0; j < length; j++ ) {
for (var j = 0; j < length; j++) {
var u = i / width;
v = j / length;
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;
v = new THREE.Vector3( x,y,z );
var vec = new THREE.Vector3(x, y, z);
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;
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( v );
colors[ k ] = ( color.clone().multiplyScalar( intensity ) );
geometry.vertices.push(vec);
colors[k] = (color.clone().multiplyScalar(intensity));
k++;
@@ -183,8 +181,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.PointCloudMaterial({ size: pointSize, vertexColors: THREE.VertexColors });
var pointcloud = new THREE.PointCloud(geometry, material);
return pointcloud;
@@ -192,63 +190,62 @@
function init() {
container = document.getElementById( 'container' );
container = document.getElementById('container');
scene = new THREE.Scene();
clock = new THREE.Clock();
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.applyMatrix( new THREE.Matrix4().makeTranslation( 0,0,20 ) );
camera.applyMatrix( new THREE.Matrix4().makeRotationX( -0.5 ) );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 20));
camera.applyMatrix(new THREE.Matrix4().makeRotationX(-0.5));
//
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 );
pcBuffer = generatePointcloud(new THREE.Color(1, 0, 0), width, length);
pcBuffer.scale.set(10, 10, 10);
pcBuffer.position.set(-5, 0, 5);
scene.add(pcBuffer);
var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0,1,0 ), width, length );
pcIndexed.scale.set( 10,10,10 );
pcIndexed.position.set( 5,0,5 );
scene.add( pcIndexed );
var pcIndexed = generateIndexedPointcloud(new THREE.Color(0, 1, 0), width, length);
pcIndexed.scale.set(10, 10, 10);
pcIndexed.position.set(5, 0, 5);
scene.add(pcIndexed);
var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0,1,1 ), width, length );
pcIndexedOffset.scale.set( 10,10,10 );
pcIndexedOffset.position.set( 5,0,-5 );
scene.add( pcIndexedOffset );
var pcIndexedOffset = generateIndexedWithOffsetPointcloud(new THREE.Color(0, 1, 1), width, length);
pcIndexedOffset.scale.set(10, 10, 10);
pcIndexedOffset.position.set(5, 0, -5);
scene.add(pcIndexedOffset);
var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
pcRegular.scale.set( 10,10,10 );
pcRegular.position.set( -5,0,-5 );
scene.add( pcRegular );
var pcRegular = generateRegularPointcloud(new THREE.Color(1, 0, 1), width, length);
pcRegular.scale.set(10, 10, 10);
pcRegular.position.set(-5, 0, -5);
scene.add(pcRegular);
pointclouds = [ pcBuffer, pcIndexed, pcIndexedOffset, pcRegular ];
pointclouds = [pcBuffer, pcIndexed, pcIndexedOffset, pcRegular];
//
var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 32 );
var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading } );
var sphereGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, shading: THREE.FlatShading });
for ( var i = 0; i < 40; i++ ) {
for (var i = 0; i < 40; i++) {
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
scene.add( sphere );
spheres.push( sphere );
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
spheres.push(sphere);
}
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = threshold;
@@ -257,21 +254,21 @@
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 );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove( event ) {
function onDocumentMouseMove(event) {
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;
}
@@ -280,13 +277,13 @@
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame(animate);
render();
stats.update();
@@ -297,39 +294,35 @@
function render() {
camera.applyMatrix( rotateY );
camera.updateMatrixWorld( true );
camera.applyMatrix(rotateY);
camera.updateMatrixWorld();
vector.set( mouse.x, mouse.y, 0.1 );
raycaster.setFromCamera(mouse, camera);
projector.unprojectVector( vector, camera );
var intersections = raycaster.intersectObjects(pointclouds);
intersection = (intersections.length) > 0 ? intersections[0] : null;
raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
if (toggle > 0.02 && intersection !== null) {
var intersections = raycaster.intersectObjects( pointclouds );
intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
if ( toggle > 0.02 && intersection !== null) {
spheres[ spheresIndex ].position.copy( intersection.point );
spheres[ spheresIndex ].scale.set( 1, 1, 1 );
spheresIndex = ( spheresIndex + 1 ) % spheres.length;
spheres[spheresIndex].position.copy(intersection.point);
spheres[spheresIndex].scale.set(1, 1, 1);
spheresIndex = (spheresIndex + 1) % spheres.length;
toggle = 0;
}
for ( var i = 0; i < spheres.length; i++ ) {
for (var i = 0; i < spheres.length; i++) {
var sphere = spheres[ i ];
sphere.scale.multiplyScalar( 0.98 );
sphere.scale.clampScalar( 0.01, 1 );
var sphere = spheres[i];
sphere.scale.multiplyScalar(0.98);
sphere.scale.clampScalar(0.01, 1);
}
toggle += clock.getDelta();
renderer.render( scene, camera );
renderer.render(scene, camera);
}
}
threejs/tests/webgl/webgl_lensflares.ts
+3 -3
View File
@@ -116,7 +116,7 @@
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
lensFlare.customUpdateCallback = lensFlareUpdateCallback;
lensFlare.position.copy( light.position );
lensFlare.position.copy(light.position);
scene.add(lensFlare);
@@ -125,9 +125,9 @@
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(scene.fog.color);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(scene.fog.color, 1);
container.appendChild(renderer.domElement);
//
threejs/tests/webgl/webgl_lights_heimsphere.ts
+3 -3
View File
@@ -79,7 +79,7 @@
// GROUND
var groundGeo = new THREE.PlaneGeometry(10000, 10000);
var groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
var groundMat = new THREE.MeshPhongMaterial({ ambient: 0xffffff, color: 0xffffff, specular: 0x050505 });
groundMat.color.setHSL(0.095, 1, 0.75);
@@ -140,11 +140,11 @@
// 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.setClearColor(scene.fog.color, 1);
renderer.gammaInput = true;
renderer.gammaOutput = true;
threejs/tests/webgl/webgl_lines_colors.ts
+2 -1
View File
@@ -6,7 +6,7 @@
() => {
// ------- variable definitions that does not exist in the original code. These are for typescript.
var hilbert3D: any;
var stats: any;
var stats: Stats;
// -------
if (!Detector.webgl) Detector.addGetWebGLMessage();
@@ -36,6 +36,7 @@
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
threejs/tests/webgl/webgl_loader_awd.ts
+1 -1
View File
@@ -72,8 +72,8 @@
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
threejs/tests/webgl/webgl_materials.ts
+6 -3
View File
@@ -5,10 +5,10 @@
() => {
// ------- 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;
@@ -85,11 +85,14 @@
}
// isn't used.
// geometry_pieces.materials = materials;
materials.push(new THREE.MeshFaceMaterial(materials));
objects = [];
var sphere, material;
var sphere, geometry: THREE.Geometry, material;
for (var i = 0, l = materials.length; i < l; i++) {
@@ -136,8 +139,8 @@
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//
threejs/tests/webgl/webgl_morphtargets.ts
+5 -5
View File
@@ -24,7 +24,6 @@
animate();
function init() {
var light: THREE.Light;
container = document.createElement('div');
document.body.appendChild(container);
@@ -35,12 +34,12 @@
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 15000);
light = new THREE.PointLight(0xff2200);
var light = new THREE.PointLight(0xff2200);
light.position.set(100, 100, 100);
scene.add(light);
light = new THREE.AmbientLight(0x111111);
scene.add(light);
var amblight = new THREE.AmbientLight(0x111111);
scene.add(amblight);
var geometry = new THREE.BoxGeometry(100, 100, 100);
@@ -77,7 +76,8 @@
//
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x222222, 1);
renderer.setClearColor(0x222222);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_particles_billboards.ts
+3 -3
View File
@@ -42,16 +42,16 @@
}
material = new THREE.PointCloudMaterial({ size: 35, sizeAttenuation: false, map: sprite, transparent: true });
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);
particles.sortParticles = true;
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ clearAlpha: 1 });
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_postprocessing.ts
+1
View File
@@ -13,6 +13,7 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
threejs/tests/webgl/webgl_shader.ts
+5 -4
View File
@@ -24,7 +24,7 @@
scene = new THREE.Scene();
var geometry = new THREE.PlaneGeometry(2, 2);
var geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
time: { type: "f", value: 1.0 },
@@ -43,6 +43,7 @@
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
stats = new Stats();
@@ -58,11 +59,11 @@
function onWindowResize() {
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.resolution.value.x = renderer.domElement.width;
uniforms.resolution.value.y = renderer.domElement.height;
}
//
threejs/tests/webgl/webgl_sprites.ts
+2 -1
View File
@@ -45,7 +45,7 @@
var mapB = THREE.ImageUtils.loadTexture("textures/sprite1.png");
mapC = THREE.ImageUtils.loadTexture("textures/sprite2.png");
group = new THREE.Object3D();
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 });
@@ -84,6 +84,7 @@
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false; // To allow render overlay on top of sprited sphere