mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
update to three.js r70.
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
}
|
||||
|
||||
renderer = new THREE.CanvasRenderer();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user