Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 1c26dd25 编写于 作者: M Mr.doob
浏览文件
操作

Fixed collisions examples.

上级 28c165f8
展开全部 隐藏空白更改
内联 并排
Showing with 23940 addition and 666 deletion
build/Three.js
浏览文件 @ 1c26dd25
此差异已折叠。
examples/webgl_collisions_box.html
浏览文件 @ 1c26dd25
......@@ -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 );
info.innerHTML = "";
var matrix = camera.matrixWorld.clone();
matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
matrix.multiplyVector3( r.origin );
r.direction = r.origin.clone().subSelf( camera.position );
var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
projector.unprojectVector( vector, camera );
info.innerHTML = "";
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var c = THREE.Collisions.rayCastNearest( r );
var c = THREE.Collisions.rayCastNearest( ray );
if( c ) {
if ( c ) {
info.innerHTML += "Found @ distance " + c.distance.toFixed(2);
c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
......
examples/webgl_collisions_mesh.html
浏览文件 @ 1c26dd25
......@@ -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
浏览文件 @ 1c26dd25
......@@ -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 );
ray.direction.copy( ray.origin );
ray.direction.subSelf( camera.position );
//var ray2 = new THREE.Ray();
//ray2.origin = ray.origin.clone();
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() );
if( meshes.length == 0 ) return;
if ( meshes.length == 0 ) return;
var i, l = meshes.length;
......
examples/webgl_collisions_primitives.html
浏览文件 @ 1c26dd25
......@@ -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
浏览文件 @ 1c26dd25
......@@ -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
浏览文件 @ 1c26dd25
......@@ -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');
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或