mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-13 23:16:07 +10:00
alteredq
f221b853b7
Mainly trying to avoid creation of new object per frame and also some variable names clarifications and whitespace cleanups. Not finished yet.
265 lines
6.4 KiB
HTML
265 lines
6.4 KiB
HTML
|
|
<html>
|
|
|
|
<head>
|
|
<title>three.js webgl - intersection: ray with mesh (through box)</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<style type="text/css">
|
|
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #f0f0f0;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#oldie { background-color: #ddd !important }
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 30px; left: 10px; width: 800px;
|
|
color: #000000;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
z-index:100;
|
|
}
|
|
|
|
#options {
|
|
position: absolute;
|
|
top: 10px; left: 10px; width: 800px;
|
|
color: #000000;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
z-index:100;
|
|
}
|
|
|
|
</style>
|
|
|
|
<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, 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();
|
|
|
|
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 );
|
|
camera.position.z = camdist;
|
|
mouse2d = new THREE.Vector3( 0, 0, 1 );
|
|
|
|
loader = new THREE.JSONLoader( );
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
var ambientLight = new THREE.AmbientLight( 0x606060 );
|
|
scene.addLight( ambientLight );
|
|
|
|
sun = new THREE.DirectionalLight( 0xffffff );
|
|
sun.position = camera.position.clone();
|
|
scene.addLight( sun );
|
|
|
|
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 sx = 300;
|
|
var sy = 240;
|
|
var sz = 300;
|
|
|
|
addCube( new THREE.Vector3(-sx, 0, 0), geometry );
|
|
addCube( new THREE.Vector3( 0, 0, 0), geometry );
|
|
addCube( new THREE.Vector3( sx, 0, 0), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, sy, 0), geometry );
|
|
addCube( new THREE.Vector3( 0, sy, 0), geometry );
|
|
addCube( new THREE.Vector3( sx, sy, 0), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx,-sy, 0), geometry );
|
|
addCube( new THREE.Vector3( 0, -sy, 0), geometry );
|
|
addCube( new THREE.Vector3( sx,-sy, 0), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, 0, sz), geometry );
|
|
addCube( new THREE.Vector3( 0, 0, sz), geometry );
|
|
addCube( new THREE.Vector3( sx, 0, sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, sy, sz), geometry );
|
|
addCube( new THREE.Vector3( 0, sy, sz), geometry );
|
|
addCube( new THREE.Vector3( sx, sy, sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx,-sy, sz), geometry );
|
|
addCube( new THREE.Vector3( 0, -sy, sz), geometry );
|
|
addCube( new THREE.Vector3( sx,-sy, sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, 0, -sz), geometry );
|
|
addCube( new THREE.Vector3( 0, 0, -sz), geometry );
|
|
addCube( new THREE.Vector3( sx, 0, -sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, sy, -sz), geometry );
|
|
addCube( new THREE.Vector3( 0, sy, -sz), geometry );
|
|
addCube( new THREE.Vector3( sx, sy, -sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx,-sy, -sz), geometry );
|
|
addCube( new THREE.Vector3( 0, -sy, -sz), geometry );
|
|
addCube( new THREE.Vector3( sx,-sy, -sz), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, 0, -sz*2), geometry );
|
|
addCube( new THREE.Vector3( 0, 0, -sz*2), geometry );
|
|
addCube( new THREE.Vector3( sx, 0, -sz*2), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx, sy, -sz*2), geometry );
|
|
addCube( new THREE.Vector3( 0, sy, -sz*2), geometry );
|
|
addCube( new THREE.Vector3( sx, sy, -sz*2), geometry );
|
|
|
|
addCube( new THREE.Vector3(-sx,-sy, -sz*2), geometry );
|
|
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>";
|
|
|
|
};
|
|
|
|
|
|
loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );
|
|
}
|
|
|
|
function addCube( p, g) {
|
|
|
|
totalFaces += g.faces.length;
|
|
totalColliders++;
|
|
|
|
var mesh = new THREE.Mesh( g, new THREE.MeshLambertMaterial( { color: 0x003300 } ) );
|
|
mesh.position = p;
|
|
|
|
//mesh.rotation.x = Math.random() * Math.PI;
|
|
//mesh.rotation.y = Math.random() * Math.PI;
|
|
//mesh.rotation.z = Math.random() * Math.PI;
|
|
|
|
//mesh.scale.x = Math.random() + 0.5;
|
|
//mesh.scale.y = Math.random() + 0.5;
|
|
//mesh.scale.z = Math.random() + 0.5;
|
|
|
|
scene.addObject( mesh );
|
|
var mc = THREE.CollisionUtils.MeshColliderWBox(mesh);
|
|
THREE.Collisions.colliders.push( mc );
|
|
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 );
|
|
|
|
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;
|
|
|
|
for ( i = 0; i < l; i++ ) {
|
|
|
|
meshes[ i ].materials[ 0 ].color.setHex( 0x003300 );
|
|
|
|
}
|
|
|
|
|
|
var c = THREE.Collisions.rayCastNearest( ray );
|
|
|
|
if( c ) {
|
|
|
|
//info.innerHTML += "Found @ distance " + c.distance;
|
|
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.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>
|
|
|
|
</head>
|
|
|
|
<body onload="init();">
|
|
<div id="info"></div>
|
|
<div id="options"></div>
|
|
</body>
|
|
|
|
</html>
|