提交 b150a747 编写于 作者: A alteredq

Synced with mrdoob's branch.

......@@ -15,6 +15,7 @@ Other similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://c
### Examples ###
[![lights_pointlights](http://mrdoob.github.com/three.js/assets/examples/09_walthead.png)](http://mrdoob.github.com/three.js/examples/lights_pointlights.html)
[![geometry_birds](http://mrdoob.github.com/three.js/assets/examples/08_birds.png)](http://mrdoob.github.com/three.js/examples/geometry_birds.html)
[![geometry_earth](http://mrdoob.github.com/three.js/assets/examples/07_earth.png)](http://mrdoob.github.com/three.js/examples/geometry_earth.html)
[![geometry_terrain](http://mrdoob.github.com/three.js/assets/examples/06_terrain.png)](http://mrdoob.github.com/three.js/examples/geometry_terrain.html)
......
此差异已折叠。
此差异已折叠。
......@@ -56,8 +56,6 @@
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="cameras/FreeCamera.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
......@@ -103,7 +101,6 @@
var debugContext;
init();
loop();
setInterval(loop, 1000/60);
function init() {
......@@ -123,7 +120,7 @@
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.5, 1 ) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.doubleSided = true;
scene.add( plane );
scene.addObject( plane );
// Spheres
......@@ -144,7 +141,7 @@
cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
scene.add(cube);
scene.addObject(cube);
}
......
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - camera - orthographic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var moveForward = false,
moveBackwards = false,
moveUp = false,
moveDown = false,
moveLeft = false,
moveRight = false,
yawLeft = false,
yawRight = false,
pitchUp = false,
pitchDown = false,
rollLeft = false,
rollRight = false;
init();
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
scene = new THREE.Scene();
// Plane
plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.2 ) );
plane.rotation.x = - 90 * ( Math.PI / 180 );
scene.addObject( plane );
geometry = new Cube( 50, 50, 50 );
for (var i = 0; i < 100; i ++ ) {
cube = new THREE.Mesh(geometry, new THREE.MeshColorFillMaterial( 0xffffff, Math.random() * 0.5 + 0.5 ) );
cube.overdraw = true;
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
cube.position.y = ( cube.scale.y * 50 ) / 2;
cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
scene.addObject(cube);
}
// Lights
var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
scene.addLight( ambientLight );
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.addLight( directionalLight );
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
}
//
function loop() {
var timer = new Date().getTime() * 0.0001;
camera.position.x = Math.cos( timer ) * 200;
camera.position.z = Math.sin( timer ) * 200;
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
/**
* @author mr.doob / http://mrdoob.com/
*/
THREE.FreeCamera = function ( x, y, z ) {
THREE.Camera.call( this, x, y, z );
this.rotation = new THREE.Vector3( 0, 0, 0 );
this.moveZ = function ( amount ) {
direction.set( this.matrix.n11, this.target.position, this.position );
depth = direction.length();
direction.normalize();
vector.copy( direction );
vector.multiplyScalar( amount );
direction.multiplyScalar( depth );
this.position.addSelf( vector );
this.target.position.add( this.position, direction );
};
this.updateMatrix = function () {
this.matrix.identity();
this.matrix.multiplySelf( THREE.Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z ) );
this.matrix.multiplySelf( THREE.Matrix4.rotationXMatrix( this.rotation.x ) );
this.matrix.multiplySelf( THREE.Matrix4.rotationYMatrix( this.rotation.y ) );
this.matrix.multiplySelf( THREE.Matrix4.rotationZMatrix( this.rotation.z ) );
};
/*
var depth = 0;
var vector = new THREE.Vector3();
var direction = new THREE.Vector3();
this.moveX = function ( amount ) {
direction.sub( this.target.position, this.position );
depth = direction.length();
direction.normalize();
vector.copy( this.up );
vector.crossSelf( direction );
vector.multiplyScalar( amount );
direction.multiplyScalar( depth );
this.position.subSelf( vector );
this.target.position.add( this.position, direction );
};
this.moveZ = function ( amount ) {
direction.sub( this.target.position, this.position );
depth = direction.length();
direction.normalize();
vector.copy( direction );
vector.multiplyScalar( amount );
direction.multiplyScalar( depth );
this.position.addSelf( vector );
this.target.position.add( this.position, direction );
};
this.rotateX = function( amount ) { // pitch
amount *= Math.PI / 180;
vector.x = direction.x;
vector.y = ( direction.y * Math.cos( amount ) ) - ( direction.z * Math.sin( amount ) );
vector.z = ( direction.y * Math.sin( amount ) ) + ( direction.z * Math.cos( amount ) );
direction.copy( vector );
vector.set( direction.x, direction.y, direction.z );
vector.multiplyScalar( 400 );
this.target.position.copy( this.position );
this.target.position.addSelf( vector );
};
this.rotateY = function( amount ) { // yaw
amount *= Math.PI / 180;
direction.sub( this.position, this.target.position );
depth = direction.length();
direction.normalize();
vector.x = ( direction.z * Math.sin( amount ) ) + ( direction.x * Math.cos( amount ) );
vector.y = direction.y;
vector.z = ( direction.z * Math.cos( amount ) ) - ( direction.x * Math.sin( amount ) );
direction.copy( vector );
direction.multiplyScalar( depth );
this.target.position.sub( this.position, direction );
};
this.rotateZ = function( amount ) { // roll
amount *= Math.PI / 180;
vector.x = ( this.up.x * Math.cos( amount ) ) - ( this.up.y * Math.sin( amount ) );
vector.y = ( this.up.x * Math.sin( amount ) ) + ( this.up.y * Math.cos( amount ) );
vector.z = this.up.z;
this.up.copy( vector );
};
*/
};
THREE.FreeCamera.prototype = new THREE.Camera();
THREE.FreeCamera.prototype.constructor = THREE.FreeCamera;
此差异已折叠。
此差异已折叠。
......@@ -2,9 +2,9 @@
* @author mr.doob / http://mrdoob.com/
*/
var ClickCube = function (width, height, depth, onSelect) {
var ClickCube = function ( width, height, depth, onSelect ) {
THREE.Geometry.call(this);
THREE.Geometry.call( this );
var scope = this,
width_half = width / 2,
......@@ -21,21 +21,23 @@ var ClickCube = function (width, height, depth, onSelect) {
v( -width_half, height_half, depth_half );
f4( 0, 1, 2, 3 );
f4( 4, 7, 6, 5 );
f4( 0, 4, 5, 1 );
f4( 2, 6, 7, 3 );
f4( 1, 5, 6, 2 );
f4( 4, 0, 3, 7 );
function v(x, y, z) {
function v( x, y, z ) {
scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
}
function f4(a, b, c, d) {
function f4( a, b, c, d ) {
var f = new THREE.SelectableFace4( a, b, c, d, onSelect );
scope.faces.push(f);
scope.faces.push( f );
}
this.computeCentroids();
......
......@@ -70,36 +70,47 @@ var Sphere = function ( radius, segments_width, segments_height, smooth ) {
var aP4uv = new THREE.UV( 1 - fI0, fJ1 );
if ( j < ( aVtc.length - 1 ) ) {
n1 = this.vertices[aP1].position.clone();
n2 = this.vertices[aP2].position.clone();
n3 = this.vertices[aP3].position.clone();
n1.normalize();
n2.normalize();
n3.normalize();
if ( smooth )
this.faces.push( new THREE.Face3( aP1, aP2, aP3, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
else
this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
n1 = this.vertices[ aP1 ].position.clone();
n2 = this.vertices[ aP2 ].position.clone();
n3 = this.vertices[ aP3 ].position.clone();
n1.normalize();
n2.normalize();
n3.normalize();
if ( smooth ) {
this.faces.push( new THREE.Face3( aP1, aP2, aP3, [ new THREE.Vector3( n1.x, n1.y, n1.z ), new THREE.Vector3( n2.x, n2.y, n2.z ), new THREE.Vector3( n3.x, n3.y, n3.z ) ] ) );
} else {
this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
}
this.uvs.push( [ aP1uv, aP2uv, aP3uv ] );
}
if ( j > 1 ) {
n1 = this.vertices[aP1].position.clone();
n2 = this.vertices[aP3].position.clone();
n3 = this.vertices[aP4].position.clone();
n1.normalize();
n2.normalize();
n3.normalize();
if ( smooth )
this.faces.push( new THREE.Face3( aP1, aP3, aP4, [new THREE.Vector3(n1.x,n1.y,n1.z), new THREE.Vector3(n2.x,n2.y,n2.z), new THREE.Vector3(n3.x,n3.y,n3.z)] ) );
else
this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
n1 = this.vertices[aP1].position.clone();
n2 = this.vertices[aP3].position.clone();
n3 = this.vertices[aP4].position.clone();
n1.normalize();
n2.normalize();
n3.normalize();
if ( smooth ) {
this.faces.push( new THREE.Face3( aP1, aP3, aP4, [ new THREE.Vector3( n1.x, n1.y, n1.z ), new THREE.Vector3( n2.x, n2.y, n2.z ), new THREE.Vector3( n3.x, n3.y, n3.z ) ] ) );
} else {
this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
}
this.uvs.push( [ aP1uv, aP3uv, aP4uv ] );
}
......
......@@ -65,7 +65,7 @@
container = document.getElementById( 'container' );
camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
......@@ -81,12 +81,12 @@
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
container.appendChild( stats.domElement );
document.addEventListener('mousemove', onDocumentMouseMove, false);
......
......@@ -34,6 +34,7 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
......@@ -41,80 +42,6 @@
<script type="text/javascript">
var Perlin = function () {
// http://mrl.nyu.edu/~perlin/noise/
var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for (var i=0; i < 256 ; i++) {
p[256+i] = p[i];
}
function fade(t) {
return t * t * t * (t * (t * 6 - 15) + 10);
}
function lerp(t, a, b) {
return a + t * (b - a);
}
function grad(hash, x, y, z) {
var h = hash & 15;
var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
}
return {
noise: function (x, y, z) {
var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
x -= floorX;
y -= floorY;
z -= floorZ;
var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
var u = fade(x), v = fade(y), w = fade(z);
var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
grad(p[BA], xMinus1, y, z)),
lerp(u, grad(p[AB], x, yMinus1, z),
grad(p[BB], xMinus1, yMinus1, z))),
lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
grad(p[BA+1], xMinus1, y, z-1)),
lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
}
}
}
//
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var container, stats;
......@@ -168,21 +95,21 @@
mesh = new THREE.Mesh( plane, material );
mesh.rotation.x = -90 * Math.PI / 180;
mesh.overdraw = true;
scene.add(mesh);
scene.addObject(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.innerHTML = "";
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
......@@ -218,7 +145,7 @@
image = context.getImageData( 0, 0, width, height );
data = image.data;
var perlin = new Perlin();
var perlin = new ImprovedNoise();
var size = width * height;
var quality = 2;
......
......@@ -31,7 +31,6 @@
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript">
......
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - spheres</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../src/hci/ClickResolver.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clickResolver;
init();
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.id = 'msg';
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'No click detected';
container.appendChild(info);
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 300;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
clickResolver = new THREE.ClickResolver( camera, scene );
// Click Cube
var opacity = 0.8;
geometry = new Sphere( 200 );
for (var i = 0, l = geometry.faces.length; i < l; i++) {
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
geometry.faces[i].selectable = true;
geometry.faces[i].onSelect = function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
}
}
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject(cube);
geometry2 = new Sphere( 100 );
for (var i = 0, l = geometry2.faces.length; i < l; i++) {
geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
geometry2.faces[i].selectable = true;
geometry2.faces[i].onSelect = function ( s, c, o, f, p ) {
f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
document.getElementById( "msg" ).innerHTML = "Click detected at " + p;
};
}
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
cube2.position.y = 150;
cube2.position.z = 300;
scene.addObject(cube2);
// Plane
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.getElementById("msg").innerHTML = "";
clickResolver.findIntersectInScene(
event.clientX/window.innerWidth,
event.clientY/window.innerHeight);
}
var radius = 600;
var theta = 0;
function loop() {
theta += 1;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
// camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
// http://mrl.nyu.edu/~perlin/noise/
var ImprovedNoise = function () {
var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for (var i=0; i < 256 ; i++) {
p[256+i] = p[i];
}
function fade(t) {
return t * t * t * (t * (t * 6 - 15) + 10);
}
function lerp(t, a, b) {
return a + t * (b - a);
}
function grad(hash, x, y, z) {
var h = hash & 15;
var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
}
return {
noise: function (x, y, z) {
var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
x -= floorX;
y -= floorY;
z -= floorZ;
var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
var u = fade(x), v = fade(y), w = fade(z);
var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
grad(p[BA], xMinus1, y, z)),
lerp(u, grad(p[AB], x, yMinus1, z),
grad(p[BB], xMinus1, yMinus1, z))),
lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
grad(p[BA+1], xMinus1, y, z-1)),
lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
}
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - point light</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/WaltHead.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
object;
init();
setInterval( loop, 1000 / 60 );
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
object.overdraw = true;
scene.addObject( object );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0040 ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
scene.addObject( particle1 );
particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x0040ff ) );
particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
scene.addObject( particle2 );
particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x80ff80 ) );
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function loop() {
var time = new Date().getTime() * 0.0005;
object.rotation.y -= 0.01;
particle1.position.x = Math.sin( time * 0.7 ) * 30;
particle1.position.y = Math.cos( time * 0.5 ) * 40;
particle1.position.z = Math.cos( time * 0.3 ) * 30;
light1.position.x = particle1.position.x;
light1.position.y = particle1.position.y;
light1.position.z = particle1.position.z;
particle2.position.x = Math.cos( time * 0.3 ) * 30;
particle2.position.y = Math.sin( time * 0.5 ) * 40;
particle2.position.z = Math.sin( time * 0.7 ) * 30;
light2.position.x = particle2.position.x;
light2.position.y = particle2.position.y;
light2.position.z = particle2.position.z;
particle3.position.x = Math.sin( time * 0.7 ) * 30;
particle3.position.y = Math.cos( time * 0.3 ) * 40;
particle3.position.z = Math.sin( time * 0.5 ) * 30;
light3.position.x = particle3.position.x;
light3.position.y = particle3.position.y;
light3.position.z = particle3.position.z;
renderer.render(scene, camera);
}
</script>
</body>
</html>
......@@ -154,7 +154,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
mesh.overdraw = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
......@@ -182,7 +182,7 @@
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.add(lightMesh);
scene.addObject(lightMesh);
if( render_canvas ) {
......@@ -223,7 +223,7 @@
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
scene.addObject(zmesh);
}
......
......@@ -160,7 +160,7 @@
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
......@@ -186,7 +186,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
if( render_canvas ) {
......@@ -276,7 +276,7 @@
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
scene.addObject(zmesh);
// PLANES with all materials from the model
......@@ -309,7 +309,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// number
var x = document.createElement( "canvas" );
......@@ -331,7 +331,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
}
......
......@@ -181,7 +181,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 10;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// SPHERES
......@@ -195,7 +195,7 @@
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
......@@ -252,7 +252,7 @@
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
scene.addObject(zmesh);
// PLANES with all materials from the model
......@@ -271,7 +271,7 @@
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
scene.addObject(zmesh);
// PLANES with all materials from the model
......@@ -305,7 +305,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// number
var x = document.createElement( "canvas" );
......@@ -327,7 +327,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
}
......
......@@ -144,7 +144,7 @@
mesh.rotation.z = rz;
mesh.overdraw = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
}
......@@ -184,7 +184,7 @@
lightMesh.position = pointLight.position;
lightMesh.overdraw = true;
lightMesh.updateMatrix();
scene.add(lightMesh);
scene.addObject(lightMesh);
// material samples
sphere = new Sphere( 100, 32, 32, 1 );
......
......@@ -108,7 +108,7 @@
qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// CUBES
......@@ -120,7 +120,7 @@
mesh.rotation.y = Math.random();
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
mesh = new THREE.Mesh( cube, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff ) );
mesh.position.x = 500;
......@@ -129,7 +129,7 @@
mesh.rotation.y = Math.random();
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// PLANE
......@@ -138,7 +138,7 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// CYLINDER
......@@ -146,7 +146,7 @@
mesh.position.x = -500;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
mesh.updateMatrix();
scene.add(mesh);
scene.addObject(mesh);
// POLYFIELD
......@@ -174,7 +174,7 @@
mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshColorStrokeMaterial( 0xff0000, 0.5, 10 ) ] );
mesh.doubleSided = true;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
scene.add(mesh);
scene.addObject(mesh);
// PARTICLES
......@@ -185,7 +185,7 @@
particle.position.y = Math.random() * 1000 - 500;
particle.position.z = Math.random() * 1000 - 500;
particle.scale.x = particle.scale.y = 10;
scene.add(particle);
scene.addObject(particle);
}
......
......@@ -45,7 +45,8 @@ THREE.Geometry.prototype = {
computeNormals: function ( useVertexNormals ) {
var n, nl, v, vl, vertex, f, fl, face, vA, vB, vC, cb = new THREE.Vector3(), ab = new THREE.Vector3();
var n, nl, v, vl, vertex, f, fl, face, vA, vB, vC,
cb = new THREE.Vector3(), ab = new THREE.Vector3();
for ( v = 0, vl = this.vertices.length; v < vl; v++ ) {
......
......@@ -435,10 +435,10 @@ THREE.Matrix4.makeOrtho = function( left, right, top, bottom, near, far ) {
m = new THREE.Matrix4();
w = right - left;
h = bottom - top;
h = top - bottom;
p = far - near;
x = ( right + left ) / w;
y = ( bottom + top ) / h;
y = ( top + bottom ) / h;
z = ( far + near ) / p;
m.n11 = 2 / w; m.n12 = 0; m.n13 = 0; m.n14 = -x;
......
......@@ -3,51 +3,56 @@ THREE.ClickResolver = function( camera, scene ) {
this.camera = camera;
this.scene = scene;
this._debug = false;
this._debug = true;
};
THREE.ClickResolver.prototype = {
findIntersectInScene : function ( xPercent, yPercent ) {
var objects = this.scene.objects;
var intersects = [];
var mouseRayStart = this.translateScreenCoordsToZIndex( xPercent, yPercent, 300 );
var mouseRayEnd = this.translateScreenCoordsToZIndex( xPercent, yPercent, 800 );
var mouseRayDir = new THREE.Vector3().sub( mouseRayEnd, mouseRayStart );
var closestIntersect = null;
for ( var i = 0; i < objects.length; i++ ) {
var o = objects[i];
var intersect = this.getIntersectingFaces( this.scene, camera, o, mouseRayStart, mouseRayDir );
if ( intersect.face != null &&
(closestIntersect == null ||
closestIntersect.distance > intersect.distance)
) {
closestIntersect = intersect;
for ( var i = 0, l = objects.length; i < l; i++ ) {
var object = objects[i];
if ( object instanceof THREE.Mesh ) {
var intersect = this.getIntersectingFaces( this.scene, camera, object, mouseRayStart, mouseRayDir );
if ( intersect.face != null && (closestIntersect == null || closestIntersect.distance > intersect.distance) ) {
closestIntersect = intersect;
}
}
}
if ( closestIntersect != null && closestIntersect.face.onSelect ) {
closestIntersect.face.onSelect( scene, camera, o, closestIntersect.face, closestIntersect.point );
closestIntersect.face.onSelect( scene, camera, object, closestIntersect.face, closestIntersect.point );
}
},
translateScreenCoordsToZIndex : function ( xPercent, yPercent, targetZIndex ) {
translateScreenCoordsToZIndex: function ( xPercent, yPercent, targetZIndex ) {
var maxVisibleXatZIndex, maxVisibleYatZIndex;
var rayToZIndex = new THREE.Vector3();
var left = new THREE.Vector3();
var up = new THREE.Vector3();
var rayToZIndex = new THREE.Vector3();
var left = new THREE.Vector3();
var up = new THREE.Vector3();
var coordAtZIndex = new THREE.Vector3();
rayToZIndex.sub( this.camera.target.position, this.camera.position ).setLength( targetZIndex );
......@@ -68,12 +73,11 @@ THREE.ClickResolver.prototype = {
if ( this._debug ) {
var vg = new THREE.Geometry();
var p = new THREE.Particle( new THREE.ParticleCircleMaterial( hex, 0.5 ) );
p.position = v.clone();
p.scale.x = p.scale.y = p.scale.z = 5;
vg.vertices[ 0 ] = new THREE.Vertex( v );
vg.vertices[ 1 ] = new THREE.Vertex( v );
scene.addObject( new THREE.Line( vg, new THREE.LineColorMaterial( hex, 1, 10 )));
scene.addObject( p );
}
},
......@@ -89,7 +93,7 @@ THREE.ClickResolver.prototype = {
lg.vertices[0] = new THREE.Vertex( s.clone() );
lg.vertices[1] = new THREE.Vertex( e.clone() );
scene.addObject(new THREE.Line( lg, new THREE.LineColorMaterial( hex, 1, 4 ) ));
scene.addObject( new THREE.Line( lg, new THREE.LineColorMaterial( hex, 0.5 ) ) );
}
},
......@@ -103,24 +107,19 @@ THREE.ClickResolver.prototype = {
distance : Number.MAX_VALUE
};
var geo = object3d.geometry;
var geometry = object3d.geometry;
var matrix = object3d.matrix;
for ( f = 0; f < geo.faces.length; f++ ) {
var face = geo.faces[ f ];
for ( f = 0; f < geometry.faces.length; f++ ) {
if ( !face.selectable ) continue;
var face = geometry.faces[ f ];
var a = matrix.transform( geo.vertices[ face.a ].position.clone() );
var b = matrix.transform( geo.vertices[ face.b ].position.clone() );
var c = matrix.transform( geo.vertices[ face.c ].position.clone() );
var d = null;
// if ( !face.selectable ) continue;
if ( face.d ) {
d = matrix.transform( geo.vertices[ face.d ].position.clone() );
}
var a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
var b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
var c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
var d = face.d ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
var lineStart = linePoint.clone();
var lineDirection = lineDir.clone();
......@@ -128,73 +127,80 @@ THREE.ClickResolver.prototype = {
if ( this._debug ) {
this.logLine( scene, a, new THREE.Vector3().add( a, new THREE.Vector3().addSelf( face.normal ).multiplyScalar( 100 )), 0x0000FF );
this.logLine( scene, lineStart, lineStart.clone().addSelf(lineDirection), 0x55FF88 );
/*
this.logLine( scene, a, new THREE.Vector3().add( a, new THREE.Vector3().addSelf( face.normal ).multiplyScalar( 100 ) ), 0x0000FF );
this.logLine( scene, lineStart, lineStart.clone().addSelf( lineDirection ), 0x55FF88 );
this.logPoint( scene, a, 0xFF0000 ); // r
this.logPoint( scene, b, 0x00FF00 ); // g
this.logPoint( scene, c, 0x0000FF ); // b
this.logPoint( scene, d, 0xFFFF00 ); // y
if ( d ) this.logPoint( scene, d, 0xFFFF00 ); // y
*/
}
if ( Math.abs(dot) > .0001 ) {
if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
var s = face.normal.dot( new THREE.Vector3().sub( a, lineStart ) ) / dot;
var planeIntersect = lineStart.addSelf( lineDirection.multiplyScalar( s ) );
if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFFCCAA );
// if ( this._debug ) this.logPoint( scene, planeIntersect, 0x808080 );
if ( d == null ) {
var ab = isInsideBoundary( planeIntersect, a, b, c );
var bc = isInsideBoundary( planeIntersect, b, c, a );
var ca = isInsideBoundary( planeIntersect, c, a, b );
if ( ab && bc && ca ) {
if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFF0000 );
if ( this._debug ) this.logPoint( scene, planeIntersect, 0x0000ff );
logIntersect( planeIntersect, face );
}
} else {
var ab = isInsideBoundary( planeIntersect, a, b, c );
var bc = isInsideBoundary( planeIntersect, b, c, d );
var cd = isInsideBoundary( planeIntersect, c, d, a );
var da = isInsideBoundary( planeIntersect, d, a, b );
if ( ab && bc && cd && da ) {
if ( this._debug ) this.logPoint( scene, planeIntersect, 0xFF0000 );
if ( this._debug ) this.logPoint( scene, planeIntersect, 0x000000 );
logIntersect( planeIntersect, face );
}
}
}
}
function logIntersect( planeIntersect, face ) {
var distance = camera.position.distanceTo( planeIntersect );
if ( distance < intersect.distance ) {
intersect.distance = distance;
intersect.face = face;
intersect.point = planeIntersect;
}
}
function isInsideBoundary( pointOnPlaneToCheck, pointInside, boundaryPointA, boundaryPointB ) {
var toB = boundaryPointB.clone().subSelf( boundaryPointA );
var toI = pointInside.clone().subSelf( boundaryPointA );
var pointMid = toB.setLength( toI.dot( toB ) ).addSelf( boundaryPointA );
var pointMirror = pointMid.subSelf( pointInside ).multiplyScalar( 2 ).addSelf( pointInside );
return pointOnPlaneToCheck.distanceToSquared( pointInside ) <
pointOnPlaneToCheck.distanceToSquared( pointMirror );
return pointOnPlaneToCheck.distanceToSquared( pointInside ) < pointOnPlaneToCheck.distanceToSquared( pointMirror );
};
return intersect;
}
......
......@@ -9,7 +9,7 @@ THREE.Scene = function () {
this.addObject = function ( object ) {
this.objects.push(object);
this.objects.push( object );
};
......@@ -23,32 +23,29 @@ THREE.Scene = function () {
return;
}
}
};
this.addLight = function ( light ) {
};
this.lights.push(light);
this.addLight = function ( light ) {
};
this.lights.push( light );
this.removeLight = function ( light ) {
};
for ( var i = 0, l = this.lights.length; i < l; i++ ) {
this.removeLight = function ( light ) {
if ( light == this.lights[ i ] ) {
for ( var i = 0, l = this.lights.length; i < l; i++ ) {
this.lights.splice( i, 1 );
return;
if ( light == this.lights[ i ] ) {
}
}
};
this.lights.splice( i, 1 );
return;
// Deprecated
this.add = function ( object ) {
}
this.addObject( object );
}
};
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册