04three.js跳动的小球（一）

图片.png
<pre id="line1"><!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>跳动的小球</title>  <script src="[../js/three.js](view-source:https://scqilin.github.io/mycodes/threejs01/js/three.js)"></script>  <style> body{
            margin: 0;
            overflow: hidden;
        } </style>  </head>  <body>  <div id="three"></div>  <script type="text/javascript"> var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    camera.position.set(0,20,40);
    camera.lookAt(scene.position);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor('#CCCCCC');
    renderer.shadowMapEnabled = true;
    //坐标
    var axes = new THREE.AxisHelper(4);
    scene.add(axes);

    var planeGeometry = new THREE.PlaneGeometry(40,10,1,1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color:0x8DCC87
    });
    var plane = new THREE.Mesh(planeGeometry,planeMaterial);
    plane.position.set(0,0,0);
    plane.rotation.x = -0.5*Math.PI;
    plane.receiveShadow = true;
    scene.add(plane);

    var sphereGeometry = new THREE.SphereGeometry(2,20,20);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color:0xFF00F7
    });
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    sphere.position.set(-16,2,0);
    sphere.castShadow = true;
    scene.add(sphere);

    var ambientLight = new THREE.AmbientLight('#212121');
    scene.add(ambientLight);
    var SpotLight = new THREE.SpotLight(0xFFFFFF);
    SpotLight.position.set(0,80,0);
    SpotLight.castShadow = true;
    scene.add(SpotLight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene,camera);
    var step = 0;
    function run() {
        step += 0.04;
        sphere.position.x = 16*(Math.sin(step));
        sphere.position.y = 2+(8*Math.abs(Math.cos(step)));
        console.log(sphere.position.y);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run() </script>  </body>  </html></pre>
04three.js跳动的小球（一）

推荐阅读更多精彩内容
