notes

Place a div container in the web page

<div class="floatUp"></div>
Copy the code

Add the style

.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); }}Copy the code

@keyframes to animate

The animation property, which is a shorthand property, is used to set the following six animation properties

Three. The use of js

// first introduce three.js
<script>
        // Our Javascript will go here.

        // Displaying a scene with three.js requires three objects: scene, camera, and renderer
        const scene = new THREE.Scene(); // Draw the scene

        //PerspectiveCamera
        1. FOV -> Vertical view Angle of the camera cone
                // 2. Aspect ratio -> Camera cone length ratio
                // 3. Near section -> Near end face of camera's viewing cone
                // 4. Far section (FAR) -> Far end face of camera viewing cone
        const camera = new THREE.PerspectiveCamera( 75.window.innerWidth / window.innerHeight, 0.1.1000 );
        / / WebGLRenderer renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );// Set render width
        document.body.appendChild( renderer.domElement );
        //domElement property: a canvas on which the renderer draws output. The renderer's constructor is created automatically (if no canvas argument is passed); All you need to do is add it to the page like this:

        const geometry = new THREE.BoxGeometry(); // Create an object
        const material = new THREE.MeshMatcapMaterial( 
                                                        { 
                                                                color: 0x00b3c1.normalMapType: 30});// Set the material for the object
        const cube = new THREE.Mesh( geometry, material ); // Set the grid object to move freely in the grid
        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>
Copy the code

Effect: