0
私は立方体を持つシンプルなシーンを持っています。 Orbitontrolsが使用され、スムーズな回転のための減衰が可能になりました。 tween.jsを使用してボタンをクリックすると、カメラを新しい位置にアニメートする関数を作成しました。しかし、ダンピングは、カメラがアニメーション化されるたびに減少しているようです。ここでtween.jsを使用するとオービットコントロールの減衰が影響を受けます
は私のコードは
var container;
var camera, scene, renderer;
var controls;
var cube;
init();
animate();
function init() {
container = document.getElementById('webgl_div');
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000);
camera.position.z = 500;
camera.position.y = 0;
camera.position.x = 0;
scene = new THREE.Scene();
cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
scene.add(cube);
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth/1.2, window.innerHeight/1.2);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.enableZoom = true;
controls.rotateSpeed = .1;
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
TWEEN.update();
render();
}
function render() {
renderer.render(scene, camera);
}
function rotate_camera() {
var tween = new TWEEN.Tween(camera.position)
.to({ x: 0, y: 0, z: 600 }, 1000)
.start();
animate();
}
のHTMLコード:
<div class="row">
<div class="col-md-10" id="webgl_div">
</div>
<div class="col-md-2">
<div class="row">
<div class="col-md-12">
<button type="button" id="rotate_camera_btn">Rotate Camera</button>
</div>
</div>
</div>
</div>
ボタンのクリックイベント(jqueryの)
$("#rotate_camera_btn").click(function(){
rotate_camera();
})
どのようにこれを是正することができますか?それともパフォーマンスの問題ですか?私はなぜそれが起こっているのか理解できません!