Question

我希望我创建的旋转球也可以垂直无限次地弹跳，这看起来与现实中的球严格在y轴上弹跳的方式逼真。

我发现的webgl示例似乎有点超负荷（多个球在多个平面上弹跳），并且我无法推断出实现我所需的核心设置。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 300 / 200, 1, 1000);


var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry);
scene.add(cube);



camera.position.z = 10;
var render = function () {
    requestAnimationFrame(render);
		cube.rotation.x -= 0.10;
    cube.rotation.y += 0.00;

    renderer.render(scene, camera);
};

render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

Answer 1

因此，只需选择Math.sin()：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 10, 5, 10), new THREE.MeshBasicMaterial({
  color: 0x00ffff,
  wireframe: true
}));
plane.rotation.x = -Math.PI * 0.5;
scene.add(plane);

var ball = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 8), new THREE.MeshBasicMaterial({
  color: 0xff00ff,
  wireframe: true
}));
scene.add(ball);

var clock = new THREE.Clock();
var time = 0;
var delta = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;
  ball.rotation.x = time * 4;
  ball.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 2;
  ball.position.z = Math.cos(time) * 4;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

如何为球体创建简单的垂直反弹动画

1 个答案: