Three.JS学习 4：循环渲染与动画

最新推荐文章于 2024-08-15 11:48:00 发布
最新推荐文章于 2024-08-15 11:48:00 发布
阅读量4.4k 收藏 3
点赞数 1
分类专栏： # Canvas WebGL ThreeJS 文章标签： 函数 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xundh/article/details/54412469
版权

本文学习内容来源：
http://www.hewebgl.com/article/getarticle/58

渲染

renderer.render(scence,camera);

当改变了物体的属性时，需要重新调用render()函数，浏览器才会自动刷新场景。
为了循环渲染，要使用requestAnimationFrame函数，传递一个callback参数。

function animate(){
  render();
  requestAnimationFrame(animate);
}

移动摄像机让物体动起来

移动一个物体的源代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer,width,height;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFFFFFF);
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);
                light.position.set(0, 0, 300);
                scene.add(light);
            }

            function initObject() {
                var geometry = new THREE.CylinderGeometry(100, 150, 400);
                var material = new THREE.MeshLambertMaterial({ color: 0x33FF33 });
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                animation();
            }
            function animation() {
                camera.position.x = camera.position.x + 1;
                if (camera.position.x > width-400) camera.position.x = 0;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }
        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

这里写图片描述

CylinderGeometry函数说明

  • radiusTop: 柱体顶部半径
  • radiusBottom：柱体底部半径
  • height：柱体高度
  • radiusSegments：圆周分段，数字越高柱体越圆滑
  • heightSegments：高度分段，与上类似
  • openEnded：是否显示顶盖和底板
  • theraStart, thetaLength：暂不清楚

改变物体坐标，让物体动起来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer,width,height;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);
                light.position.set(0, 0, 300);
                scene.add(light);
            }

            var mesh; //mesh就是要移动的物体
            function initObject() {
                var geometry = new THREE.CylinderGeometry(100, 150, 400);
                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
                mesh = new THREE.Mesh(geometry, material);
                mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                animation();

            }
            function animation() {
                mesh.position.x -= 1;
                console.log(mesh.position.x);
                if (mesh.position.x < -(width - 400)) mesh.position.x = 0;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

这里写图片描述

评估程序性能

帧数

定义：图形处理器每秒能刷新多少次
单位：fps(Frames Per Second)

当物体在快速运动时，当人眼所看到影像消失后，人眼仍能继续保留其影像1/24左右的图像，称为视觉暂留现象。一帧一帧的图像进入人脑，人脑将会将这些图像连接起来，形成动画。
帧数越高，画面感觉越流畅。大多数游戏FPS超过30.

添加性能监视器Stats

https://github.com/mrdoob/stats.js
可以看到Three.js的性能监视器。
性能监视器：

FPS监视器

这里写图片描述
FPS : 上一秒的帧数，越大越好，一般为60左右

点击它，会显示：

MS监视器

这里写图片描述

MS 表示渲染一帧需要的毫秒数，越小越好。

MB监视器

这里写图片描述
占用内存多少M字节。启动谷歌浏览器时，使用

--enable-precise-memory-info

CUSTOM监视器

这里写图片描述
支持用户自定义的panel

使用Stats

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {
    stats.begin();
    // monitored code goes here
    stats.end();
    requestAnimationFrame( animate );
}

requestAnimationFrame( animate );

完整示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <script src="js/stats.min.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer, width, height;
            var stats;

            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);

                 stats = new Stats();
                stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
                document.body.appendChild(stats.dom);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);
                light.position.set(0, 0, 300);
                scene.add(light);
            }

            var mesh;
            function initObject() {
                var geometry = new THREE.CylinderGeometry(100, 150, 400);
                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
                mesh = new THREE.Mesh(geometry, material);
                mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                animation();

            }
            function animation() {
                stats.begin();
                mesh.position.x -= 1;
                console.log(mesh.position.x);
                if (mesh.position.x < -(width - 400)) mesh.position.x = 0;
                renderer.render(scene, camera);
                stats.end();
                requestAnimationFrame(animation);
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

结果：
这里写图片描述

上面代码里的stats.begin和stats.end可以再次封装：

            function animation() {
                mesh.position.x -= 1;
                console.log(mesh.position.x);
                if (mesh.position.x < -(width - 400)) mesh.position.x = 0;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
                stats.update();
            }

stats.update封装了stats.begin/stats.end

使用Tween.js创建动画

https://github.com/sole 下载库文件
使用方法：

构建Tween对象并初始化

function initTween()
{
    new TWEEN.Tween(mesh.position).to( { x: -400 }, 3000 ).repeat( Infinity ).start();
}

构造函数：要改变的值。
to()：接受两个参数，1：集合，存放键值对，x表示mesh.position的x属性， 2：完成动画需要的时间
repeat()：重复几次，Infinity是无穷次
start()：开始动画

实现动画

function animation()
{
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
    TWEEN.update();
}

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="js/three.min.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/Tween.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>
        <script>
            var renderer, width, height;
            var stats;

            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);

                 stats = new Stats();
                stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
                document.body.appendChild(stats.dom);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x: 0,
                    y: 0,
                    z: 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);
                light.position.set(0, 0, 300);
                scene.add(light);
            }

            var mesh;
            function initObject() {
                var geometry = new THREE.CylinderGeometry(100, 150, 400);
                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
                mesh = new THREE.Mesh(geometry, material);
                mesh.position = new THREE.Vector3(0, 0, 0);
                scene.add(mesh);
            }
            function initTween() {
                new TWEEN.Tween(mesh.position).to({ x: -400 }, 3000).repeat(Infinity).start();
            }
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                initTween();
                animation();

            }
            function animation() {
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
                stats.update();
                TWEEN.update();
            }

        </script>
    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>
编程圈子
关注
专栏目录
Three.js的渲染过程
from_the_star的博客
11-02 3997
主要基于WebGLRendere类的render方法开展，需要读者有基本的计算机图形知识，比如计算机图形管线（实时渲染管线）之类的。 在Three.js的渲染中，大概可以分为以下几步： 清空当前帧缓冲区，更新MVP矩阵； 将物体分为透明和不透明两类，按照离摄像机从近到远排序（也可在Object3D单独设置renderOrder）； 根据灯光信息，阴影计算，如果有开启平面裁剪就对进行剪裁； 开始逐个渲染物体，按以下顺序，背景、不透明物体、透明物体； 渲染前后还有两个类似于生命周期的回调函数，scene.on
three.js-demo:演示形式的three.js演示
04-13
标签"JavaScript"表明这个项目是使用JavaScript语言编写的，与three.js相吻合，因为three.js本身就是为JavaScript设计的库，用于处理浏览器端的3D图形渲染。 **文件名分析：** "three.js-demo-main"可能是项目的...
three.js 游戏循环 渲染循环
acoolgiser的博客
12-27 1086
物体运动还有一个关键点，就是要渲染物体运动的每一个过程，让它显示给观众。渲染的时候，我们调用的是渲染器的render() 函数。代码如下： renderer.render( scene, camera ); 如果我们改变了物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能够将新的场景绘制到浏览器中去。不然浏览器是不会自动刷新场景的。 如果不断的改变物体的颜色，那么就需要不...
使用 Three.js 实现 3D 网页动画
最新发布
wangjiahaoaa的博客
08-15 375
通过上述步骤，您已经成功地使用 Three.js 创建了一个简单的 3D 场景，并实现了物体的旋转动画。
Three.js教程：动画渲染循环
ygtu2018的博客
06-19 264
Three.js教程：动画渲染循环
three.js如何实现动画渲染循环
BradenHan的专栏
04-07 659
该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame。动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。是个非零值，没别的意义。
threejs动画播放(暂停、倍速、循环)AnimationAction
u014291990的博客
12-19 1861
设置播放模式为非循环模式的时候，你会发现关键帧动画执行完成一个后，模型回到了关键帧动画开头状态，如果你希望模型停留在关键帧动画结束的状态，可以设置。，做了整体介绍，下面进一步介绍关键帧动画播放的知识，比如关键帧动画停止播放、暂停播放、倍速播放…对象的功能就是用来控制如何播放关键帧动画，比如是否播放、几倍速播放、是否循环播放、是否暂停播放…方法，动画会停止，并结束，模型回到动画开始状态,注意不是暂停，是动画彻底终止，回到初始状态。默认值false，动画正常执行，如果你想暂停正在执行的动画可以把。
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
7. **动画循环**：使用requestAnimationFrame实现动画循环，更新相机视角，让全景图随用户的滚动或触摸移动。 ```javascript function animate() { requestAnimationFrame(animate); // 更新相机视角，例如跟随...
Three.JS_LiquidSeeksItsOwnLevel:使用THREE.JS和PIE库制作的有关液位寻找特性的交互式动画教学
05-18
在本项目"Three.JS_LiquidSeeksItsOwnLevel"中，开发者利用THREE.JS这一强大的JavaScript 3D库，结合PIE库，创建了一个关于液体如何寻找自己水平面的交互式动画教学。这个教程旨在帮助用户理解液体物理学中的基本...
three.js符号线动画
04-23
在本文中，我们将深入探讨如何使用three.js库创建符号线动画。three.js是一个基于WebGL的JavaScript库，用于在浏览器中构建3D图形。通过利用这个库，开发者能够实现复杂的3D场景，包括动态和交互式的线动画效果。 ...
基于threejs的交互例子动画特效
12-12
这是基于threejs的交互例子动画特效。该特效通过three.js制作粒子合成图像效果，点击图像时可以切换到下一幅图像，效果非常炫酷。
基于three.js的超酷线条动画特效
12-12
这是一款基于three.js的超酷线条动画特效。该特效使用THREE.MeshLine库来制作WebGL线条动画特效，共有5个示例效果。
基于three.js的炫酷Canvas 3D线条动画特效
12-12
html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。该3D线条动画特效可以用鼠标进行互动，canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner，效果会非常的酷。
Three.js——使用tween.js 完成连续动画
这是个问题
11-17 2111
引入tween.js import TWEEN from '@tweenjs/tween.js' 使用 //先给定初始值 对象内属性的个数不限 let coords = {x: 0, y: 0, z: 0} let tw = new TWEEN.Tween(coords) .to({x: 3, y: 3, z: 3}, 2000) //最终值 .easing(TWEEN.Easing.Linear.None) //变化方.
【 three.js-03 】.多方式渲染
weixin_64461654的博客
10-26 152
多方式渲染three.js模型
three.js提升渲染效果
NOSaac的博客
08-09 634
通常我们都希望渲染出更逼真的效果，有许多技术来改善模型在 Three.js 中渲染后的外观。但请注意，其中一些技术可能会影响性能，而某些技术则取决于您的模型。你必须根据情况进行调整。本文部分内容为Three.js Journey课程的学习笔记这里将采用使用了纹理、法线贴图等的逼真的模型。我们将使用 GLTF 示例模型存储库（）中的飞行头盔（
Three.js——创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
HuoZhiyan 的博客
03-31 1072
本文我们初步认识 three.js，并学习如何创建场景、渲染三维对象、添加灯光、添加阴影及添加雾化等...
场景执行渲染循环的步骤
weixin_30568591的博客
12-16 88
转载于:https://www.cnblogs.com/changxs/p/3477681.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程圈子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值