1
一般的にThree.jsとjavascriptの新機能として、いくつかのマウスイベントのやりとりをテストしようとしています。私はむしろ、「マウスオーバー」イベントよりも、それは「MouseUpイベント」だように、それを調整し、次のページのオフにいくつかのJavascriptをつかんで、一般的にそれを簡素化： - 私は物事の回転をトリガーするThree.js MouseUpイベント
https://threejs.org/examples/#webgl_interactive_cubes
ワン達成しようとするのは、マウスがクリックされると、キューブの回転だけでなく色の変化です。現時点では、私はちょうど回転アニメーションをクリックして色を変えています。そして、どこでもキューブの外をクリックすると、キューブが元の状態に戻ってきます。私はちょうどそれを一時停止し、再開させる方法を考えている？
理想的には、アニメーションをclickまたはmouseUpでトリガーしたいと思います。次のように
コードは次のとおりです。
<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>