<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <script type="text/javascript" src="C:\Users\asus\Desktop\three.js-master\three.js-master\build\three.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- 作为Three.js渲染器输出元素 -->

<div id="WebGL-output">

</div>

<!-- 第一个 Three.js 样例代码 -->

<script type="text/javascript">

    var cube = new Array(100);

    var camera, scene, renderer;

    var id = null;

    init();

    function  init()

    {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(45,

            window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.position.x = 100;

        camera.position.y = 100;

        camera.position.z = 100;

        camera.lookAt(scene.position);

        //创建一个WebGL渲染器并设置其大小

        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE));

        renderer.setSize(window.innerWidth, window.innerHeight);

        var axes = new THREE.AxisHelper(200);

        scene.add(axes);

        for(var i=0;i<100;i++)

        {

            var geometry = new THREE.BoxGeometry( 5, 5, 5 );

            for ( var j = 0; j < geometry.faces.length; j +=2 )

            {

                var hex = Math.random() * 0xffffff;

                geometry.faces[ j ].color.setHex( hex );

                geometry.faces[ j + 1 ].color.setHex( hex );

            }

            var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );

            cube[i] = new THREE.Mesh( geometry, material );

            cube[i].position.x = Math.random()*100-50;

            cube[i].position.y = Math.random()*100-50;

            cube[i].position.z = Math.random()*100-50;

            scene.add( cube[i] );

            id = setInterval(render, 33);

        }

        function render()

        {

            for(var i=0;i<100;i++)

            {

                cube[i].position.x += Math.random()-0.5;

                cube[i].position.y += Math.random()-0.5;

                cube[i].position.z += Math.random()-0.5;

                if(Math.abs(cube[i].position.x)>100)

                    cube[i].position.x=0;

                if(Math.abs(cube[i].position.y)>100)

                    cube[i].position.y=0;

                if(Math.abs(cube[i].position.z)>100)

                    cube[i].position.z=0;

            }

            renderer.render( scene, camera );

        }

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

    }

</script>

</body>

</html>

【three.js练习程序】动画效果，100个方块随机运动的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. two.js之实现动画效果

    一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁 ...

  4. js判断css动画效果是否结束

    <!-- css样式 --> <style> .test{ width: 100px; height: 100px; transition: all 5s; backgroun ...

  5. 通过JS完成电梯动画效果

    实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...

  6. js +1的动画效果

    var fnPlusAnimate = function(str, options){ if (typeof str === 'object') { options = str; str = unde ...

  7. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  8. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. 【Java初探实例篇01】——Java语言基础

    示例系列,将对每节知识辅以实际代码示例,通过代码实际编写,来深入学习和巩固学习的知识点. IDE:intellij IDEA: 语言:Java 本次示例:Java语言基础知识的应用. 创建包day_4 ...

  2. 分享 ： 警惕MySQL运维陷阱：基于MyCat的伪分布式架构

    分布式数据库已经进入了全面快速发展阶段.这种发展是与时俱进的,与人的需求分不开,因为现在信息时代的高速发展,导致数据量和交易量越来越大.这种现象首先导致的就是存储瓶颈,因为MySQL数据库实质上还是一 ...

  3. mysql-unsha1：在未知密码情况下，登录任意MYSQL数据库

    摘要 这个POC用于在不知道明文密码的情况下对启用了密码安全认证插件(默认开启插件:mysql_native_password)的MYSQL数据库进行登录. 前提条件为: 1.为了获取到已知用户的ha ...

  4. JAVA NIO：Buffer.mark()的用法

    在默认情况下,Buffer.mark()并没有什么用处,既不会影响Buffer的遍历,也不会影响Buffer的位置统计函数,如remaining()函数,能影响这些操作的行为只有position(). ...

  5. mysql 主键和唯一索引的区别

    主键是一种约束,唯一索引是一种索引,两者在本质上是不同的. 主键创建后一定包含一个唯一性索引,唯一性索引并不一定就是主键. 唯一性索引列允许空值,而主键列不允许为空值. 主键列在创建时,已经默认为非空 ...

  6. docker（一）

    一.docker 概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 linux 机器上,也可以实现虚拟化.容器是完全使用沙箱 ...

  7. WPF中的Visual Tree和Logical Tree与路由事件

    1.Visual Tree和Logical TreeLogical Tree:逻辑树,WPF中用户界面有一个对象树构建而成,这棵树叫做逻辑树,元素的声明分层结构形成了所谓的逻辑树!!Visual Tr ...

  8. 复刻smartbits的国产网络测试工具minismb-如何添加数据流

    复刻smartbits的国产网络性能测试工具minismb,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数 ...

  9. gulp学习笔记-怎样做一个gulp-demo

    第一步:在文件夹内:鼠标右键+shift  选择提示窗口中的  在此处打开命令窗口  第二步:创建npm的配置文件,在命令窗口中输入 npm init 进行npm的配置 npm init gulp-d ...

  10. jQuery实现DropDownList(MVC)

    今天学点什么呢?想来想去觉得DropDownList还是要加强功力,因为以前写ASP.NET网站时,此功能用的非常之多.在练习之前,先温习一下以前练习的<Html.DropDownListFor ...