home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Fixed collisions examples.

Browse Source
This commit is contained in:
Mr.doob
2011-07-01 18:56:41 +02:00
parent 28c165f8d6
commit 1c26dd25ac
7 changed files with 23941 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/Three.js
+23871 -575
View File
File diff suppressed because it is too large Load Diff
examples/webgl_collisions_box.html
+13 -15
View File
@@ -44,7 +44,8 @@ body {
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, cube;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, cube;
var bounce = 0;
@@ -57,10 +58,11 @@ function init() {
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = -500;
mouse2d = new THREE.Vector3( 0, 0, 1 );
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
@@ -101,9 +103,8 @@ function createCube( s, p ) {
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse2d.z = 1;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
@@ -111,19 +112,16 @@ function animate() {
requestAnimationFrame( animate );
var r = new THREE.Ray();
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 );
info.innerHTML = "";
var c = THREE.Collisions.rayCastNearest( r );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
if( c ) {
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var c = THREE.Collisions.rayCastNearest( ray );
if ( c ) {
info.innerHTML += "Found @ distance " + c.distance.toFixed(2);
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
examples/webgl_collisions_mesh.html
+13 -21
View File
@@ -45,18 +45,15 @@ body {
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, loader, stats;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats;
var meshes = [];
var theta = 0;
var camdist = 1500;
var totalFaces = 0;
var totalColliders = 0;
var ray = new THREE.Ray();
var matrix = new THREE.Matrix4(),
matrix2 = new THREE.Matrix4();
var totalFaces = 0, totalColliders = 0;
function init() {
@@ -67,12 +64,13 @@ function init() {
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
mouse2d = new THREE.Vector3( 0, 0, 1 );
loader = new THREE.JSONLoader( );
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
@@ -152,7 +150,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>";
};
@@ -186,9 +184,8 @@ function addCube( p, g) {
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse2d.z = 1;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
@@ -197,15 +194,6 @@ function animate() {
requestAnimationFrame( animate );
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;
var i, l = meshes.length;
@@ -216,6 +204,10 @@ function animate() {
}
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var c = THREE.Collisions.rayCastNearest( ray );
examples/webgl_collisions_normal.html
+13 -23
View File
@@ -45,18 +45,15 @@ body {
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, loader, stats, line;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun, loader, stats, line;
var meshes = [];
var theta = 0;
var camdist = 500;
var totalFaces = 0;
var totalColliders = 0;
var ray = new THREE.Ray();
var matrix = new THREE.Matrix4(),
matrix2 = new THREE.Matrix4();
var totalFaces = 0, totalColliders = 0;
function init() {
@@ -67,12 +64,13 @@ function init() {
camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = camdist;
mouse2d = new THREE.Vector3( 0, 0, 1 );
loader = new THREE.JSONLoader( );
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
@@ -139,9 +137,8 @@ function addCube( p, g) {
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2d.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse2d.z = 1;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
@@ -149,20 +146,13 @@ function onDocumentMouseMove( event ) {
function animate() {
requestAnimationFrame( animate );
ray.origin.copy( mouse2d );
matrix.copy( camera.matrixWorld );
matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix, matrix2 ) );
matrix.multiplyVector3( ray.origin );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
ray.direction.copy( ray.origin );
ray.direction.subSelf( camera.position );
//var ray2 = new THREE.Ray();
//ray2.origin = ray.origin.clone();
if( meshes.length == 0 ) return;
if ( meshes.length == 0 ) return;
var i, l = meshes.length;
examples/webgl_collisions_primitives.html
+22 -18
View File
@@ -48,23 +48,26 @@
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun;
var camera, scene, projector, renderer,
info, mouse = { x: 0, y: 0 }, sun;
var theta = 0;
var camdist = 1500;
var geoms = [];
function init(){
function init () {
container = document.createElement('div');
document.body.appendChild(container);
info = document.getElementById("info");
camera = new THREE.Camera(40, window.innerWidth / window.innerHeight, 1, 10000);
mouse2d = new THREE.Vector3(0, 0, 1);
scene = new THREE.Scene();
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
@@ -137,23 +140,23 @@
}
function onDocumentMouseMove(event){
event.preventDefault();
mouse2d.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2d.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse2d.z = 1;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 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);
requestAnimationFrame( animate );
for (var i = 0; i < geoms.length; i++) {
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
for ( var i = 0; i < geoms.length; i++) {
geoms[i].materials[0].color = new THREE.Color(0x007700);
}
@@ -162,14 +165,14 @@
// Raycast all
ts = new Date().getTime();
var cs = THREE.Collisions.rayCastAll( r );
var cs = THREE.Collisions.rayCastAll( ray );
tt = new Date().getTime() - ts;
if ( cs.length > 0 ) {
info.innerHTML = cs.length + " colliders found in " + tt;
for ( var i = 0; i < cs.length; i++ ) {
for ( var i = 0; i < cs.length; i ++ ) {
cs[ i ].mesh.materials[ 0 ].color.setHex( 0xaa0000 );
@@ -186,7 +189,7 @@
// Raycast nearest
ts = new Date().getTime();
var c = THREE.Collisions.rayCastNearest( r );
var c = THREE.Collisions.rayCastNearest( ray );
tt = new Date().getTime() - ts;
if ( c ) {
@@ -211,7 +214,8 @@
renderer.render( scene, camera );
stats.update();
stats.update();
}
function vts(v){
examples/webgl_collisions_terrain.html
+6 -9
View File
@@ -43,15 +43,14 @@ body {
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, loader, sphere, ray;
var camera, scene, renderer,
info, mouse2d, sun, loader, sphere, ray;
var theta = 0;
var radius = 250;
var speed = 0.0015;
var sphereSize = 4;
var theta = 0, radius = 250, speed = 0.002, sphereSize = 4;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
@@ -71,7 +70,6 @@ function init() {
sphere = new THREE.Mesh( new THREE.SphereGeometry( sphereSize, 10, 10 ), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
scene.addObject(sphere);
camera.target = sphere;
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -123,11 +121,10 @@ function animate() {
//info.innerHTML = "No intersection";
}
theta += speed;
camera.target.position.copy( sphere.position );
renderer.render( scene, camera );
}
examples/webgl_collisions_trigger.html
+3 -6
View File
@@ -50,14 +50,11 @@
<script type="text/javascript">
var scene, camera, renderer, info, mouse2d, sun, loader, sphere;
var camera, scene, renderer, info, mouse2d, sun, loader, sphere;
var range = 400;
var speed = 1;
var sphereSize = 4;
var cubes = [];
var range = 400, speed = 1, sphereSize = 4;
var cubes = [];
function init(){
container = document.createElement('div');