触发旋转的MouseUp事件
Three.js MouseUp event that triggers rotation
作为Three.js和javascript的新手,我正在尝试测试一些鼠标事件交互。我只是从下面的页面抓取了一些Javascript,调整它,使其成为'MouseUp',而不是'MouseOver'事件,并一般简化它:-
https://threejs.org/examples/webgl_interactive_cubes
我正在尝试实现的一件事是立方体的旋转以及一旦鼠标被点击它的颜色变化。目前,我只是有一个旋转动画,点击时改变颜色,如果我点击立方体外面的任何地方,立方体就会回到自己的位置。我只是想知道如何让它暂停和恢复?
理想情况下,我希望动画触发点击或鼠标向上。
代码如下:
<script>
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 50;
var theta = 0;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xffffff, 0.5 ) );
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 30, 10, 1 ).normalize();
scene.add( light );
camera.position.x = -25;
camera.position.y = 15;
camera.position.z = 25;
camera.lookAt( scene.position );
camera.updateMatrixWorld();
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false});
var object = new THREE.Mesh(cubeGeometry, cubeMaterial);
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add( object );
var cubeGeometry = new THREE.BoxGeometry(5,5,5);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 10;
cube.position.y = 10;
cube.position.z = 10;
scene.add( cube );
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseUp( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// find intersections
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( Math.random() * 0x111111 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
theta = -75;
camera.position.x = new camera.position.x;
camera.position.y = new camera.position.y;
camera.position.z = new camera.position.x;
//camera.lookAt( scene.position );
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render()
{
theta += 1;
camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
如果我没猜错的话。在animate()
函数中,您可以这样做:
function animate() {
requestAnimationFrame( animate );
if ( INTERSECTED ) INTERSECTED.rotation.y += 0.01;
render();
}
因此,你检查INTERSECTED
是否不是null
,如果不是,然后旋转你选择的对象
相关文章:
- 在拖动过程中释放鼠标时忽略 JavaScript mouseUp 事件
- ExtJS 4按钮上的mousedown/mouseup事件
- mouseup事件后禁用jQuery contextMenu
- mouseup事件停止firefox上的click事件
- 是mousedown事件固有地比mouseup事件慢
- 谷歌地图矩形mouseDown和mouseUp事件无法在边界触发
- 使用jquery在body mouseup事件后停止传播
- 双击时从对话框中选择文件时,避免出现mouseup事件
- jQuery:如何将函数绑定到mouseup事件之后立即发生的某个事件
- 触发旋转的MouseUp事件
- Mouseup事件与可见性开关冲突
- 悬停在iframe上后不会触发文档上的Mouseup事件
- JavaScript mouseup事件被触发多次在一次点击
- 在IE和Safari中滚动条移动后不会触发mouseup事件
- 使用mouseup事件选择文本,使用调用函数选择dbclick事件
- 如何在jquery范围滑块中使用mouseup事件
- mouseup事件有问题
- 为什么jquery mouseup事件不工作在谷歌浏览器
- I'我试图在mousedown之后强制mouseup事件
- 检查是否同时触发了mousedown和mouseup事件