zoukankan      html  css  js  c++  java
  • 【three.js练习程序】动画效果,100个方块随机运动

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ceshi</title>
        <script type="text/javascript" src="C:UsersasusDesktop	hree.js-master	hree.js-masteruild	hree.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>

  • 相关阅读:
    实战DeviceIoControl 之五:列举已安装的存储设备
    zend server 安装及相关配置
    php中echo 与print 的区别
    PHP:Deprecated: Function set_magic_quotes_runtime() is deprecated 错误
    php与ascii码
    计算EXCEL列名代号的程序
    笔记本电脑键盘不能正常输入字符
    读写注册表
    创建用于监视对student表进行插入和更新操作的触发器
    在客户机上安装Windows服务
  • 原文地址:https://www.cnblogs.com/tiandsp/p/8445874.html
Copyright © 2011-2022 走看看