这里的第一篇文章.. 我不知道如何搜索这个主题,因为我认为它非常深奥。我会在解释后发布代码。
我创建了一个自定义动画函数,该函数将使用 setTimeout 函数进行递归调用以减慢调用速度,以便我可以控制动画。自定义动画函数只会在圆柱体内绘制一个矩形并在其中向上移动,并根据矩形在圆柱体内的高度来改变其宽度。
编辑:我已经想出了如何获得我想要的摄像机角度。检查评论以找出答案。
我现在遇到的问题是,当我设置初始相机位置和旋转并且 controls.update() 运行时,即使我没有移动相机,它也会改变旋转 z 轴。
这是我的全部代码:
var camera, scene, renderer,
geometry, material, mesh, flatrect;
var radius = 50,
segments = 16,
rings = 16,
WIDTH = 800,
HEIGHT = 800,
VIEW_ANGLE = 40,
ASPECT = WIDTH / HEIGHT,
NEAR = 1,
FAR = 5000;
var animation = true;
//var animatewidth = false;
var playblock=0;
var array = [.289, .342, .396, .451, .508, .568, .630, .697, .771, .857, 1], index = 0;
var myloop, myloop2;
var zcamera=1000; // How far the camera is away from the object
var mouseoncontainer=false;
var sliderx, slidery, sliderz;
function animatemain(){
animaterect(playblock++);
if(playblock<11)
setTimeout(function(){animatemain()},100);
};
$(document).ready(function(){
$('#container').mouseenter(function(){
$('#container').mousedown(function(){
mouseoncontainer = true;
})
})
$('#container').mouseleave(function(){
mouseoncontainer=false;
})
init();
animate();
$('#stopanim').click(function(){
animation=false;
})
$('#animatewidth').click(function(){
playblock=0;
animatemain()
});
});
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR );
//camera.position.z = zcamera;
scene.add(camera);
geometry = new THREE.CylinderGeometry(200,200,500,100);
material = new THREE.MeshNormalMaterial({color: 0x0000ee, opacity:.5, wireframe:true});
geometry1 = new THREE.CubeGeometry(1, 500, array[0]*400);
material1 = new THREE.MeshNormalMaterial({color:0x000000});
// lights up everything
var ambientLight = new THREE.AmbientLight( 0x00ff00 );
scene.add(ambientLight);
mesh = new THREE.Mesh(geometry, material);
flatrect = new THREE.Mesh(geometry1, material1);
flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[0],2));
controls = new THREE.TrackballControls(camera);
controls.rotatespeed = 50.0;
controls.zoomSpeed = 5.0;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = true;
controls.staticMoving = true;
//controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
scene.add(mesh);
scene.add(flatrect);
controls.update();
camera.position.set(224,1003,-684);
camera.rotation.set(-2.1692,0.1824, -1.8839);
renderer = new THREE.WebGLRenderer({ antialias: true } );
renderer.setSize( WIDTH, HEIGHT );
$('#container').html( renderer.domElement );
render();
}
function animate(){
window.requestAnimationFrame( animate );
$('#blabber').html('The x position is: '+camera.position.x+
'<br/>The y position is: '+camera.position.y+
'<br/>The z position is: '+camera.position.z+
'<br/>The x rotation is: '+camera.rotation.x+
'<br/>The y rotation is: '+camera.rotation.y+
'<br/>The z rotation is: '+camera.rotation.z);
render();
}
function animaterect(indexed){
scene.remove(flatrect);
geometry1 = new THREE.CubeGeometry(1, 500, array[indexed]*400);
material1 = new THREE.MeshNormalMaterial({color:0x000000});
flatrect = new THREE.Mesh(geometry1, material1);
flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[indexed],2));
scene.add(flatrect);
//$('#blabber').append(flatrect.scale.get);
render();
}
function render() {
if(mouseoncontainer==true)
controls.update();
renderer.render( scene, camera );
}
<body>
<div id="container" style="width:800px;height:800px;">
</div>
<button id="stopanim" type="input">Stop animation</button>
<button id="animatewidth" type="input">Animate Width</button>
<div id="blabber">
</div>
</body>
编辑 1:这是 jsfiddle 链接。 http://jsfiddle.net/J2NEB/240/