diff --git a/threejs/tests/canvas/canvas_camera_orthographic.ts b/threejs/tests/canvas/canvas_camera_orthographic.ts index 54ac792d2..c4f932820 100644 --- a/threejs/tests/canvas/canvas_camera_orthographic.ts +++ b/threejs/tests/canvas/canvas_camera_orthographic.ts @@ -4,7 +4,6 @@ // https://github.com/mrdoob/three.js/blob/master/examples/canvas_camera_orthographic.html () => { - var container, stats; var camera, scene, renderer; @@ -47,10 +46,9 @@ } - var material1 = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }); + var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2 }); - var line = new THREE.Line(geometry, material1); - line.mode = THREE.LinePieces; + var line = new THREE.Line(geometry, material, THREE.LinePieces); scene.add(line); // Cubes @@ -93,8 +91,8 @@ renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); stats = new Stats(); diff --git a/threejs/tests/canvas/canvas_geometry_cube.ts b/threejs/tests/canvas/canvas_geometry_cube.ts index c8f6b377c..80017a402 100644 --- a/threejs/tests/canvas/canvas_geometry_cube.ts +++ b/threejs/tests/canvas/canvas_geometry_cube.ts @@ -61,7 +61,7 @@ // Plane - var geometry2 = new THREE.PlaneGeometry(200, 200); + var geometry2 = new THREE.PlaneBufferGeometry(200, 200); geometry2.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI / 2)); var material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, overdraw: 0.5 }); @@ -71,8 +71,8 @@ renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); stats = new Stats(); diff --git a/threejs/tests/canvas/canvas_interactive_cubes_tween.ts b/threejs/tests/canvas/canvas_interactive_cubes_tween.ts index 865e07023..be4c46f05 100644 --- a/threejs/tests/canvas/canvas_interactive_cubes_tween.ts +++ b/threejs/tests/canvas/canvas_interactive_cubes_tween.ts @@ -6,7 +6,10 @@ () => { var container, stats; - var camera, scene, projector, renderer; + var camera, scene, renderer; + + var raycaster; + var mouse; init(); animate(); @@ -48,12 +51,15 @@ } - projector = new THREE.Projector(); + // + + raycaster = new THREE.Raycaster(); + mouse = new THREE.Vector2(); renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); - container.appendChild(renderer.domElement); stats = new Stats(); @@ -62,6 +68,7 @@ container.appendChild(stats.domElement); document.addEventListener('mousedown', onDocumentMouseDown, false); + document.addEventListener('touchstart', onDocumentTouchStart, false); // @@ -78,14 +85,24 @@ } + function onDocumentTouchStart(event) { + + event.preventDefault(); + + event.clientX = event.touches[0].clientX; + event.clientY = event.touches[0].clientY; + onDocumentMouseDown(event); + + } + function onDocumentMouseDown(event) { event.preventDefault(); - var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1, 0.5); - projector.unprojectVector(vector, camera); + mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1; + mouse.y = - (event.clientY / renderer.domElement.height) * 2 + 1; - var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); + raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); diff --git a/threejs/tests/canvas/canvas_lights_pointlights.ts b/threejs/tests/canvas/canvas_lights_pointlights.ts index ad1a103d5..e810f2b21 100644 --- a/threejs/tests/canvas/canvas_lights_pointlights.ts +++ b/threejs/tests/canvas/canvas_lights_pointlights.ts @@ -42,14 +42,14 @@ } - var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) ); - light1.add( sprite ); + var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xff0040, program: program })); + light1.add(sprite); - var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) ); - light2.add( sprite ); + var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x0040ff, program: program })); + light2.add(sprite); - var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) ); - light3.add( sprite ); + var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0x80ff80, program: program })); + light3.add(sprite); loader = new THREE.JSONLoader(); loader.load('obj/WaltHeadLo.js', function (geometry) { @@ -60,6 +60,7 @@ }); renderer = new THREE.CanvasRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); @@ -93,17 +94,17 @@ if (mesh) mesh.rotation.y -= 0.01; - light1.position.x = Math.sin( time * 0.7 ) * 30; - light1.position.y = Math.cos( time * 0.5 ) * 40; - light1.position.z = Math.cos( time * 0.3 ) * 30; + light1.position.x = Math.sin(time * 0.7) * 30; + light1.position.y = Math.cos(time * 0.5) * 40; + light1.position.z = Math.cos(time * 0.3) * 30; - light2.position.x = Math.cos( time * 0.3 ) * 30; - light2.position.y = Math.sin( time * 0.5 ) * 40; - light2.position.z = Math.sin( time * 0.7 ) * 30; + light2.position.x = Math.cos(time * 0.3) * 30; + light2.position.y = Math.sin(time * 0.5) * 40; + light2.position.z = Math.sin(time * 0.7) * 30; - light3.position.x = Math.sin( time * 0.7 ) * 30; - light3.position.y = Math.cos( time * 0.3 ) * 40; - light3.position.z = Math.sin( time * 0.5 ) * 30; + light3.position.x = Math.sin(time * 0.7) * 30; + light3.position.y = Math.cos(time * 0.3) * 40; + light3.position.z = Math.sin(time * 0.5) * 30; renderer.render(scene, camera); diff --git a/threejs/tests/canvas/canvas_materials.ts b/threejs/tests/canvas/canvas_materials.ts index e65dfe3be..d5aa8bc65 100644 --- a/threejs/tests/canvas/canvas_materials.ts +++ b/threejs/tests/canvas/canvas_materials.ts @@ -5,9 +5,6 @@ () => { // ------- variable definitions that does not exist in the original code. These are for typescript. - var materials: THREE.Material[]; - var debugContext: any; - // ------- var container, stats; var camera, scene, renderer, objects; @@ -44,15 +41,14 @@ var material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.2 }); - var line = new THREE.Line(geometry, material); - line.mode = THREE.LinePieces; + var line = new THREE.Line(geometry, material, THREE.LinePieces); scene.add(line); // Spheres var geometry2 = new THREE.SphereGeometry(100, 14, 7); - materials = [ + var materials: THREE.Material[] = [ new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, side: THREE.DoubleSide }), new THREE.MeshBasicMaterial({ color: 0xff0000, blending: THREE.AdditiveBlending }), @@ -61,8 +57,7 @@ new THREE.MeshDepthMaterial({ overdraw: 0.5 }), new THREE.MeshNormalMaterial({ overdraw: 0.5 }), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('textures/land_ocean_ice_cloud_2048.jpg') }), - new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', new THREE.SphericalReflectionMapping()), overdraw: 0.5 }), - new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', new THREE.SphericalRefractionMapping()), overdraw: 0.5 }) + new THREE.MeshBasicMaterial({ envMap: THREE.ImageUtils.loadTexture('textures/envmap.png', THREE.SphericalReflectionMapping), overdraw: 0.5 }) ]; @@ -79,7 +74,7 @@ for (var i = 0, l = materials.length; i < l; i++) { - var sphere = new THREE.Mesh(geometry2, materials[i]); + var sphere = new THREE.Mesh(geometry, materials[i]); sphere.position.x = (i % 5) * 200 - 400; sphere.position.z = Math.floor(i / 5) * 200 - 200; @@ -103,9 +98,9 @@ } - // Lights + // Lights - scene.add(new THREE.AmbientLight(Math.random() * 0x202020)); + scene.add(new THREE.AmbientLight(Math.random() * 0x202020)); var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff); directionalLight.position.x = Math.random() - 0.5; @@ -117,11 +112,12 @@ pointLight = new THREE.PointLight(0xffffff, 1); scene.add(pointLight); - var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) ); - sprite.scale.set( 8, 8, 8 ); - pointLight.add( sprite ); + var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({ color: 0xffffff, program: program })); + sprite.scale.set(8, 8, 8); + pointLight.add(sprite); renderer = new THREE.CanvasRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); @@ -134,7 +130,7 @@ container.appendChild(debugCanvas); - debugContext = debugCanvas.getContext('2d'); + var debugContext = debugCanvas.getContext('2d'); debugContext.setTransform(1, 0, 0, 1, 256, 256); debugContext.strokeStyle = '#000000'; @@ -198,10 +194,9 @@ } - pointLight.position.x = Math.sin( timer * 7 ) * 300; - pointLight.position.y = Math.cos( timer * 5 ) * 400; - pointLight.position.z = Math.cos( timer * 3 ) * 300; - + pointLight.position.x = Math.sin(timer * 7) * 300; + pointLight.position.y = Math.cos(timer * 5) * 400; + pointLight.position.z = Math.cos(timer * 3) * 300; renderer.render(scene, camera); diff --git a/threejs/tests/canvas/canvas_particles_floor.ts b/threejs/tests/canvas/canvas_particles_floor.ts index 4433138dc..69ff28da1 100644 --- a/threejs/tests/canvas/canvas_particles_floor.ts +++ b/threejs/tests/canvas/canvas_particles_floor.ts @@ -47,6 +47,7 @@ } renderer = new THREE.CanvasRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); diff --git a/threejs/tests/css3d/css3d_periodictable.ts b/threejs/tests/css3d/css3d_periodictable.ts index 2f304dac0..95e668afe 100644 --- a/threejs/tests/css3d/css3d_periodictable.ts +++ b/threejs/tests/css3d/css3d_periodictable.ts @@ -6,7 +6,6 @@ () => { // ------- variable definitions that does not exist in the original code. These are for typescript. - var object: any; // ------- var table = [ "H", "Hydrogen", "1.00794", 1, 1, @@ -160,7 +159,7 @@ var symbol = document.createElement('div'); symbol.className = 'symbol'; - symbol.textContent = (table[i]).toString(); + symbol.textContent = table[i].toString(); element.appendChild(symbol); var details = document.createElement('div'); @@ -168,16 +167,17 @@ details.innerHTML = table[i + 1] + '
' + table[i + 2]; element.appendChild(details); - object = new THREE.CSS3DObject(element); - object.position.x = Math.random() * 4000 - 2000; - object.position.y = Math.random() * 4000 - 2000; - object.position.z = Math.random() * 4000 - 2000; - scene.add(object); + var cssobject = new THREE.CSS3DObject(element); + cssobject.position.x = Math.random() * 4000 - 2000; + cssobject.position.y = Math.random() * 4000 - 2000; + cssobject.position.z = Math.random() * 4000 - 2000; + scene.add(cssobject); - objects.push(object); + objects.push(cssobject); // - object = new THREE.Object3D(); + + var object = new THREE.Object3D(); object.position.x = (table[i + 3] * 140) - 1330; object.position.y = - (table[i + 4] * 180) + 990; @@ -247,6 +247,7 @@ } // + renderer = new THREE.CSS3DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.domElement.style.position = 'absolute'; @@ -288,7 +289,7 @@ }, false); - transform(targets.table, 5000); + transform(targets.table, 2000); // @@ -316,6 +317,7 @@ .start(); } + new TWEEN.Tween(this) .to({}, duration * 2) .onUpdate(render) diff --git a/threejs/tests/css3d/css3d_sprites.ts b/threejs/tests/css3d/css3d_sprites.ts index 0b69a85bf..919c4a8bf 100644 --- a/threejs/tests/css3d/css3d_sprites.ts +++ b/threejs/tests/css3d/css3d_sprites.ts @@ -27,16 +27,16 @@ scene = new THREE.Scene(); - var image = document.createElement( 'img' ); - image.addEventListener( 'load', function ( event ) { + var image = document.createElement('img'); + image.addEventListener('load', function (event) { - for ( var i = 0; i < particlesTotal; i ++ ) { + for (var i = 0; i < particlesTotal; i++) { - var object = new THREE.CSS3DSprite( image.cloneNode() ); + var object = new THREE.CSS3DSprite(image.cloneNode()); object.position.x = Math.random() * 4000 - 2000, object.position.y = Math.random() * 4000 - 2000, object.position.z = Math.random() * 4000 - 2000 - scene.add(object); + scene.add(object); objects.push(object); diff --git a/threejs/tests/math/test_unit_math.ts b/threejs/tests/math/test_unit_math.ts index a30e60dcd..312a16b24 100644 --- a/threejs/tests/math/test_unit_math.ts +++ b/threejs/tests/math/test_unit_math.ts @@ -779,6 +779,20 @@ return true; }; + var eulerEquals = function (a, b, tolerance?: any) { + tolerance = tolerance || 0.0001; + var diff = Math.abs(a.x - b.x) + Math.abs(a.y - b.y) + Math.abs(a.z - b.z); + return (diff < tolerance); + }; + + + var quatEquals = function (a, b, tolerance?: any) { + tolerance = tolerance || 0.0001; + var diff = Math.abs(a.x - b.x) + Math.abs(a.y - b.y) + Math.abs(a.z - b.z) + Math.abs(a.w - b.w); + return (diff < tolerance); + }; + + test( "constructor/equals", function() { var a = new THREE.Euler(); ok( a.equals( eulerZero ), "Passed!" ); @@ -799,13 +813,23 @@ }); - test( "set", function() { + test("set/setFromVector3/toVector3", function () { var a = new THREE.Euler(); a.set( 0, 1, 0, "ZYX" ); ok( a.equals( eulerAzyx ), "Passed!" ); ok( ! a.equals( eulerAxyz ), "Passed!" ); - ok( ! a.equals( eulerZero ), "Passed!" ); + ok(!a.equals(eulerZero), "Passed!"); + + var vec = new THREE.Vector3(0, 1, 0); + + var b = new THREE.Euler().setFromVector3(vec, "ZYX"); + console.log(a, b); + ok(a.equals(b), "Passed!"); + + var c = b.toVector3(); + console.log(c, vec); + ok(c.equals(vec), "Passed!"); }); test( "Quaternion.setFromEuler/Euler.fromQuaternion", function() { @@ -816,7 +840,7 @@ var v2 = new THREE.Euler().setFromQuaternion( q, v.order ); var q2 = new THREE.Quaternion().setFromEuler( v2 ); - ok( q.equals( q2 ), "Passed!" ); + ok(eulerEquals(q, q2), "Passed!"); } }); @@ -841,14 +865,33 @@ v.reorder( 'YZX' ); var q2 = new THREE.Quaternion().setFromEuler( v ); - ok( q.equals( q2 ), "Passed!" ); + ok(quatEquals(q, q2), "Passed!"); v.reorder( 'ZXY' ); var q3 = new THREE.Quaternion().setFromEuler( v ); - ok( q.equals( q3 ), "Passed!" ); + ok(quatEquals(q, q3), "Passed!"); } }); + test("gimbalLocalQuat", function () { + // known problematic quaternions + var q1 = new THREE.Quaternion(0.5207769385244341, -0.4783214164122354, 0.520776938524434, 0.47832141641223547); + var q2 = new THREE.Quaternion(0.11284905712620674, 0.6980437630368944, -0.11284905712620674, 0.6980437630368944); + + var eulerOrder = "ZYX"; + + // create Euler directly from a Quaternion + var eViaQ1 = new THREE.Euler().setFromQuaternion(q1, eulerOrder); // there is likely a bug here + + // create Euler from Quaternion via an intermediate Matrix4 + var mViaQ1 = new THREE.Matrix4().makeRotationFromQuaternion(q1); + var eViaMViaQ1 = new THREE.Euler().setFromRotationMatrix(mViaQ1, eulerOrder); + + // the results here are different + ok(eulerEquals(eViaQ1, eViaMViaQ1), "Passed!"); // this result is correct + + }); + // -------------------------------------------- Frustum var unit3 = new THREE.Vector3( 1, 0, 0 ); @@ -1483,6 +1526,36 @@ } }); + test("makeBasis/extractBasis", function () { + var identityBasis = [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1)]; + var a = new THREE.Matrix4().makeBasis(identityBasis[0], identityBasis[1], identityBasis[2]); + var identity = new THREE.Matrix4(); + ok(matrixEquals4(a, identity), "Passed!"); + + var testBases = [[new THREE.Vector3(0, 1, 0), new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 0, 1)]]; + for (var i = 0; i < testBases.length; i++) { + var testBasis = testBases[i]; + var b = new THREE.Matrix4().makeBasis(testBasis[0], testBasis[1], testBasis[2]); + var outBasis = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()]; + b.extractBasis(outBasis[0], outBasis[1], outBasis[2]); + // check what goes in, is what comes out. + for (var j = 0; j < outBasis.length; j++) { + console.log(outBasis[j], testBasis[j]); + ok(outBasis[j].equals(testBasis[j]), "Passed!"); + } + + // get the basis out the hard war + for (var j = 0; j < identityBasis.length; j++) { + outBasis[j].copy(identityBasis[j]); + outBasis[j].applyMatrix4(b); + } + // did the multiply method of basis extraction work? + for (var j = 0; j < outBasis.length; j++) { + ok(outBasis[j].equals(testBasis[j]), "Passed!"); + } + } + }); + test( "transpose", function() { var a = new THREE.Matrix4(); var b = a.clone().transpose(); diff --git a/threejs/tests/three-tests-setup.ts b/threejs/tests/three-tests-setup.ts index edb913a3d..27e47e524 100644 --- a/threejs/tests/three-tests-setup.ts +++ b/threejs/tests/three-tests-setup.ts @@ -3,6 +3,7 @@ ////////////////////////////////////////////////////////////// /// +/// /// /// /// diff --git a/threejs/tests/webgl/webgl_animation_cloth.ts b/threejs/tests/webgl/webgl_animation_cloth.ts index 58b29f3b5..c85c0d09e 100644 --- a/threejs/tests/webgl/webgl_animation_cloth.ts +++ b/threejs/tests/webgl/webgl_animation_cloth.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_animation_skinning_morph.ts b/threejs/tests/webgl/webgl_animation_skinning_morph.ts index 207a83bb2..f38376efb 100644 --- a/threejs/tests/webgl/webgl_animation_skinning_morph.ts +++ b/threejs/tests/webgl/webgl_animation_skinning_morph.ts @@ -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); } } \ No newline at end of file diff --git a/threejs/tests/webgl/webgl_buffergeometry.ts b/threejs/tests/webgl/webgl_buffergeometry.ts index de4ad2aee..2923cba76 100644 --- a/threejs/tests/webgl/webgl_buffergeometry.ts +++ b/threejs/tests/webgl/webgl_buffergeometry.ts @@ -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; diff --git a/threejs/tests/webgl/webgl_camera.ts b/threejs/tests/webgl/webgl_camera.ts index 531d97fc4..4ebb7f7bb 100644 --- a/threejs/tests/webgl/webgl_camera.ts +++ b/threejs/tests/webgl/webgl_camera.ts @@ -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); + } } \ No newline at end of file diff --git a/threejs/tests/webgl/webgl_custom_attributes.ts b/threejs/tests/webgl/webgl_custom_attributes.ts index 93d9bfbe9..e7819f568 100644 --- a/threejs/tests/webgl/webgl_custom_attributes.ts +++ b/threejs/tests/webgl/webgl_custom_attributes.ts @@ -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'); diff --git a/threejs/tests/webgl/webgl_geometries.ts b/threejs/tests/webgl/webgl_geometries.ts index f56a5ab41..f5de1e725 100644 --- a/threejs/tests/webgl/webgl_geometries.ts +++ b/threejs/tests/webgl/webgl_geometries.ts @@ -110,6 +110,7 @@ // renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); diff --git a/threejs/tests/webgl/webgl_helpers.ts b/threejs/tests/webgl/webgl_helpers.ts index 3f324316b..07f3f2db8 100644 --- a/threejs/tests/webgl/webgl_helpers.ts +++ b/threejs/tests/webgl/webgl_helpers.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_interactive_cubes.ts b/threejs/tests/webgl/webgl_interactive_cubes.ts index a99345e9f..26bd80590 100644 --- a/threejs/tests/webgl/webgl_interactive_cubes.ts +++ b/threejs/tests/webgl/webgl_interactive_cubes.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts b/threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts index 330abd001..980109f70 100644 --- a/threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts +++ b/threejs/tests/webgl/webgl_interactive_raycasting_pointcloud.ts @@ -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); } } \ No newline at end of file diff --git a/threejs/tests/webgl/webgl_lensflares.ts b/threejs/tests/webgl/webgl_lensflares.ts index bb99d701c..50c82555c 100644 --- a/threejs/tests/webgl/webgl_lensflares.ts +++ b/threejs/tests/webgl/webgl_lensflares.ts @@ -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); // diff --git a/threejs/tests/webgl/webgl_lights_heimsphere.ts b/threejs/tests/webgl/webgl_lights_heimsphere.ts index 4339fe633..2d9a29ad7 100644 --- a/threejs/tests/webgl/webgl_lights_heimsphere.ts +++ b/threejs/tests/webgl/webgl_lights_heimsphere.ts @@ -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; diff --git a/threejs/tests/webgl/webgl_lines_colors.ts b/threejs/tests/webgl/webgl_lines_colors.ts index 9a9621479..08501b53b 100644 --- a/threejs/tests/webgl/webgl_lines_colors.ts +++ b/threejs/tests/webgl/webgl_lines_colors.ts @@ -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; diff --git a/threejs/tests/webgl/webgl_loader_awd.ts b/threejs/tests/webgl/webgl_loader_awd.ts index 71c9c99f6..455d1a375 100644 --- a/threejs/tests/webgl/webgl_loader_awd.ts +++ b/threejs/tests/webgl/webgl_loader_awd.ts @@ -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(); diff --git a/threejs/tests/webgl/webgl_materials.ts b/threejs/tests/webgl/webgl_materials.ts index da1c311da..5da02b84a 100644 --- a/threejs/tests/webgl/webgl_materials.ts +++ b/threejs/tests/webgl/webgl_materials.ts @@ -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); // diff --git a/threejs/tests/webgl/webgl_morphtargets.ts b/threejs/tests/webgl/webgl_morphtargets.ts index db4fe0f2b..a8377ba6b 100644 --- a/threejs/tests/webgl/webgl_morphtargets.ts +++ b/threejs/tests/webgl/webgl_morphtargets.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_particles_billboards.ts b/threejs/tests/webgl/webgl_particles_billboards.ts index a2f62fc6a..96b77588c 100644 --- a/threejs/tests/webgl/webgl_particles_billboards.ts +++ b/threejs/tests/webgl/webgl_particles_billboards.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_postprocessing.ts b/threejs/tests/webgl/webgl_postprocessing.ts index 707804c28..440e73ddd 100644 --- a/threejs/tests/webgl/webgl_postprocessing.ts +++ b/threejs/tests/webgl/webgl_postprocessing.ts @@ -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); diff --git a/threejs/tests/webgl/webgl_shader.ts b/threejs/tests/webgl/webgl_shader.ts index a55d35b6d..a4937efaf 100644 --- a/threejs/tests/webgl/webgl_shader.ts +++ b/threejs/tests/webgl/webgl_shader.ts @@ -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; + } // diff --git a/threejs/tests/webgl/webgl_sprites.ts b/threejs/tests/webgl/webgl_sprites.ts index 360a4f53d..c7e2d4f84 100644 --- a/threejs/tests/webgl/webgl_sprites.ts +++ b/threejs/tests/webgl/webgl_sprites.ts @@ -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 diff --git a/threejs/three-canvasrenderer.d.ts b/threejs/three-canvasrenderer.d.ts index 62f66fc99..bcfb22684 100644 --- a/threejs/three-canvasrenderer.d.ts +++ b/threejs/three-canvasrenderer.d.ts @@ -29,7 +29,6 @@ declare module THREE { constructor(parameters?: CanvasRendererParameters); domElement: HTMLCanvasElement; - devicePixelRatio: number; autoClear: boolean; sortObjects: boolean; sortElements: boolean; @@ -37,6 +36,8 @@ declare module THREE { supportsVertexTextures(): void; setFaceCulling(): void; + getPixelRatio(): number; + setPixelRatio(value: number): void; setSize(width: number, height: number, updateStyle?: boolean): void; setViewport(x: number, y: number, width: number, height: number): void; setScissor(): void; diff --git a/threejs/three-orbitcontrols.d.ts b/threejs/three-orbitcontrols.d.ts index e2c4a3cae..69cde47a7 100644 --- a/threejs/three-orbitcontrols.d.ts +++ b/threejs/three-orbitcontrols.d.ts @@ -37,7 +37,17 @@ declare module THREE { keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; }; mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; }; - update():void; + rotateLeft(angle?: number): void; + rotateUp(angle?: number): void; + panLeft(distance?: number): void; + panUp(distance?: number): void; + pan( deltaX: number, deltaY: number): void; + dollyIn(dollyScale: number): void; + dollyOut(dollyScale: number): void; + update(): void; + reset(): void; + getPolarAngle() : number; + getAzimuthalAngle(): number; // EventDispatcher mixins addEventListener(type: string, listener: (event: any) => void ): void; @@ -45,4 +55,4 @@ declare module THREE { removeEventListener(type: string, listener: (event: any) => void): void; dispatchEvent(event: { type: string; target: any; }): void; } -} +} \ No newline at end of file diff --git a/threejs/three.d.ts b/threejs/three.d.ts index 649b6e0af..78beab253 100644 --- a/threejs/three.d.ts +++ b/threejs/three.d.ts @@ -1,4 +1,4 @@ -// Type definitions for three.js r69 +// Type definitions for three.js r70 // Project: http://mrdoob.github.com/three.js/ // Definitions by: Kon , Satoru Kimura // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -98,14 +98,12 @@ declare module THREE { // Mapping modes export enum Mapping { } - export interface MappingConstructor { - new (): Mapping; - } - export var UVMapping: MappingConstructor; - export var CubeReflectionMapping: MappingConstructor; - export var CubeRefractionMapping: MappingConstructor; - export var SphericalReflectionMapping: MappingConstructor; - export var SphericalRefractionMapping: MappingConstructor; + export var UVMapping: Mapping; + export var CubeReflectionMapping: Mapping; + export var CubeRefractionMapping: Mapping; + export var EquirectangularReflectionMapping: Mapping; + export var EquirectangularRefractionMapping: Mapping; + export var SphericalReflectionMapping: Mapping; // Wrapping modes export enum Wrapping { } @@ -145,6 +143,7 @@ declare module THREE { export var RGBAFormat: PixelFormat; export var LuminanceFormat: PixelFormat; export var LuminanceAlphaFormat: PixelFormat; + export var RGBEFormat: PixelFormat; // Compressed texture formats // DDS / ST3C Compressed texture formats @@ -490,7 +489,7 @@ declare module THREE { computeTangents(): void; computeOffsets(indexBufferSize: number): void; - merge(): void; + merge(geometry: BufferGeometry, offset: number): BufferGeometry; normalizeNormals(): void; reorderBuffers(indexBuffer: number, indexMap: number[], vertexCount: number): void; toJSON(): any; @@ -929,6 +928,8 @@ declare module THREE { merge( geometry: Geometry, matrix: Matrix, materialIndexOffset: number): void; + mergeMesh( mesh: Mesh ): void; + /** * Checks for duplicate vertices using hashmap. * Duplicated vertices are removed and faces' vertices are updated. @@ -1019,11 +1020,6 @@ declare module THREE { */ scale: Vector3; - /** - * Override depth-sorting order if non null. - */ - renderDepth: number; - /** * When this is set, then the rotationMatrix gets calculated every frame. */ @@ -1196,6 +1192,7 @@ declare module THREE { */ remove(object: Object3D): void; + /* deprecated */ getChildByName( name: string, recursive?: boolean ): Object3D; /** @@ -1212,6 +1209,8 @@ declare module THREE { */ getObjectByName(name: string, recursive?: boolean): Object3D; + getObjectByProperty( name: string, value: string, recursive?: boolean ): Object3D; + getWorldPosition(optionalTarget: Vector3): Vector3; getWorldQuaternion(optionalTarget: Quaternion): Quaternion; getWorldRotation(optionalTarget: Euler): Euler; @@ -1227,6 +1226,8 @@ declare module THREE { traverseVisible(callback: (object: Object3D) => any): void; + traverseAncestors(callback: (object: Object3D) => any): void; + /** * Updates local transform. */ @@ -1279,6 +1280,7 @@ declare module THREE { precision: number; linePrecision: number; set(origin: Vector3, direction: Vector3): void; + setFromCamera(coords: { x: number; y: number;}, camera: Camera ): void; intersectObject(object: Object3D, recursive?: boolean): Intersection[]; intersectObjects(objects: Object3D[], recursive?: boolean): Intersection[]; } @@ -1685,6 +1687,8 @@ declare module THREE { */ statusDomElement: HTMLElement; + imageLoader: ImageLoader; + /** * Will be called when load starts. * The default is a function with empty body. @@ -1724,10 +1728,17 @@ declare module THREE { add(regex:string, loader:Loader):void; get(file: string):Loader; } + + export class BinaryTextureLoader { + constructor(); + + load(url: string, onLoad: (dataTexture: DataTexture) => void, onProgress?: (event: any) => void, onError?: (event: any) => void): void; + } export class BufferGeometryLoader { constructor(manager?: LoadingManager); - + + manager: LoadingManager; load(url: string, onLoad: (bufferGeometry: BufferGeometry) => void, onProgress?: (event: any) => void, onError?: (event: any) => void): void; setCrossOrigin(crossOrigin: string): void; parse(json: any): BufferGeometry; @@ -1750,6 +1761,10 @@ declare module THREE { load(url: string, onLoad: (bufferGeometry: BufferGeometry) => void, onError?: (event: any) => void): void; } + export class DataTextureLoader extends BinaryTextureLoader { + // alias for BinaryTextureLoader. + } + /* * GeometryLoader class is experimental, and it is not yet included in the compiled source code. * @@ -1765,6 +1780,8 @@ declare module THREE { export class ImageLoader { constructor(manager?: LoadingManager); + cache: Cache; + manager: LoadingManager; crossOrigin: string; /** @@ -1828,6 +1845,8 @@ declare module THREE { export class MaterialLoader { constructor(manager?: LoadingManager); + manager: LoadingManager; + load(url: string, onLoad: (material: Material) => void): void; setCrossOrigin(crossOrigin: string): void; parse(json: any): Material; @@ -1836,6 +1855,9 @@ declare module THREE { export class ObjectLoader { constructor(manager?: LoadingManager); + manager: LoadingManager; + crossOrigin: string; + load(url: string, onLoad: (object: Object3D) => void): void; setCrossOrigin(crossOrigin: string): void; parse(json: any): T; @@ -1850,7 +1872,10 @@ declare module THREE { */ export class TextureLoader { constructor(manager?: LoadingManager); + + manager: LoadingManager; crossOrigin: string; + /** * Begin loading from url * @@ -1863,6 +1888,8 @@ declare module THREE { export class XHRLoader { constructor(manager?: LoadingManager); + cache: Cache; + manager: LoadingManager; responseType: string; crossOrigin: string; @@ -2718,12 +2745,14 @@ declare module THREE { set(x: number, y: number, z: number, order?: string): Euler; copy(euler: Euler): Euler; - setFromRotationMatrix(m: Matrix4, order?: string): Euler; + setFromRotationMatrix(m: Matrix4, order?: string, update?: boolean): Euler; setFromQuaternion(q:Quaternion, order?: string, update?: boolean): Euler; + setFromVector3( v: Vector3, order?: string ): Euler; reorder(newOrder: string): Euler; equals(euler: Euler): boolean; fromArray(xyzo: any[]): Euler; toArray(): any[]; + toVector3(optionalResult?: Vector3): Vector3; onChange: () => void; clone(): Euler; @@ -2970,6 +2999,9 @@ declare module THREE { copy(m: Matrix4): Matrix4; copyPosition(m: Matrix4): Matrix4; + extractBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4; + makeBasis( xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4; + /** * Copies the rotation component of the supplied matrix m into this matrix rotation component. */ @@ -3611,6 +3643,9 @@ declare module THREE { fromArray(xy: number[], offset?: number): Vector2; toArray(xy?: number[], offset?: number): number[]; + + fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector2; + /** * Clones this vector. */ @@ -3792,6 +3827,8 @@ declare module THREE { toArray(xyz?: number[], offset?: number): number[]; + fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector3; + /** * Clones this vector. */ @@ -3941,6 +3978,8 @@ declare module THREE { toArray(xyzw?: number[], offset?: number): number[]; + fromAttribute( attribute: BufferAttribute, index: number, offset?: number): Vector4; + /** * Clones this vector. */ @@ -3995,8 +4034,8 @@ declare module THREE { constructor(geometry?: BufferGeometry, material?: LineBasicMaterial, mode?: number); constructor(geometry?: BufferGeometry, material?: ShaderMaterial, mode?: number); - geometry: Geometry; - material: LineBasicMaterial; + geometry: any; // Geometry or BufferGeometry; + material: Material; // LineDashedMaterial or LineBasicMaterial or ShaderMaterial mode: LineMode; raycast(raycaster: Raycaster, intersects: any): void; @@ -4089,7 +4128,6 @@ declare module THREE { * An instance of Material, defining the object's appearance. Default is a ParticleBasicMaterial with randomised colour. */ material: Material; - sortParticles: boolean; raycast(raycaster: Raycaster, intersects: any): void; clone(object?: PointCloud): PointCloud; @@ -4228,8 +4266,6 @@ declare module THREE { //context:WebGLRenderingContext; context: any; - devicePixelRatio: number; - /** * Defines whether the renderer should automatically clear its output before rendering. */ @@ -4330,6 +4366,8 @@ declare module THREE { */ getContext(): WebGLRenderingContext; + forceContextLoss(): void; + /** * Return a Boolean true if the context supports vertex textures. */ @@ -4341,6 +4379,8 @@ declare module THREE { supportsBlendMinMax(): boolean; getMaxAnisotropy(): number; getPrecision(): string; + getPixelRatio(): number; + setPixelRatio(value: number): void; /** * Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0). @@ -4369,6 +4409,8 @@ declare module THREE { setClearColor(color: string, alpha?: number): void; setClearColor(color: number, alpha?: number): void; + setClearAlpha(alpha: number): void; + /** * Sets the clear color, using hex for the color and alpha for the opacity. * @@ -4801,18 +4843,7 @@ declare module THREE { ); constructor( image: HTMLImageElement, - mapping?: MappingConstructor, - wrapS?: Wrapping, - wrapT?: Wrapping, - magFilter?: TextureFilter, - minFilter?: TextureFilter, - format?: PixelFormat, - type?: TextureDataType, - anisotropy?: number - ); - constructor( - image: HTMLCanvasElement, - mapping?: MappingConstructor, + mapping?: Mapping, wrapS?: Wrapping, wrapT?: Wrapping, magFilter?: TextureFilter, @@ -4860,7 +4891,7 @@ declare module THREE { class VideoTexture extends Texture { constructor( video: HTMLVideoElement, - mapping?: MappingConstructor, + mapping?: Mapping, wrapS?: Wrapping, wrapT?: Wrapping, magFilter?: TextureFilter, @@ -4979,7 +5010,7 @@ declare module THREE { animations: any[]; - init(data: AnimationData): void; + init(data: AnimationData): AnimationData; parse(root: Mesh): Object3D[]; play(animation: Animation): void; stop(animation: Animation): void; @@ -5013,6 +5044,8 @@ declare module THREE { currentTime: number; duration: number; loop: boolean; + lastFrame: number; + currentFrame: number; isPlaying: boolean; play(): void; @@ -5343,7 +5376,7 @@ declare module THREE { * @param heightSegments — Number of rows of faces along the height of the cylinder. * @param openEnded - A Boolean indicating whether or not to cap the ends of the cylinder. */ - constructor(radiusTop?: number, radiusBottom?: number, height?: number, radiusSegments?: number, heightSegments?: number, openEnded?: boolean); + constructor(radiusTop?: number, radiusBottom?: number, height?: number, radiusSegments?: number, heightSegments?: number, openEnded?: boolean, thetaStart?: number, thetaLength?: number); parameters: { radiusTop: number; @@ -5352,6 +5385,8 @@ declare module THREE { radialSegments: number; heightSegments: number; openEnded: boolean; + thetaStart: number; + thetaLength: number; }; } @@ -5534,9 +5569,10 @@ declare module THREE { heightScale: number; }; } - + + export class TubeGeometry extends Geometry { - constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: boolean); + constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: boolean, taper?: (u: number) => number); parameters: { path: Path; @@ -5544,12 +5580,16 @@ declare module THREE { radius: number; radialSegments: number; closed: boolean; + taper: (u: number) => number; // NoTaper or SinusoidalTaper; }; tangents: Vector3[]; normals: Vector3[]; binormals: Vector3[]; - FrenetFrames(path: Path, segments: number, closed: boolean): void; + static NoTaper(u?: number): number; + static SinusoidalTaper(u: number): number; + static FrenetFrames(path: Path, segments: number, closed: boolean): void; + } // Extras / Helpers /////////////////////////////////////////////////////////////////////