写在前面

虽然看起来好像是物体自身在旋转,但确实是相机在围绕场景旋转。
另外，用简单的三个变量实现了重力模拟。

相机旋转方法

 var theta=0;
        var render=function () {
          requestAnimationFrame(render);
          controls.speedY+=controls.gravity;
          controls.posY+=controls.speedY;
          sphere.position.y=controls.posY;
          theta+=0.02;
          camera.rotation.y=theta;
          camera.position.set(5*Math.sin(theta),0,5*Math.cos(theta));
          if(sphere.position.y<=-3){
            controls.speedY*=-1.03;
          };

          renderer.render(scene,camera);
        };

定义一个角度变量theta,目的是为了将它传给三角函数用作其参数，旋转半径通过三角函数分解后即是在两个坐标轴上的具体数值，赋给相机即可。

重力模拟

var controls=new function () {
          this.gravity=-0.005;
          this.speedY=0;
          this.posY=2;
        };
var gui=new dat.GUI();
gui.add(controls,"gravity",-0.01,0);

由于threejs的坐标系统是y轴向上为正，与canvas的坐标系统不同，所以要设重力加速度值为负值。在定义控制器时顺便定义了speedY和posY,speedY代表y轴上的速度，posY即为坐标值。在每一帧里，速度加上重力加速度值，而位置加上速度值，这便是最粗糙的重力模拟了。定义y轴上某点为地面，低于此值时速度反向即可。这是模拟落地反弹。
说它粗糙，是因为真正的重力模拟需要考虑落地时的能量损失，以及遇到空气阻力时的表现，虽然这在视觉上表现出来的差别微乎其微。

代码全文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>threejs重力球演示</title>
    <script src="../three.js-master/build/three.min.js"></script>
    <script src="../jquery/jquery.js"></script>
    <script src="../../lib/dat.gui-master/build/dat.gui.min.js"></script>
    <link rel="stylesheet" href="../../lib/dat.gui-master/build/dat.gui.css">

    <style>
        body{
            margin:0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<script>
    $(document).ready(function () {

        var controls=new function () {
          this.gravity=-0.005;
          this.speedY=0;
          this.posY=2;
        };
        var gui=new dat.GUI();
        gui.add(controls,"gravity",-0.01,0);



        var scene=new THREE.Scene();
        var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setClearColor("#98f0c3");
        document.body.appendChild(renderer.domElement);

        var sphereGeometry=new THREE.SphereGeometry(1);
        var sphereMaterial=new THREE.MeshLambertMaterial({color:"#f0c945"});
        var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.position.y=3;
        scene.add(sphere);

        var cubeGeometry=new THREE.CubeGeometry(1,1,1);
        var cubeMaterial=new THREE.MeshLambertMaterial({color:"#ff005f"});
        var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
        cube.position.y=-4;
        scene.add(cube);

        var spotLight_1=new THREE.SpotLight({color:"#fff"});
        spotLight_1.position.y=4;
        spotLight_1.position.x=3;
        scene.add(spotLight_1);
        var spotLight_2=new THREE.SpotLight({color:"#fff"});
        spotLight_2.position.y=4;
        spotLight_2.position.x=-3;
        scene.add(spotLight_2);

        camera.position.z=6;

        var theta=0;
        var render=function () {
          requestAnimationFrame(render);
          controls.speedY+=controls.gravity;
          controls.posY+=controls.speedY;
          sphere.position.y=controls.posY;
          theta+=0.02;
          camera.rotation.y=theta;
          camera.position.set(5*Math.sin(theta),0,5*Math.cos(theta));
          if(sphere.position.y<=-3){
            controls.speedY*=-1.03;
          };

          renderer.render(scene,camera);
        };

        render();


    });
</script>
</body>
</html>

原文链接：https://blog.csdn.net/chenqiong1991/article/details/64518642