<!DOCTYPE HTML>
<html lang="en">
<head>
<title>簡單實現基於Threejs的物體旋轉鼠標滾輪交互</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<style type="text/css">
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<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 container, stats;
var camera, scene, renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
var fov = 40;
var near = 1;//最小範圍
var far = 1000;//最大範圍
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';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
camera = new THREE.Camera(70, window.innerWidth / window.innerHeight, near, far);
camera.fov = fov;
camera.position.y = 150;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
var materials = [];
for (var i = 0; i < 6; i++) {
materials.push([new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })]);
}
cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.position.y = 150;
cube.overdraw = true;
scene.addObject(cube);
plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({ color: 0xe0e0e0 }));
plane.rotation.x = - 90 * (Math.PI / 180);
plane.overdraw = true;
scene.addObject(plane);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener('mousewheel', mousewheel, false);
}
//重點！！！！！
function mousewheel(e) {
e.preventDefault();
//e.stopPropagation();
if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
if (e.wheelDelta > 0) { //當滑輪向上滾動時
fov -= (near < fov ? 1 : 0);
}
if (e.wheelDelta < 0) { //當滑輪向下滾動時
fov += (fov < far ? 1 : 0);
}
} else if (e.detail) { //Firefox滑輪事件
if (e.detail > 0) { //當滑輪向上滾動時
fov -= 1;
}
if (e.detail < 0) { //當滑輪向下滾動時
fov += 1;
}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
}
function onDocumentMouseDown(event) {//按下鼠標
event.preventDefault();
//鼠標監聽
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove(event) {//移動鼠標
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
function onDocumentMouseUp(event) {//釋放鼠標鍵
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut(event) {//移走鼠標
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
plane.rotation.z = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}
</script>
</body>
</html>
基於Threejs的物體旋轉鼠標滾輪交互_艾孜爾江撰
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章