我是three.js和计算机图形学的新手。所以我面临着非常简单的问题。我想只旋转立方体和轴设置静态。如何实现它，因为现在立方体和轴正在旋转？也许我必须使用其他类型的旋转？
我的代码：
<html>
<body>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/TrackBallControls.js"></script>
<script>
var camera, controls, secene, render;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
var debugaxis = function(axisLength){
//Shorten the vertex function
function v(x,y,z){
return new THREE.Vector3(x,y,z);
}
//Create axis (point1, point2, colour)
function createAxis(p1, p2, color){
var line, lineGeometry = new THREE.Geometry(),
lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
lineGeometry.vertices.push(p1, p2);
line = new THREE.Line(lineGeometry, lineMat);
scene.add(line);
}
createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000);
createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00);
createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
};
controls = new THREE.TrackballControls(camera);
controls.addEventListener('change', render);
scene = new THREE.Scene();
debugaxis(200);
var geometry = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshNormalMaterial({ wireFrame: false, transparent: true, opacity: 0.5});
var mesh = new THREE.Mesh( geometry, material);
scene.add(mesh);
for (var f = 0, fl = mesh.geometry.faces.length; f < fl; f++) {
var face = mesh.geometry.faces[f];
var centroid = new THREE.Vector3(0, 0, 0);
centroid.add(mesh.geometry.vertices[face.a]);
centroid.add(mesh.geometry.vertices[face.b]);
centroid.add(mesh.geometry.vertices[face.c]);
centroid.divideScalar(3);
var arrow = new THREE.ArrowHelper(
face.normal,
centroid,
25,
0x3333FF,
5,
5);
mesh.add(arrow);
}
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement);
}
function animate(){
requestAnimationFrame(animate);
controls.update();
}
function render(){
renderer.render(scene, camera);
}
</script>
</body>
</html>
答案 0 :(得分：0)
我只旋转一个立方体解决了这个问题。在这个例子中，我可以用鼠标旋转立方体。使用轨迹球动画是不可能实现的，因为你正在旋转相机（正如HenryHey所说）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../libs/three.js"></script>
<script src="../libs/Projector.js"></script>
<script src="../libs/CanvasRenderer.js"></script>
<script src="../libs/stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var cube;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
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';
info.innerHTML = 'Drag to spin the cube';
container.appendChild( info );
var debugaxis = function(axisLength){
//Shorten the vertex function
function v(x,y,z){
return new THREE.Vector3(x,y,z);
}
//Create axis (point1, point2, colour)
function createAxis(p1, p2, color){
var line, lineGeometry = new THREE.Geometry(),
lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
lineGeometry.vertices.push(p1, p2);
line = new THREE.Line(lineGeometry, lineMat);
scene.add(line);
}
createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000);
createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00);
createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
};
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 100;
camera.position.z = 500;
camera.position.x = 100;
scene = new THREE.Scene();
debugaxis(200);
// Cube
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial( { wireFrame: false, transparent: true, opacity: 0.5 } );
cube = new THREE.Mesh( geometry, material );
cube.position.y = 0;
cube.position.x = 0;
for (var f = 0, fl = cube.geometry.faces.length; f < fl; f++) {
var face = cube.geometry.faces[f];
var centroid = new THREE.Vector3(0, 0, 0);
centroid.add(cube.geometry.vertices[face.a]);
centroid.add(cube.geometry.vertices[face.b]);
centroid.add(cube.geometry.vertices[face.c]);
centroid.divideScalar(3);
var arrow = new THREE.ArrowHelper(
face.normal,
centroid,
30,
0x3333FF,
7,
7);
cube.add(arrow);
}
scene.add( cube );
// Plane
var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
//plane = new THREE.Mesh( geometry, material );
//scene.add( plane );
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
//renderer.setPixelRatio( window.devicePixelRatio );
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 );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
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() {
cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>