1
私はthree.jsで3D紡績ホイールのアニメーションを作ろうとしています。ホイールを加速するためにキーを押して、キーを離すと摩擦で減速して止まります。Three.jsスピードと摩擦でアニメーションをする
私はこのサイトでさまざまな例を試しましたが、正しく動作させることはできません。私は物理学を理解していますが、レンダーループで実装するのは苦労しています。
また、今後、私は減速曲線を実現したいと考えています。 誰かがこのようなことをする手掛かりを持っていますか？事前に
おかげ
編集：
私はそれをしたいようは最後にちょっと働いて何かを持って！デルタは、アニメーション作品を作るための鍵だったように思え `
var container, outputLeap;
var camera, scene, renderer;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
var sceneRoot = new THREE.Group();
var wheelSpin = new THREE.Group();
var wheelMesh;
var clock = new THREE.Clock();
var speed = 0.1;
var decelRate = 100;
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 onWindowResize() {
windowHalfX = window.innerWidth/2;
windowHalfY = window.innerHeight/2;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function init() {
outputLeap = document.getElementById('output-leap');
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 0.1, 80);
scene = new THREE.Scene();
var geometryWheel = new THREE.CylinderGeometry(3, 3, 0.05, 32);
var materialWheel = new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
});
var wheelMesh = new THREE.Mesh(geometryWheel, materialWheel);
scene.add(sceneRoot);
sceneRoot.add(wheelSpin);
wheelSpin.add(wheelMesh);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function render() {
var time = clock.getElapsedTime();
var delta = clock.getDelta();
camera.position.y = 15;
if (speed > 0)
speed = Math.max(0, speed - decelRate * delta);
else
speed = Math.min(0, speed + decelRate * delta);
camera.lookAt(scene.position);
wheelSpin.rotation.y -= speed;
outputLeap.innerHTML = 'Rotation: ' + speed;
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
}
init();
animate();<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="info-top">
<div id="output"></div>
<div id="output-leap"><br></div>
</div>
<div id="container"></div>
<script src="http://threejs.org/build/three.min.js">
</script>
<script src='js/THREEx.KeyboardState.js'></script>
<script>
</script>
</body>
</html>：これは私のコードです。しかし、今私はなぜだろうか？また、スピードと減速の変数をより現実的な値にどのように変換するのだろうか？
ポストを簡素化されました – gman