Unboring SL
5 years ago
parent
103e404dd9
commit
c96d57ccb2
File diff suppressed because one or more lines are too long
@ -0,0 +1,105 @@ |
|||||||
|
/* global AFRAME, THREE */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Implement AABB collision detection for entities with a mesh. |
||||||
|
* (https://en.wikipedia.org/wiki/Minimum_bounding_box#Axis-aligned_minimum_bounding_box)
|
||||||
|
* It sets the specified state on the intersected entities. |
||||||
|
* |
||||||
|
* @property {string} objects - Selector of the entities to test for collision. |
||||||
|
* @property {string} state - State to set on collided entities. |
||||||
|
* |
||||||
|
*/ |
||||||
|
AFRAME.registerComponent('aabb-collider', { |
||||||
|
schema: { |
||||||
|
objects: {default: ''}, |
||||||
|
state: {default: 'collided'} |
||||||
|
}, |
||||||
|
|
||||||
|
init: function () { |
||||||
|
this.els = []; |
||||||
|
this.collisions = []; |
||||||
|
this.elMax = new THREE.Vector3(); |
||||||
|
this.elMin = new THREE.Vector3(); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* Update list of entities to test for collision. |
||||||
|
*/ |
||||||
|
update: function () { |
||||||
|
var data = this.data; |
||||||
|
var objectEls; |
||||||
|
|
||||||
|
// Push entities into list of els to intersect.
|
||||||
|
if (data.objects) { |
||||||
|
objectEls = this.el.sceneEl.querySelectorAll(data.objects); |
||||||
|
} else { |
||||||
|
// If objects not defined, intersect with everything.
|
||||||
|
objectEls = this.el.sceneEl.children; |
||||||
|
} |
||||||
|
// Convert from NodeList to Array
|
||||||
|
this.els = Array.prototype.slice.call(objectEls); |
||||||
|
}, |
||||||
|
|
||||||
|
tick: (function () { |
||||||
|
var boundingBox = new THREE.Box3(); |
||||||
|
return function () { |
||||||
|
var collisions = []; |
||||||
|
var el = this.el; |
||||||
|
var mesh = el.getObject3D('mesh'); |
||||||
|
var self = this; |
||||||
|
// No mesh, no collisions
|
||||||
|
if (!mesh) { return; } |
||||||
|
// Update the bounding box to account for rotations and
|
||||||
|
// position changes.
|
||||||
|
updateBoundingBox(); |
||||||
|
// Update collisions.
|
||||||
|
this.els.forEach(intersect); |
||||||
|
// Emit events.
|
||||||
|
collisions.forEach(handleHit); |
||||||
|
// No collisions.
|
||||||
|
if (collisions.length === 0) { self.el.emit('hit', {el: null}); } |
||||||
|
// Updated the state of the elements that are not intersected anymore.
|
||||||
|
this.collisions.filter(function (el) { |
||||||
|
return collisions.indexOf(el) === -1; |
||||||
|
}).forEach(function removeState (el) { |
||||||
|
el.removeState(self.data.state); |
||||||
|
el.emit('hitend'); |
||||||
|
}); |
||||||
|
// Store new collisions
|
||||||
|
this.collisions = collisions; |
||||||
|
|
||||||
|
// AABB collision detection
|
||||||
|
function intersect (el) { |
||||||
|
var intersected; |
||||||
|
var mesh = el.getObject3D('mesh'); |
||||||
|
var elMin; |
||||||
|
var elMax; |
||||||
|
if (!mesh) { return; } |
||||||
|
boundingBox.setFromObject(mesh); |
||||||
|
elMin = boundingBox.min; |
||||||
|
elMax = boundingBox.max; |
||||||
|
// Bounding boxes are always aligned with the world coordinate system.
|
||||||
|
// The collision test checks for the conditions where cubes intersect.
|
||||||
|
// It's an extension to 3 dimensions of this approach (with the condition negated)
|
||||||
|
// https://www.youtube.com/watch?v=ghqD3e37R7E
|
||||||
|
intersected = (self.elMin.x <= elMax.x && self.elMax.x >= elMin.x) && |
||||||
|
(self.elMin.y <= elMax.y && self.elMax.y >= elMin.y) && |
||||||
|
(self.elMin.z <= elMax.z && self.elMax.z >= elMin.z); |
||||||
|
if (!intersected) { return; } |
||||||
|
collisions.push(el); |
||||||
|
} |
||||||
|
|
||||||
|
function handleHit (hitEl) { |
||||||
|
hitEl.emit('hit'); |
||||||
|
hitEl.addState(self.data.state); |
||||||
|
self.el.emit('hit', {el: hitEl}); |
||||||
|
} |
||||||
|
|
||||||
|
function updateBoundingBox () { |
||||||
|
boundingBox.setFromObject(mesh); |
||||||
|
self.elMin.copy(boundingBox.min); |
||||||
|
self.elMax.copy(boundingBox.max); |
||||||
|
} |
||||||
|
}; |
||||||
|
})() |
||||||
|
}); |
||||||
@ -1,19 +0,0 @@ |
|||||||
AFRAME.registerComponent('drag-controls', { |
|
||||||
schema: {objects: {type: 'string', default: 'a-entity'}}, |
|
||||||
|
|
||||||
init: function () { |
|
||||||
var objects = []; |
|
||||||
var el = this.el; |
|
||||||
var els; |
|
||||||
var dragControls; |
|
||||||
els = el.sceneEl.querySelectorAll(this.data.objects); |
|
||||||
for (var i = 0; i < els.length; i++) { |
|
||||||
console.log(i); |
|
||||||
objects.push(els[i].object3D); |
|
||||||
} |
|
||||||
|
|
||||||
el.sceneEl.addEventListener('renderstart', function () { |
|
||||||
dragControls = new THREE.DragControls(objects, el.sceneEl.camera, el.sceneEl.renderer.domElement); |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
@ -1,282 +0,0 @@ |
|||||||
/* |
|
||||||
* @author zz85 / https://github.com/zz85
|
|
||||||
* @author mrdoob / http://mrdoob.com
|
|
||||||
* Running this will allow you to drag three.js objects around the screen. |
|
||||||
*/ |
|
||||||
|
|
||||||
THREE.DragControls = function ( _objects, _camera, _domElement ) { |
|
||||||
|
|
||||||
if ( _objects instanceof THREE.Camera ) { |
|
||||||
|
|
||||||
console.warn( 'THREE.DragControls: Constructor now expects ( objects, camera, domElement )' ); |
|
||||||
var temp = _objects; _objects = _camera; _camera = temp; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
var _plane = new THREE.Plane(); |
|
||||||
var _raycaster = new THREE.Raycaster(); |
|
||||||
|
|
||||||
var _mouse = new THREE.Vector2(); |
|
||||||
var _offset = new THREE.Vector3(); |
|
||||||
var _intersection = new THREE.Vector3(); |
|
||||||
|
|
||||||
var _selected = null, _hovered = null; |
|
||||||
|
|
||||||
//
|
|
||||||
|
|
||||||
var scope = this; |
|
||||||
|
|
||||||
function activate() { |
|
||||||
|
|
||||||
_domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); |
|
||||||
_domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); |
|
||||||
_domElement.addEventListener( 'mouseup', onDocumentMouseCancel, false ); |
|
||||||
_domElement.addEventListener( 'mouseleave', onDocumentMouseCancel, false ); |
|
||||||
_domElement.addEventListener( 'touchmove', onDocumentTouchMove, false ); |
|
||||||
_domElement.addEventListener( 'touchstart', onDocumentTouchStart, false ); |
|
||||||
_domElement.addEventListener( 'touchend', onDocumentTouchEnd, false ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function deactivate() { |
|
||||||
|
|
||||||
_domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false ); |
|
||||||
_domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false ); |
|
||||||
_domElement.removeEventListener( 'mouseup', onDocumentMouseCancel, false ); |
|
||||||
_domElement.removeEventListener( 'mouseleave', onDocumentMouseCancel, false ); |
|
||||||
_domElement.removeEventListener( 'touchmove', onDocumentTouchMove, false ); |
|
||||||
_domElement.removeEventListener( 'touchstart', onDocumentTouchStart, false ); |
|
||||||
_domElement.removeEventListener( 'touchend', onDocumentTouchEnd, false ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function dispose() { |
|
||||||
|
|
||||||
deactivate(); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentMouseMove( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
|
|
||||||
var rect = _domElement.getBoundingClientRect(); |
|
||||||
|
|
||||||
_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1; |
|
||||||
_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1; |
|
||||||
|
|
||||||
_raycaster.setFromCamera( _mouse, _camera ); |
|
||||||
|
|
||||||
if ( _selected && scope.enabled ) { |
|
||||||
|
|
||||||
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) { |
|
||||||
|
|
||||||
_selected.position.copy( _intersection.sub( _offset ) ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'drag', object: _selected } ); |
|
||||||
|
|
||||||
return; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_raycaster.setFromCamera( _mouse, _camera ); |
|
||||||
|
|
||||||
var intersects = _raycaster.intersectObjects( _objects, true ); |
|
||||||
|
|
||||||
if ( intersects.length > 0 ) { |
|
||||||
|
|
||||||
var object = intersects[ 0 ].object.parent; |
|
||||||
|
|
||||||
_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), object.position ); |
|
||||||
|
|
||||||
if ( _hovered !== object ) { |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'hoveron', object: object } ); |
|
||||||
|
|
||||||
_domElement.style.cursor = 'pointer'; |
|
||||||
_hovered = object; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} else { |
|
||||||
|
|
||||||
if ( _hovered !== null ) { |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'hoveroff', object: _hovered } ); |
|
||||||
|
|
||||||
_domElement.style.cursor = 'auto'; |
|
||||||
_hovered = null; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentMouseDown( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
|
|
||||||
_raycaster.setFromCamera( _mouse, _camera ); |
|
||||||
|
|
||||||
var intersects = _raycaster.intersectObjects( _objects, true ); |
|
||||||
|
|
||||||
if ( intersects.length > 0 ) { |
|
||||||
|
|
||||||
_selected = intersects[ 0 ].object.parent; |
|
||||||
|
|
||||||
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) { |
|
||||||
|
|
||||||
_offset.copy( _intersection ).sub( _selected.position ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_domElement.style.cursor = 'move'; |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'dragstart', object: _selected } ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentMouseCancel( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
|
|
||||||
if ( _selected ) { |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'dragend', object: _selected } ); |
|
||||||
|
|
||||||
_selected = null; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_domElement.style.cursor = 'auto'; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentTouchMove( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
event = event.changedTouches[ 0 ]; |
|
||||||
|
|
||||||
var rect = _domElement.getBoundingClientRect(); |
|
||||||
|
|
||||||
_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1; |
|
||||||
_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1; |
|
||||||
|
|
||||||
_raycaster.setFromCamera( _mouse, _camera ); |
|
||||||
|
|
||||||
if ( _selected && scope.enabled ) { |
|
||||||
|
|
||||||
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) { |
|
||||||
|
|
||||||
_selected.position.copy( _intersection.sub( _offset ) ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'drag', object: _selected } ); |
|
||||||
|
|
||||||
return; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentTouchStart( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
event = event.changedTouches[ 0 ]; |
|
||||||
|
|
||||||
var rect = _domElement.getBoundingClientRect(); |
|
||||||
|
|
||||||
_mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1; |
|
||||||
_mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1; |
|
||||||
|
|
||||||
_raycaster.setFromCamera( _mouse, _camera ); |
|
||||||
|
|
||||||
var intersects = _raycaster.intersectObjects( _objects, true ); |
|
||||||
|
|
||||||
if ( intersects.length > 0 ) { |
|
||||||
|
|
||||||
_selected = intersects[ 0 ].object.parent; |
|
||||||
|
|
||||||
_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _selected.position ); |
|
||||||
|
|
||||||
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) { |
|
||||||
|
|
||||||
_offset.copy( _intersection ).sub( _selected.position ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_domElement.style.cursor = 'move'; |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'dragstart', object: _selected } ); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
function onDocumentTouchEnd( event ) { |
|
||||||
|
|
||||||
event.preventDefault(); |
|
||||||
|
|
||||||
if ( _selected ) { |
|
||||||
|
|
||||||
scope.dispatchEvent( { type: 'dragend', object: _selected } ); |
|
||||||
|
|
||||||
_selected = null; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_domElement.style.cursor = 'auto'; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
activate(); |
|
||||||
|
|
||||||
// API
|
|
||||||
|
|
||||||
this.enabled = true; |
|
||||||
|
|
||||||
this.activate = activate; |
|
||||||
this.deactivate = deactivate; |
|
||||||
this.dispose = dispose; |
|
||||||
|
|
||||||
// Backward compatibility
|
|
||||||
|
|
||||||
this.setObjects = function () { |
|
||||||
|
|
||||||
console.error( 'THREE.DragControls: setObjects() has been removed.' ); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
this.on = function ( type, listener ) { |
|
||||||
|
|
||||||
console.warn( 'THREE.DragControls: on() has been deprecated. Use addEventListener() instead.' ); |
|
||||||
scope.addEventListener( type, listener ); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
this.off = function ( type, listener ) { |
|
||||||
|
|
||||||
console.warn( 'THREE.DragControls: off() has been deprecated. Use removeEventListener() instead.' ); |
|
||||||
scope.removeEventListener( type, listener ); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
this.notify = function ( type ) { |
|
||||||
|
|
||||||
console.error( 'THREE.DragControls: notify() has been deprecated. Use dispatchEvent() instead.' ); |
|
||||||
scope.dispatchEvent( { type: type } ); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
THREE.DragControls.prototype = Object.create( THREE.EventDispatcher.prototype ); |
|
||||||
THREE.DragControls.prototype.constructor = THREE.DragControls; |
|
||||||
Loading…
Reference in new issue