05three.js 跳动的小球(二)

图片.png
    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);

    //立方体1
    var cubeGeometry = new THREE.BoxGeometry(4,4,4);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color:0x0000FF
    });
    var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
    cube.position.set(-16,2,0);
    cube.castShadow = true;
    cube.receiveShadow = true;
    scene.add(cube);
    //立方体2
    var cubeGeometry = new THREE.BoxGeometry(4,4,4);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color:0x22FFDD
    });
    var cube2 = new THREE.Mesh(cubeGeometry,cubeMaterial);
    cube2.position.set(16,2,0);
    cube2.castShadow = true;
    cube2.receiveShadow = true;
    scene.add(cube2);
    //圆球
    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,6,0);
    sphere.castShadow = true;
    scene.add(sphere);

    var ambientLight = new THREE.AmbientLight('#212121');
    scene.add(ambientLight);
    var pointLight = new THREE.SpotLight(0xFFFFFF);
    pointLight.position.set(0,80,0);
    pointLight.castShadow = true;
    scene.add(pointLight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene,camera);
    var step = 90;
    var angle = 0;
    function run() {
        step += 1;
        angle = step*Math.PI/180;
        //camera.position.x = 16*(Math.sin(step));
        sphere.position.x = 16*(Math.sin(angle));
        sphere.position.y = 6+(8*Math.abs(Math.cos(angle)));
        if(step > 2699){
            step = 2699;
        }
        console.log(sphere.position.y);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、三大组件 在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)...
    kingder阅读 1,739评论 0 5
  • 1、OrthographicCamera 正交投影照相机 2、PerspectiveCamera 透视投影照相机 ...
    小母鸡叽叽叽阅读 669评论 1 3
  • 今天我们来了解一下模型 1.模型的基础知识 既然three.js是JS编写的WebGL第三方库,那这里肯定说的就是...
    sakatayui酱阅读 6,735评论 0 4
  • 2018年写点Css 2018年的关键次是涅槃,Css每天写一点,开开心心过大年! 跳动的小球 今天的实例是,《C...
    前端大飞阅读 392评论 0 1
  • 不刊之论:刊,删改,修订。不可删改或修订的言论。形容文章或言论的精当,无懈可击。易误用为贬义。 深孚众望:孚,使人...
    1990工作室阅读 667评论 0 0