美文网首页
5.让游戏场景动起来

5.让游戏场景动起来

作者: kingder | 来源:发表于2017-08-17 13:16 被阅读34次

运动起来的两种方式

方式介绍

  1. 让物体运动
  2. 让摄像机运动

游戏循环:
如果不进行游戏循环进行重复的渲染即使物体运动了,我们看到的场景也不会发生改变

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

stats.js可以用来监控three.js的运行状态

states.js

使用方法:

var stats = new Stats();
stats.setMode( 1 ); // 0: fps, 1: ms, 2: mb

stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

var update = function () {

    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame( update );

};
requestAnimationFrame( update );

Tween渐变动画包使用方法

//首先进行初始化
function initTween(){
    new TWEEN.Tween(camera.position).to({x:400,3000}).repeat(Infinity).start();
}

//在游戏循环中进行update
TWEEN.updata();

一个示例程序

绿色旋转小方块源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转的正方体</title>
    <script src="three.js"></script>
</head>

<body>
    <script>
        var scene = new THREE.Scene(); // 场景
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 透视相机
        var renderer = new THREE.WebGLRenderer(); // 渲染器
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement); //将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。


        var geometry = new THREE.CubeGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;

        function render() {
            requestAnimationFrame(render); //循环调用实现
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            cube.rotation.z+=0.1;
            cube.position.z+=0.01;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

</html>

学习的资料和源码我都共享到我的gitHub仓库中去了,大家有兴趣的可以去下载,欢迎foke,clone,加星星,也算是对我的一个鼓励吧

three学习资料的github地址
或者复制链接地址到浏览器
https://github.com/kingder-c/LearnThree.js

里面除了源码和笔记之外再document中还有我推荐的两本教材的电子书,希望能帮助到大家
如果大家有更好的学习资料一欢迎提交的上面去供大家一起交流和学习,对大家发出的PR我一定及时接受

相关文章

  • 5.让游戏场景动起来

    运动起来的两种方式 方式介绍 让物体运动 让摄像机运动 游戏循环:如果不进行游戏循环进行重复的渲染即使物体运动了,...

  • Unity动画系统详解1:在Unity中如何制作动画?

    摘要:在场景中加入动态的物体,可以让整个场景更加生动、真实。Unity场景中的物体可以通过制作动画,让物体动起来。...

  • 课堂游戏与活动:其他游戏与活动集锦

    (摘自《语言与儿童》第十三章【让语言生动起来】) 常规游戏 接力游戏 看手势猜字谜游戏 拼单词游戏 刽子手游戏 神...

  • python-第十九课-游戏入门篇-飞行汽车

    A.课程内容 本节课我们将学习pygame模块中的创建游戏窗口、加入游戏角色、让游戏角色动起来以及控制游戏角色运动...

  • 幸福十要素

    1.信任; 2.享受生活的简单乐趣; 3.让身体动起来; 4.重视美学; 5.简化你的选择; ...

  • 5.游戏

    游戏一般都有道具、游戏场地和游戏规则。玩游戏时,是在一段时间内,选择合适的场地,使用道具,在相同的游戏规则限定的框...

  • 自习室的成长日记(二)

    自习室又一次新尝试 游戏之前一直想玩 但没动起来 今天力量来了 松柏带着我们 玩了两轮 不同场景狼人杀 两场游戏下...

  • 课堂游戏与活动:创新型游戏与活动

    (摘自《语言与儿童》第十三章【让语言生动起来】) 人对人游戏 遵守以下简单的规则: 1、首先确定好游戏的节奏,让学...

  • PhiloGL学习(3)——程序员的法宝—键盘、鼠标

    前言 上一篇文章中介绍了如何让对象动起来,本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动...

  • 投影游戏,让你的身体运动起来!

    投影互动游戏是指利用投影进行互动游戏的一种游戏方式,让自己的身体充分运动起来与投影画面进行游戏互动。 现在的年轻人...

网友评论

      本文标题:5.让游戏场景动起来

      本文链接:https://www.haomeiwen.com/subject/ytggrxtx.html