update to three.js r70.

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
@@ -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();
+2 -2
View File
@@ -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);
+14 -19
View File
@@ -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);