添加动画和控制组件（第一个例子）

最新推荐文章于 2022-05-16 00:38:12 发布
最新推荐文章于 2022-05-16 00:38:12 发布
阅读量719 收藏 1
点赞数
分类专栏： Web 3D 文章标签： html 插件 three-js webgl web3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bullzerone/article/details/75208754
版权

这是第一个例子的最后学习.
这次学习会给第一个例子加上动画效果（requestAnimationFrame函数）。还会加入一个FPS监测组件（stats插件），一个简单的控制组件，控制立方体的旋转速度，球体的弹跳速度，通过鼠标来拖动控制组件来调节（dat.GUI库）

》》》》》stats插件
在例子中的HTML文件中，新加入一个ID为Stats-output的DIV，到时FPS监测插件会显示在这个DIV中

<!--构建一个DIV，显示一个FPS监测组件-->
<div id = "Stats-output">

</div>

写一个函数 initStats（）来初始化stats插件，并返回一个stats插件对象

   <!--一个FPS渲染监测插件-->
    function  initStats() {
        var  stats = new  Stats();
        <!--setMode（）参数：0-FPS监测；1-渲染时间监测-->
        stats.setMode(0);
        <!--stats插件位置-->
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        <!--插件加入到ID为Stats-output的DIV之中-->
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

在匿名的JQuery函数中，取得初始化好的stats变量，以备渲染时使用；主要是注意该变量的范围，不然引用不到，别的函数中要引用该变量，所以把该变量放在最开始的匿名的函数中，因为第一个例子中所有的操作都在这个匿名函数中，相当于一个全局的，其他的函数都定义在这个匿名函数中，所以其它任何定义在这个匿名函数中的函数，都可以引用到stats变量

$(function(){
....
var stats = initStats();
......
})

》》》》》》》》》》》》》添加动画：
通过requestAnimationFrame（）你可以指定一个函数，按照浏览器指定的时间间隔进行调用。可以在这个指定函数中执行任何必要的绘画操作，浏览器会尽可能的保证绘画过程的平滑和高效。为了使用这个函数添加动画效果，我们需要再改写一下第一个例子中最后的渲染输出。重新定义一个渲染函数：

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

在重新定义的渲染函数中，requestAnimationFrame（renderScene）又调用了renderScene函数，这样可以保证动画的持续。

在第一个例子的最后渲染时，不直接调用renderer.render（scene，camera）；而是改成调用重新定义的渲染函数。

    ..........
    <!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV-->
    $("#WebGL-output").append(renderer.domElement);
    <!--利用渲染器以给定的相机去渲染场景-->
   // renderer.render(scene,camera);
    renderScene();

如果现在查看，可能看不到动画效果，但是可以看到页面左上角的FPS 监测有变化。

》》》》》dat.GUI控制组件使用：

添加控制组件，对立方体和球体的旋转和弹跳进行控制，添加完之后，可以看到明显的动画效果
首先定义一个JavaScript对象controls，含有2个进行控制的属性rotationSpeed和bouncingSpeed，保存我们希望通过dat.GUI库进行修改的变量。分别初始化为0.02和0.03

    <!--dat.GUI插件加入，简单的页面控制组件-->
    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03
    };

把定义的这2个属性rotationSpeed和bouncingSpeed加入到dat.GUI对象：

    <!--构建一个dat.GUI插件对象，并加入相应的控制组件-->
    var gui  = new dat.GUI();
    gui.add(controls,'rotationSpeed',0,0.5);
    gui.add(controls,'bouncingSpeed',0,0.5);

gui.add（）函数的最后2个参数，指定变量控制的范围：0~0.5；[0，0.5]

定义一个全局的变量step，定义在最开始的匿名函数中，之后在定义的渲染函数中添加必要的控制操作：

    var step = 0;
    function renderScene() {
        stats.update();

        cube.rotation.x += controls.rotationSpeed;
        cube.rotation.y += controls.rotationSpeed;
        cube.rotation.z += controls.rotationSpeed;

        step += controls.bouncingSpeed;
        sphere.position.x = 20 + (10*(Math.cos(step)));
        sphere.position.y = 2+(10*Math.abs(Math.sin(step)));


        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }

完整页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js  第一章学习</title>
<!--需要的基本JS库-->
    <script src="jquery19.js"></script>
    <script src="three.js"></script>
    <script src ="stats.js"></script>
    <script src = "dat.gui.js"></script>
    <script src = "controlKit.js"></script>
    <!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--建立一个DIV，WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">

</div>

<!--构建一个DIV，显示一个FPS监测组件-->
<div id = "Stats-output">

</div>


<!--定义一个JQuery函数，所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
    <!--构建场景-->
    var  scene = new THREE.Scene();
    <!--建立相机，查看场景,透视相机-->
    var  camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    <!--构建渲染器，进行渲染-->
    var  renderer = new THREE.WebGLRenderer();
    <!--渲染背景色,不知道为什么在此学习过程中，该函数setClearColorHex()老是提示错误？-->
   // renderer.setClearColorHex(0xEEEEEE);
    renderer.setClearColor(0xAAFFCC);
    <!--渲染尺寸-->
    renderer.setSize(window.innerWidth,window.innerHeight);

    <!--告诉渲染器需要渲染出阴影-->
    renderer.shadowMapEnabled = true;


    <!--添加一个辅助坐标轴-->
    var  axes  = new THREE.AxisHelper(20);
    scene.add(axes);

    <!--构建一个平面，物体将会放置在这个平面上-->
    <!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面-->
    var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
    <!--平面材质,仅仅指定颜色 0xcccccc-->
  //  var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});

    <!--临时修改材质为MeshLambertMaterial-->
    var  planeMaterial = new THREE.MeshLambertMaterial({color:0xFFFFFF});

    <!--有尺寸和材质构建一个平面-->
    var  plane = new THREE.Mesh(planeGeometry,planeMaterial);
    <!--把平面选择-90°，方便观察-->
    plane.rotation.x = -0.5*Math.PI;
    <!--指定平面的位置-->
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    <!--指定平面接受阴影，就是物体投射出的阴影会出现在该平面上-->
    plane.receiveShadow = true;

    <!--把平面加入到场景中-->
    scene.add(plane);
    <!--建立物体，一个立方体，一个球体-->
    <!--建立一个立方体-->
    <!--指定立方体的几何尺寸，长宽高，不包括位置-->
    var  cubeGeometry = new THREE.CubeGeometry(4,4,4);
    <!--指定立方体的材质，仅仅指定颜色：0xFF0000，是否使用线框模式显示：是-->
   // var  cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
    <!--临时修改材质为MeshLambertMaterial-->
    var  cubeMaterial = new THREE.MeshLambertMaterial({color:0xFF0000});
    <!--以给定的几何尺寸和材质构建一个立方体-->
    var  cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
    <!--指定立方体的具体位置xyz-->
    cube.position.x =-4;
    cube.position.y =3;
    cube.position.z = 0;

    <!--指出物体会投射阴影-->
    cube.castShadow = true;

    <!--把建立的立方体放入场景-->
     scene.add(cube);

    <!--建立一个球体sphere-->
    <!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度-->
    var  sphereGeometry = new THREE.SphereGeometry(4,50,50);
    <!--指定球体材质，仅仅指定颜色：0xFF0000，是否以线框形式显示：是-->
   // var  sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});

    <!--临时修改材质为MeshLambertMaterial-->
    var  sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777FF});

    <!--以给定的几何尺寸和材质，建立一个球体-->
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    <!--指定球体的位置 X Y Z-->
    sphere.position.x =20;
    sphere.position.y=4;
    sphere.position.z = 2;

    <!--指出物体会投射阴影-->
    sphere.castShadow = true;

    <!--把建立的球体加入到场景中-->
    scene.add(sphere);


    <!--建立一个聚光灯变量，用来照射物体来产生阴影-->
    <!--建立一个spotLight变量，指定颜色：0xFFFFFF-->
    var  spotLight = new THREE.SpotLight(0xFFFFFF);
    <!--指定spotLight的位置-->
    spotLight.position.set(-40,60,-10);

    <!--指出此光源照射物体，使物体产生阴影-->
    spotLight.castShadow = true;

    <!--把spotLight加入到场景中-->
    scene.add(spotLight);


    <!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么-->
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    <!--动画：requestAnimationFrame（）-->


    <!--一个FPS渲染监测插件-->
    function  initStats() {
        var  stats = new  Stats();
        <!--setMode（）参数：0-FPS监测；1-渲染时间监测-->
        stats.setMode(0);
        <!--stats插件位置-->
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        <!--插件加入到ID为Stats-output的DIV之中-->
        $("#Stats-output").append(stats.domElement);
        return stats;
    }
    var stats = initStats();


    <!--dat.GUI插件加入，简单的页面控制组件-->
    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03
    };
    <!--构建一个dat.GUI插件对象，并加入相应的控制组件-->
    var gui  = new dat.GUI();
    gui.add(controls,'rotationSpeed',0,0.5);
    gui.add(controls,'bouncingSpeed',0,0.5);

    var step = 0;
    function renderScene() {
        stats.update();

        cube.rotation.x += controls.rotationSpeed;
        cube.rotation.y += controls.rotationSpeed;
        cube.rotation.z += controls.rotationSpeed;

        step += controls.bouncingSpeed;
        sphere.position.x = 20 + (10*(Math.cos(step)));
        sphere.position.y = 2+(10*Math.abs(Math.sin(step)));


        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }



    <!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV-->
    $("#WebGL-output").append(renderer.domElement);
    <!--利用渲染器以给定的相机去渲染场景-->
   // renderer.render(scene,camera);
    renderScene();
})    ;
</script>


</body>
</html>

整个页面效果：
这里写图片描述

动画效果：
这里写图片描述

bullzerone
关注
专栏目录
Unity3d iGUI 运行时添加动画组件
HDS--By
10-31 1418
iGUI插件似乎国人都不使用该插件，或许是太简单了。相对于NGUI个人感觉还是挺不错的！我们来看看老外们 使用iGUI的案例吧： ok!我们进入主题: 我们在游戏开发中呢，难免会使用动画效果。当然iGUI内置的动画系统可以让我们进行拖拽组件实现，有的时候 我们也希望通过代码在运行时添加动画效果。这样做的好处是不言而喻的！ 琢磨一番，我们可以使用如下的代码实现这样的效果：
使用Animation组件制作动画的具体流程
起个名字好难啊
09-17 3575
动画制作流程：   1：如何搭配环境   a：导入NGUI包后，按Ctrl+S保存场景，在菜单栏显示NGUI菜单；   b：选择NGUI——Create——Sprite后，在场景中创建NGUI界面，并在上面出现一个Sprite组件；     c：选择Sprite，选择图集（Atlas）后,在上面添加一张图片，     4：设置Sprite中Size的宽度与Game视图分辨率的宽
Three.js中显示坐标轴、平面、球体、四方体
BADAO_LIUMANG_QIZHI的博客
07-27 2872
场景 Three.js入门和搭建HelloWorld： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119149625 在上面已经能实现显示坐标轴和球体的基础上。 怎样显示立方体和平面。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 创建坐标轴对象并添加进场景 /...
鼠标跟随svg尾巴js特效
ICode联盟
05-16 404
下载地址 鼠标移动带尾巴的svg特效，炫酷发光的鼠标跟随特效。 dd:
动画组件和动画控制器资源介绍、动画状态机
weixin_33913377的博客
01-08 202
一、动画控制器资源：Create-Animator Control 相当于一个容器。 窗口包括：a、Base Layer层窗口：控制角色身体中各部分的运动，这个离不开Body Mask。b、Parameters参数窗口：Vector、Float、Int、Bool最主要的功能：就是在其中可以设置动画逻辑，而在设置动画逻辑时使用MecAnim新的动画状态机来处理动画的逻辑。   二、Anim...
视图控制器（动画版）.zipIOS应用例子源码下载
03-06
在iOS应用开发中，视图控制器（UIViewController）是构建用户界面的核心组件，它负责管理屏幕上的内容和交互。本示例代码着重展示了视图控制器与动画的结合，这对于提升用户体验和增强应用视觉效果至关重要。以下是...
reactnative的一个添加购物车动画效果控件
08-11
在这个例子中，我们创建了一个`Animated.ValueXY`来管理X和Y轴的动画，然后在`handlePress`事件中使用`Animated.spring`实现物品滑入购物车的动画。请注意，这只是一个基础示例，实际项目可能需要更复杂的设计和交互...
日历组件.zipIOS应用例子源码下载
03-06
在iOS应用开发中，日历组件是一个至关重要的部分，它允许用户查看、管理以及规划他们的日期和事件。这个“日历组件.zip”压缩包提供了一个实际的iOS应用示例源码，非常适合那些想要深入理解如何在Swift中实现日历...
一个ReactNative登录动画的例子
08-10
总之，这个React Native登录动画示例将展示如何结合React组件、状态管理、动画库和事件处理来构建一个互动性良好的移动应用界面。通过学习和实践这个例子，开发者可以提升在混合移动开发中的技能，特别是在...
vue实现动画，点击实现隐藏显示
04-11
此外，Vue还提供了一些内置的动画组件，如`<carousel>`和`<collapse>`，可以直接使用。 5. **第三方动画库**： 当Vue的内置过渡系统不能满足需求时，可以结合使用像Animate.css、Velocity.js或GreenSock (GSAP) 等...
Unity动画控制组件UIPlayTween
yangyongUestc的博客
05-04 1955
NGUI中有Tween动画组件为什么还需要使用UIPlayTween? 首先Tween不能满足游戏场景的实际需求，Tween设置比较简单但是存在一些使用的问题。例如： 1. Tween动画在场景启动之后会直接进行播放，不能根据实际需求进行控制。 2. 当需要对Tween动画进行事件关联的时候，Tween动画无法满足要求。 鉴于上面的很多缺点，Tween动画很少单独使用，大部分情况下都是配合
29vue学习——为组件切换添加动画效果
weixin_42530160的博客
08-05 2028
在前面的两篇文章中我们学习了如何通过 v-if 和 v-else 来实现两个组件之间的切换，通过 component 元素实现两个以上的组件的切换，但是我们还没有给他们的切换添加好看的动画效果呢！这篇文章就让我们来学习如何给组件切换添加动画效果吧！
Unity动画、动画控制器、blend tree（一）
12-12 2375
导入动画资源？
Unity3D -- 自动生成动画控制器（AnimationController）
阳仔博客
12-05 8743
上一篇搞定了自动生成动画，这一篇来试试动画控制器（AnimationController） 代码大部分来自于官方代码。using System.Collections; using UnityEditor.Animations; using UnityEngine; using UnityEditor;public class CreateAnimatorController : Editor {
16 使用requestAnimationFrame()方法制作WebGL简单动画
现在学习也不晚
05-17 3092
案例查看地址：点击这里&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
d3实现流星拖尾效果
weixin_30588827的博客
08-03 1459
本文主要就是利用d3js去实现一些动态效果，包括路径的渲染过程，节点的呼吸灯效果等等，本次主要是实现流星的拖尾效果。 假设页面上有两个圆点坐标分别为（100，100），（400，400） <script src="//d3js.org/d3.v4.min.js"></script> 1 var data = [{x:100,y:100},{x:400,y:40...
使用Three.js创建第一个三维场景（下）
weixin_43619303的博客
02-15 315
本文案例代码：链接：https://pan.baidu.com/s/1ZkttHSD74vEWEI0likcsew取码：y150 学习书籍：Three.js开发指南(第3版) 使用光照、阴影、材质和动画美化场景,并给场景添加辅助库 一、美化第一个三维场景 1.代码整理 在美化昨天的项目之前，首先对项目进行整理。在昨天的基础上更改js文件 01-03.js function init() { //首先定义场景（scene)、摄像机（camera）和渲染器（renderer）对象。 var scene
简单实现svg的拖拽和缩放
热门推荐
如雨随行的博客
07-20 1万+
前提 此方法限制太多，可能 svg使用d3绘制，并且抽象出svg中所有元素的一个参照点和缩放比例 svg元素不会太多，否则会造成卡顿。 引入 最近有个项目需要我帮一下前端，主要是使用d3绘制svg放在页面，其中有一个功能就是对绘制的svg进行拖动和缩放，有点像地图。 这里我已经写好了一个方法来绘制svg function drawTopo(svg, data, x, y, svgA, radio)...
给View控件添加动画效果
谢栋的专栏
03-06 2434
简单实现下动画的操作过程，具体动画样式根据项目需要自行更改 首先先在anim文件夹下新建动画资源文件（anim文件夹布存在需自行创建）   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;set xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;s...
React组件过渡动画实现与最佳实践
3. TransitionGroup：TransitionGroup可以包裹多个动画组件，特别适合在处理列表元素的动态添加、删除或更新时，为每个元素添加过渡效果。 以下是一个使用CSSTransition的简单示例： ```jsx import React from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值