css动画及three.js的使用

笔记

网页中放置一个div容器

加入样式

.floatUp {
           height: 60px;
           width: 60px;
           margin: 200px 0 0 30px ;
           background-color: yellow;
           animation: upMove 3s ease alternate forwards;
   }
 @keyframes upMove {
               0% {
                       background-color: yellowgreen;
                       opacity: 0;
                       transform: translateY(0);
               }
               100% {
                       background-color: yellowgreen;
                       opacity: 1;
                       transform: translateY(-200px);
               }
       }

@keyframes 来规则动画

主要使用css样式的animation动画属性，其animation 属性是一个简写属性，用于设置以下六个动画属性

three.js的使用

//首先引入three.js
<script>
        // Our Javascript will go here.

        //借助three.js显示场景 需要三个对象： 场景、相机、渲染器
        const scene = new THREE.Scene(); //绘制场景

        //PerspectiveCamera（透视摄像机
        //四个参数	1.视野角度(FOV) ->摄像机视锥体垂直视野角度
                // 		2.长宽比(aspect ratio) ->摄像机视锥体长宽比
                // 		3.近截面(near) ->摄像机视锥体近端面
                // 		4.远截面(far) ->摄像机视锥体远端面
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        //WebGLRenderer 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染长宽
        document.body.appendChild( renderer.domElement );
        //domElement属性： 一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数);你需要做的仅仅是像下面这样将它加页面里去:

        const geometry = new THREE.BoxGeometry(); //创建对象
        const material = new THREE.MeshMatcapMaterial( 
                                                        { 
                                                                color: 0x00b3c1, 
                                                                normalMapType: 30,
                                                        } 
                                        ); //对对象设置材质
        const cube = new THREE.Mesh( geometry, material ); //设置网格 对象在网格中自由移动
        scene.add( cube );


        camera.position.z = 50;

        function animate() {
                requestAnimationFrame( animate );
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render( scene, camera );
        }
        animate();
</script>

效果图：