javascript Three.js - 制作旋转动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8255619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 02:48:11 来源:igfitidea点击:
Three.js - Make a rotation animation?
提问by BorisD
I've built this piece of code...(javascript)
我已经构建了这段代码......（javascript）
Now we have a red sphere on the screen...the question is how to make it spinning around?
现在我们在屏幕上有一个红色的球体……问题是如何让它旋转？
var camera, scene, renderer, mouseX = 0, mouseY = 0;
var 相机、场景、渲染器、mouseX = 0、mouseY = 0；
var geometry,material,mesh;
var 几何、材料、网格；
init();
function init() {
// Camera params :
// field of view, aspect ratio for render output, near and far clipping plane.
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
// move the camera backwards so we can see stuff!
// default position is 0,0,0.
camera.position.z = 300;
// the scene contains all the 3D object data
scene = new THREE.Scene();
// and the CanvasRenderer figures out what the
// stuff in the scene looks like and draws it!
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// the renderer's canvas domElement is added to the body
document.body.appendChild( renderer.domElement );
// creating shapes
makeShapes();
// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );
// render 30 times a second (should also look
// at requestAnimationFrame)
setInterval(update,1000/30);
}
function update(){
updateParticles();
// and render the scene from the perspective of the camera
renderer.render( scene, camera );
}
function makeShapes() {
// create a sphere shape
geometry = new THREE.SphereGeometry( 50, 16, 16 );
// give a shape red color
material = new THREE.MeshLambertMaterial({color: 0xFF1111});
// create an object
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
// add it to the scene
scene.addObject( mesh );
}
function updateParticles(){
}
// called when the mouse moves
function onMouseMove( event ) {
// store the mouseX and mouseY position
mouseX = event.clientX;
mouseY = event.clientY;
}
采纳答案by pradeek
Try this :
试试这个 ：
var halfWidth = window.innerWidth/2, halfHeight = window.innerHeight/2;
function update(){
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
mesh.rotation.y -= 0.005;
renderer.render( scene, camera );
}
function onMouseMove( event ) {
mouseX = event.clientX - halfWidth;
mouseY = event.clientY - halfHeight;
}
