当我们需要固定场景背景,固定摄像机的时候。移动旋转物体可以使用Three.js提供的OrbitControls.js,也可以手动写控制器。
原理:获取鼠标点击的位置与移动的距离,根据移动的距离计算出大概旋转的角度。
<script src="../dist/js/three.js"></script>
<script src="../dist/js/Projector.js"></script>
<script src="../dist/js/CanvasRenderer.js"></script>
<script>
var container;
var camera, scene, renderer;
var cube, plane;
var width, height;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
console.log(window.innerHeight)
init();
animate();
function init() {
container = document.getElementById('canvasWrap')
width = document.getElementById('canvasWrap').clientWidth;
height = document.getElementById('canvasWrap').clientHeight;
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
//cube
var geometry = new THREE.BoxGeometry(200, 200, 200);
//console.log(geometry.faces.length) //12 一个面有2个三角面片
for (var i = 0; i < geometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i + 1].color.setHex(hex)
}
//vertexColors:THREE.FaceColors 顶点颜色采用上面循环中创建的3角面片的颜色(立方体显示的颜色就是三角面片的颜色)
//overdraw:0.5 设置的目的避免相邻的2个三角面片有分隔线,相当于重叠部分为0.5
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 }); //
cube = new THREE.Mesh(geometry, material);
cube.position.y = 150; //position(0,150,0)
scene.add(cube);
//plane
var geometry = new THREE.PlaneBufferGeometry(200, 200);
geometry.rotateX(-Math.PI / 2); //从右边看顺时针旋转
var material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, overdraw: 0.5 });
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
//CanvasRenderer 有更好的兼容性
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
document.addEventListener("mousedown", onDocumentMouseDown, false);
document.addEventListener("touchstart", onDocumentTouchStart, false);
document.addEventListener("touchmove", onDocumentTouchMove, false);
window.addEventListener("resize", onWindowResize, false);
}
function onWindowResize() {
windwoHalfX = width / 2;
windwoHalfY = height / 2;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("mouseup", onDocumentMouseUp, false);
document.addEventListener("mouseout", onDocumentMouseOut, false);
//按下去的时候鼠标相对位置
mouseXOnMouseDown = event.layerX - windowHalfX;
//鼠标按下的旋转角度
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove(event) {
//移动的时候鼠标相对位置
mouseX = event.layerX - 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.preventaDefault();
mouseXOnMouseDown = event.touches[0].layerX - windowHalfX;
targetRotationMouseDown = targetRotation;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventaDefault();
mouseX = event.touches[0].layerX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;;
}
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// cube.rotation.y 初始值为0
plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}
</script>
来自:http://www.qfunny.cn/pages/canvas_gemetry_cube.html
设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置。cursor属性可能的值:要实现鼠标移上去显示手形、需要在你的提交按钮上增加css cursor属性,并将它的值设置为pointer;
要达到无论在什么机器上,算出来的速度是一样的。计算两次mousemove之间的位移和时间,就可以算出精确的速度,不要将onMousemove的调用时间间隔看成是均等的,事实上也不是均等的
有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。以下总结鼠标三个按键操作:
作用:都是用来获取鼠标的位置;client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML
怎么在javascript中判断鼠标左键是否被按下?下面本篇文章就来给大家介绍一下使用javascript判断鼠标左键是否被按下的方法。在javascript中,可以通过Event 对象的button事件属性来判断鼠标左键是否被按下。
我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。
在前端页面交互中,鼠标拖拽是一个体验良好的功能,实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装
mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。
在css中,可以通过cursor属性来改鼠标样式。下面本篇文章就来给大家介绍一下cursor属性,希望对大家有所帮助。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!