提交 f70aaed1 编写于 作者: M Mikael Emtinger

Merge branch 'master' of git://github.com/mrdoob/three.js

因为 它太大了无法显示 source diff 。你可以改为 查看blob
此差异已折叠。
此差异已折叠。
<html>
<head>
<title>threej.s webgl - intersection: ray with box</title>
<title>three.js webgl - intersection: ray with box</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
......@@ -17,7 +16,7 @@ body {
#info {
position: absolute;
top: 30px; left: 10px; width: 800px;
top: 30px; left: 150px; width: 800px;
color: #000000;
padding: 5px;
font-family: Monospace;
......@@ -41,10 +40,11 @@ body {
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, cube, ghostCube;
var scene, camera, renderer, info, mouse2d, sun, cube;
var bounce = 0;
......@@ -72,50 +72,67 @@ function init() {
sun.position = camera.position.clone();
scene.addLight( sun );
createCube(200, new THREE.Vector3(0,0,0) );
createCube( 200, new THREE.Vector3( 0,0,0 ) );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
}
function createCube(s, p) {
function createCube( s, p ) {
cube = new THREE.Mesh (
new Cube(s,s,s,1,1,1),
new Cube( s,s,s, 1,1,1 ),
new THREE.MeshLambertMaterial( { color: 0x003300 })
);
cube.position = p;
scene.addObject( cube );
THREE.Collisions.colliders.push( THREE.CollisionUtils.MeshOBB(cube) );
}
THREE.Collisions.colliders.push( THREE.CollisionUtils.MeshOBB( cube ) );
};
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse2d.z = 1;
}
};
function animate() {
requestAnimationFrame( animate );
var r = new THREE.Ray();
r.origin = mouse2d.clone();
r.origin.copy( mouse2d );
var matrix = camera.matrixWorld.clone();
matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
matrix.multiplyVector3( r.origin );
r.direction = r.origin.clone().subSelf(camera.position);
r.direction = r.origin.clone().subSelf( camera.position );
info.innerHTML = "";
var c = THREE.Collisions.rayCastNearest(r);
if(c) {
info.innerHTML += "Found @ distance " + c.distance;
c.mesh.materials[0].color = new THREE.Color(0xaa0000);
var c = THREE.Collisions.rayCastNearest( r );
if( c ) {
info.innerHTML += "Found @ distance " + c.distance.toFixed(2);
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
} else {
info.innerHTML += "No intersection";
cube.materials[0].color = new THREE.Color(0x003300);
cube.materials[0].color.setHex( 0x003300 );
}
......@@ -125,12 +142,17 @@ function animate() {
bounce += 0.01;
renderer.render( scene, camera );
}
stats.update();
};
function vts(v) {
if(!v) return "undefined<br>";
else return v.x + " , " + v.y + " , " + v.z + "<br>";
}
};
</script>
......
......@@ -41,10 +41,11 @@ body {
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, loader;
var scene, camera, renderer, info, mouse2d, sun, loader, stats;
var meshes = [];
var theta = 0;
......@@ -53,7 +54,12 @@ var camdist = 1500;
var totalFaces = 0;
var totalColliders = 0;
var ray = new THREE.Ray();
var matrix = new THREE.Matrix4(),
matrix2 = new THREE.Matrix4();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
......@@ -69,7 +75,7 @@ function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
container.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.addLight( ambientLight );
......@@ -80,12 +86,20 @@ function init() {
loadCube();
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
}
function loadCube(p) {
var onGeometry = function( geometry ) {
var onGeometry = function( geometry ) {
var sx = 300;
var sy = 240;
var sz = 300;
......@@ -138,7 +152,7 @@ function loadCube(p) {
addCube( new THREE.Vector3( 0, -sy, -sz*2), geometry );
addCube( new THREE.Vector3( sx,-sy, -sz*2), geometry );
info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
//info.innerHTML = "Total colliders: " + totalColliders + " (Faces: " + totalFaces + ")<br>";
};
......@@ -146,9 +160,11 @@ function loadCube(p) {
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
}
function addCube(p, g){
function addCube( p, g) {
totalFaces += g.faces.length;
totalColliders++;
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
mesh.position = p;
......@@ -163,57 +179,78 @@ function addCube(p, g){
scene.addObject( mesh );
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
THREE.Collisions.colliders.push( mc );
meshes.push(mesh);
}
meshes.push( mesh );
};
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse2d.z = 1;
}
};
function animate() {
requestAnimationFrame( animate );
var r = new THREE.Ray();
r.origin = mouse2d.clone();
var matrix = camera.matrixWorld.clone();
matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
matrix.multiplyVector3( r.origin );
r.direction = r.origin.clone().subSelf(camera.position);
ray.origin.copy( mouse2d );
matrix.copy( camera.matrixWorld );
matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix, matrix2 ) );
matrix.multiplyVector3( ray.origin );
ray.direction.copy( ray.origin );
ray.direction.subSelf( camera.position );
if(meshes.length == 0) return;
if( meshes.length == 0 ) return;
for (var i = 0; i < meshes.length; i++) {
meshes[i].materials[0].color = new THREE.Color(0x003300);
}
var i, l = meshes.length;
info.innerHTML = "";
for ( i = 0; i < l; i++ ) {
var c = THREE.Collisions.rayCastNearest(r);
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
}
var c = THREE.Collisions.rayCastNearest( ray );
if( c ) {
if(c) {
//info.innerHTML += "Found @ distance " + c.distance;
c.mesh.materials[0].color = new THREE.Color(0xbb0000);
c.mesh.materials[ 0 ].color.setHex( 0xbb0000 );
} else {
//info.innerHTML += "No intersection";
}
camera.position.x = camdist * Math.cos(theta);
camera.position.z = camdist * Math.sin(theta);
camera.position.y = camdist/2 * Math.sin(theta * 2);
sun.position = camera.position.clone();
camera.position.x = camdist * Math.cos( theta );
camera.position.z = camdist * Math.sin( theta );
camera.position.y = camdist/2 * Math.sin( theta * 2) ;
sun.position.copy( camera.position );
sun.position.normalize();
theta += 0.005;
renderer.render( scene, camera );
}
stats.update();
};
function vts(v) {
if(!v) return "undefined<br>";
else return v.x + " , " + v.y + " , " + v.z + "<br>";
}
};
</script>
......
......@@ -18,7 +18,7 @@
#info {
position: absolute;
top: 30px;
left: 10px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
......@@ -31,7 +31,7 @@
#options {
position: absolute;
top: 10px;
left: 10px;
left: 150px;
width: 800px;
color: #000000;
padding: 5px;
......@@ -42,10 +42,10 @@
}
</style>
<script type="text/javascript" src="../build/Three.js">
</script>
<script type="text/javascript" src="js/RequestAnimationFrame.js">
</script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun;
......@@ -97,8 +97,14 @@
cplane.mesh = plane;
THREE.Collisions.colliders.push(cplane);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
container.onmousemove = onDocumentMouseMove;
animate();
}
function makeWall(z){
......@@ -157,33 +163,49 @@
geoms[i].materials[0].color = new THREE.Color(0x007700);
}
if (!document.getElementById("nearest").checked) {
if ( !document.getElementById( "nearest" ).checked ) {
// Raycast all
ts = new Date().getTime();
var cs = THREE.Collisions.rayCastAll(r);
var cs = THREE.Collisions.rayCastAll( r );
tt = new Date().getTime() - ts;
if (cs.length > 0) {
if ( cs.length > 0 ) {
info.innerHTML = cs.length + " colliders found in " + tt;
for (var i = 0; i < cs.length; i++) {
cs[i].mesh.materials[0].color = new THREE.Color(0xaa0000);
for ( var i = 0; i < cs.length; i++ ) {
cs[ i ].mesh.materials[ 0 ].color.setHex( 0xaa0000 );
}
}
else {
} else {
info.innerHTML = "No intersection";
}
}
else {
} else {
// Raycast nearest
ts = new Date().getTime();
var c = THREE.Collisions.rayCastNearest(r);
var c = THREE.Collisions.rayCastNearest( r );
tt = new Date().getTime() - ts;
if (c) {
if ( c ) {
info.innerHTML = "Found in " + tt + " @ distance " + c.distance;
c.mesh.materials[0].color = new THREE.Color(0xaa0000);
}
else {
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
} else {
info.innerHTML = "No intersection";
}
}
camera.position.x = camdist * Math.cos(theta);
......@@ -193,7 +215,9 @@
sun.position.normalize();
theta += 0.005;
renderer.render(scene, camera);
renderer.render( scene, camera );
stats.update();
}
function vts(v){
......
......@@ -603,12 +603,14 @@ THREE.MarchingCubes = function ( resolution, materials ) {
this.generateGeometry = function() {
var start = 0, geo = new THREE.Geometry();
var normals = [];
var geo_callback = function( object ) {
var i, x, y, z, vertex, position, normal,
face, a, b, c, na, nb, nc;
for( i = 0; i < object.count; i++ ) {
a = i * 3;
......@@ -626,9 +628,10 @@ THREE.MarchingCubes = function ( resolution, materials ) {
normal = new THREE.Vector3( x, y, z );
normal.normalize();
vertex = new THREE.Vertex( position, normal );
vertex = new THREE.Vertex( position );
geo.vertices.push( vertex );
normals.push( normal );
}
......@@ -640,9 +643,9 @@ THREE.MarchingCubes = function ( resolution, materials ) {
b = a + 1;
c = a + 2;
na = geo.vertices[ a ].normal;
nb = geo.vertices[ b ].normal;
nc = geo.vertices[ c ].normal;
na = normals[ a ];
nb = normals[ b ];
nc = normals[ c ];
face = new THREE.Face3( a, b, c, [ na, nb, nc ] );
......
......@@ -23,7 +23,7 @@ THREE.Mesh = function ( geometry, materials ) {
if( !this.geometry.boundingSphere ) {
this.geometry.computeBoundingSphere();
this.geometry.computeBoundingSphere();
}
......
......@@ -2,19 +2,19 @@
* @author drojdjou / http://everyday3d.com/
*/
THREE.PlaneCollider = function( pt, nor ) {
THREE.PlaneCollider = function( point, normal ) {
this.point = pt;
this.normal = nor;
this.point = point;
this.normal = normal;
};
THREE.SphereCollider = function( cen, rad ) {
THREE.SphereCollider = function( center, radius ) {
this.center = cen;
this.radius = rad;
this.radiusSq = rad * rad;
this.center = center;
this.radius = radius;
this.radiusSq = radius * radius;
};
......@@ -45,25 +45,29 @@ THREE.CollisionSystem = function() {
THREE.Collisions = new THREE.CollisionSystem();
THREE.CollisionSystem.prototype.rayCastAll = function( r ) {
THREE.CollisionSystem.prototype.rayCastAll = function( ray ) {
r.direction.normalize();
ray.direction.normalize();
var ld = 0;
this.hits.length = 0;
var i, l, d, collider,
ld = 0;
for ( var i = 0; i < this.colliders.length; i++ ) {
for ( i = 0, l = this.colliders.length; i < l; i++ ) {
var d = this.rayCast( r, this.colliders[ i ] );
collider = this.colliders[ i ];
d = this.rayCast( ray, collider );
if ( d < Number.MAX_VALUE ) {
this.colliders[ i ].distance = d;
collider.distance = d;
if ( d > ld )
this.hits.push( this.colliders[ i ] );
this.hits.push( collider );
else
this.hits.unshift( this.colliders[ i ] );
this.hits.unshift( collider );
ld = d;
......@@ -75,17 +79,17 @@ THREE.CollisionSystem.prototype.rayCastAll = function( r ) {
};
THREE.CollisionSystem.prototype.rayCastNearest = function( r ) {
THREE.CollisionSystem.prototype.rayCastNearest = function( ray ) {
var cs = this.rayCastAll( r );
var cs = this.rayCastAll( ray );
if( cs.length == 0 ) return null;
var i = 0;
while( cs[i] instanceof THREE.MeshCollider ) {
while( cs[ i ] instanceof THREE.MeshCollider ) {
var d = this.rayMesh( r, cs[ i ] );
var d = this.rayMesh( ray, cs[ i ] );
if( d < Number.MAX_VALUE ) {
......@@ -143,26 +147,32 @@ THREE.CollisionSystem.prototype.rayMesh = function( r, me ) {
};
THREE.CollisionSystem.prototype.rayTriangle = function( r, p0, p1, p2, n, mind ) {
//if (!n) {
var e1 = new THREE.Vector3().sub( p1, p0 );
var e2 = new THREE.Vector3().sub( p2, p1 );
n = new THREE.Vector3().cross( e1, e2 );
//}
THREE.CollisionSystem.prototype.rayTriangle = function( ray, p0, p1, p2, n, mind ) {
var e1 = THREE.CollisionSystem.__v1,
e2 = THREE.CollisionSystem.__v2;
e1.sub( p1, p0 );
e2.sub( p2, p1 );
n.cross( e1, e2 )
var dot = n.dot( r.direction );
var dot = n.dot( ray.direction );
if ( !( dot < 0 ) ) return Number.MAX_VALUE;
var d = n.dot( p0 );
var t = d - n.dot( r.origin );
var t = d - n.dot( ray.origin );
if ( !( t <= 0 ) ) return Number.MAX_VALUE;
if ( !( t >= dot * mind ) ) return Number.MAX_VALUE;
t = t / dot;
var p = r.origin.clone().addSelf( r.direction.clone().multiplyScalar( t ) );
var p = THREE.CollisionSystem.__v3;
p.copy( ray.direction );
p.multiplyScalar( t );
p.addSelf( ray.origin );
var u0, u1, u2, v0, v1, v2;
if ( Math.abs( n.x ) > Math.abs( n.y ) ) {
......@@ -236,9 +246,9 @@ THREE.CollisionSystem.prototype.rayTriangle = function( r, p0, p1, p2, n, mind )
};
THREE.CollisionSystem.prototype.makeRayLocal = function( r, m ) {
THREE.CollisionSystem.prototype.makeRayLocal = function( ray, m ) {
var rt = new THREE.Ray( r.origin.clone(), r.direction.clone() );
var rt = new THREE.Ray( ray.origin.clone(), ray.direction.clone() );
var mt = THREE.Matrix4.makeInvert( m.matrixWorld );
mt.multiplyVector3( rt.origin );
......@@ -404,6 +414,11 @@ THREE.CollisionSystem.prototype.raySphere = function( r, s ) {
};
THREE.CollisionSystem.__v1 = new THREE.Vector3();
THREE.CollisionSystem.__v2 = new THREE.Vector3();
THREE.CollisionSystem.__v3 = new THREE.Vector3();
......
......@@ -2630,7 +2630,7 @@ THREE.WebGLRenderer = function ( parameters ) {
}
function renderBufferImmediate( object, program ) {
function renderBufferImmediate( object, program, shading ) {
if ( ! object.__webglVertexBuffer ) object.__webglVertexBuffer = _gl.createBuffer();
if ( ! object.__webglNormalBuffer ) object.__webglNormalBuffer = _gl.createBuffer();
......@@ -2647,6 +2647,50 @@ THREE.WebGLRenderer = function ( parameters ) {
if ( object.hasNormal ) {
_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webglNormalBuffer );
if ( shading == THREE.FlatShading ) {
var nx, ny, nz,
nax, nbx, ncx, nay, nby, ncy, naz, nbz, ncz,
normalArray,
i, il = object.count * 3;
for( i = 0; i < il; i += 9 ) {
normalArray = object.normalArray;
nax = normalArray[ i ];
nay = normalArray[ i + 1 ];
naz = normalArray[ i + 2 ];
nbx = normalArray[ i + 3 ];
nby = normalArray[ i + 4 ];
nbz = normalArray[ i + 5 ];
ncx = normalArray[ i + 6 ];
ncy = normalArray[ i + 7 ];
ncz = normalArray[ i + 8 ];
nx = ( nax + nbx + ncx ) / 3;
ny = ( nay + nby + ncy ) / 3;
nz = ( naz + nbz + ncz ) / 3;
normalArray[ i ] = nx;
normalArray[ i + 1 ] = ny;
normalArray[ i + 2 ] = nz;
normalArray[ i + 3 ] = nx;
normalArray[ i + 4 ] = ny;
normalArray[ i + 5 ] = nz;
normalArray[ i + 6 ] = nx;
normalArray[ i + 7 ] = ny;
normalArray[ i + 8 ] = nz;
}
}
_gl.bufferData( _gl.ARRAY_BUFFER, object.normalArray, _gl.DYNAMIC_DRAW );
_gl.enableVertexAttribArray( program.attributes.normal );
_gl.vertexAttribPointer( program.attributes.normal, 3, _gl.FLOAT, false, 0, 0 );
......@@ -2968,7 +3012,7 @@ THREE.WebGLRenderer = function ( parameters ) {
setDepthTest( material.depthTest );
program = setProgram( camera, lights, fog, material, object );
object.render( function( object ) { renderBufferImmediate( object, program ); } );
object.render( function( object ) { renderBufferImmediate( object, program, material.shading ); } );
}
......@@ -3026,7 +3070,7 @@ THREE.WebGLRenderer = function ( parameters ) {
setDepthTest( material.depthTest );
program = setProgram( camera, lights, fog, material, object );
object.render( function( object ) { renderBufferImmediate( object, program ); } );
object.render( function( object ) { renderBufferImmediate( object, program, material.shading ); } );
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册