<!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">

    init();

    function  init() {

        var scene = new THREE.Scene();

        var 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渲染器并设置其大小

        var 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 = new THREE.Mesh( geometry, material );

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

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

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

            scene.add( cube );

        }

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

        //渲染场景

        renderer.render(scene, camera);

    }

</script>

</body>

</html>

【three.js练习程序】随机生成100个方块的更多相关文章

  1. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  2. TF：Tensorflow结构简单应用，随机生成100个数，利用Tensorflow训练使其逼近已知线性直线的效率和截距—Jason niu

    import os os.environ[' import tensorflow as tf import numpy as np x_data = np.random.rand(100).astyp ...

  3. 实用的随机数生成类Random：测试（随机产生100个不重复的正整数）

    实用的随机数生成类Random:测试(使用Random类随机生成100个不重复的正整数) 一.之前我们使用随机数用的是Math类的random()方法: tips: 产生随机数(0~9中任意整数)的方 ...

  4. java中随机生成汉字

    main方法中使用: //随机生成100个汉字 String ss=""; for(int i=0;i<100;i++){ ss+=getChinese(i); } Syst ...

  5. js根据条件json生成随机json：randomjson

    前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心: 1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据 2,写数组的时候,如果有很多条,需要一条一条地写, ...

  6. 基于c编写的关于随机生成四则运算的小程序

    基于http://www.cnblogs.com/HAOZHE/p/5276763.html改编写的关于随机生成四则运算的小程序 github源码和工程文件地址:https://github.com/ ...

  7. js 随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的j ...

  8. SQLServer如何快速生成100万条不重复的随机8位数字

    最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1．    如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2．    控制不重复 3．    ...

  9. js随机生成验证码及其颜色

    今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...

随机推荐

  1. Spring4 mvc+maven 框架搭建（1）

    这篇博客其实很早就应该写,早在半年前,因为对SpringMVC感兴趣,便自学了一下Spring.一段时间的学习后,对Spring有了一个基本的了解,于是想着自己动手搭建一个SpringMvc的框架出来 ...

  2. 【从0到1学jQuery】jQuery中each()和$.each()的使用

    引子: 最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作.所以就查看了jQuery关于这个函数的文档,并且总结一下. 演示代码如下: <div& ...

  3. Struts框架核心工作流程与原理

    1.Struts2架构图  这是Struts2官方站点提供的Struts 2 的整体结构.  执行流程图 2.Struts2部分类介绍  这部分从Struts2参考文档中翻译就可以了. ActionM ...

  4. TCP保活的必要性

    TCP的长连接理论上只要连接建立后,就会一直保持着.但有时有一些防火墙之类的软件会自动检查主机的网络连接状况,比如说如果发现某个连接在几分钟之内都没有数据通讯,则会关闭这个连接.有时客户端与服务器需要 ...

  5. 一次完整的HTTP接口请求过程及针对优化

    客户端发起http请求,基本的经历过程如下: 域名解析 -> TCP三次握手 -> 建立TCP连接后发起HTTP请求 -> Nginx反向代理 -> 应用层 -> 服务层 ...

  6. 老司机的应用级监控——spring actuator（转）

    转自:https://www.jianshu.com/p/c043d3c71f47 什么是spring actuator? 这是一个研发老司机与运维同学都会非常喜欢的东西,随着点融集团的扩张,点融网的 ...

  7. 让 markdown 生成带目录的 html 文件

    安装 npm install -g i5ting_toc 用法 进入 markdown 文件所在的文件夹 举个栗子: 你的sample.md文件放在桌面上 cd /Users/dora/Desktop ...

  8. 解决MVC应用程序数据重复加载问题

    先来看看这个动画: 这是使用jQuery来实现数据加载,每点击一次,数据就加载一次.这源程序与实现来自<MVC应用程序JsonResult()的练习>http://www.cnblogs. ...

  9. C++切割文件

    void CFileCutter::DoSplit() { ; //计数 CString strSourceFile = m_strSource; //取得全局变量赋值给局部变量,方便操作 CStri ...

  10. 【Dubbo&&Zookeeper】1、Dubbo与Zookeeper、SpringMVC整合和使用（负载均衡、容错）

    转自:http://blog.csdn.net/congcong68/article/details/41113239 互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架 ...