webgl之3d动画

前端外刊评论

2018-04-16

之前的几篇文章都是静态的，而这里主要介绍如何使物体动起来，并且学会使用性能监视器来监测性能。

而如果要让物体动起来，实际上我们是有两种方法的，第一种是让物体真的动起来，另外一种是让摄像机动起来这样物体相对来说也就动起来了。另外，实际上在让物体动起来的过程中，我们是不断通过调用 renderer.render(scene, camera)这个函数实现的，那么怎么才能不断调用这个函数呢？这就需要用到 requestAnimationFrame函数了，这个函数接受一个函数作为参数，并且会在每秒内调用60次，那么最终屏幕就会在一秒内渲染60次，这样就可以形成动画了。如下所示，就是一个让物体运动起来的动画:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="./three.js"></script>
</head>

<body>
    <script>
        var scene = new THREE.Scene();

        var axes = new THREE.AxesHelper(1000);
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.x = 300;
        camera.position.y = 300;
        camera.position.z = 300;
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 1; // camera.up.z = 1, 所以渲染出来的结果是z轴朝上。
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x111111);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var cubeGeometry = new THREE.CubeGeometry(10, 10, 10); 
        var meshCube = new THREE.MeshBasicMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, meshCube);
        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        scene.add(cube);
        document.body.append(renderer.domElement);

        var isDestination = false;

        function animation() {
            var interval = 5;
            if (!isDestination) {
                cube.position.x = cube.position.x + interval;
            } else {
                cube.position.x = cube.position.x - interval;
            }
            if (cube.position.x == 330) {
                isDestination = true;
            }
            if (cube.position.x == 0) {
                isDestination = false;
            }
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>
</html>

即首先创建场景，然后创建坐标轴并加入到场景中，接着创建相机，注意相机所接受的参数比较多，且相机需要指定position位置以及up位置，且使用lookAt函数，接下来创建一个渲染器，指定背景颜色和宽、高，然后创建一个物体，最后需要将渲染器加入到document.body中，接着是一个动画，然后运行即可。但是，我们可以发现虽然上面代码完成了，但是封装的不好，我们可以尝试着将其用函数封装，如下：

position webgl var cube var函数

安科网

webgl之3d动画

前端外刊评论

前端外刊评论

相关推荐

WebGL简易教程(十一)：纹理

我用Python帮学校写了一款图书管理系统！教导员居然请我吃饭

左右切换css，html

分享一个纯CSS写的钟表式计时器

jquery: carousel arrow click

css 四个角

LESS

css实现波浪纹，水波纹动画

小程序自定义二维码 canvas海报 canvas保存为本地图片

CSS定位

苹果css

深入理解CSS绝对定位

CSS - checkbox 样式

kafka 吞吐量为什么这么大？

关于Css的定位的一些总结

c（css 精灵）

css定位-position

css中position属性

CSS position定位

css面试题

前端外刊评论