<!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. 单点登录--CAS认证--web.xml配置详解

    参考网址: https://blog.csdn.net/zhurhyme/article/details/29349543 https://blog.csdn.net/shzy1988/article ...

  2. Flexbox指南

    Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定.调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的.(这里我们称为Flex). Flex布局主要思想是让 ...

  3. php -- 连接Mysql 数据库

    ----- 022-mysql.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. 微信小程序——动态渲染页面、路径传参

      1.动态渲染页面.改变css.样式必须setData渲染过去   this.setData({ userInfo: app.globalData.userInfo, token: app.glob ...

  5. Maven3路程（一）环境搭建

    好长时间不用Java,今天看了下,Maven集成成主流了,在技术水平与日俱进的同时,感叹下IT行业必须有活到老学到老的精神. 先说下环境: Maven:Maven 3.0.5 解压后路径:F:\Mav ...

  6. postman环境变量 全局变量清理

    一:主要内容 清除一个环境变量.全局变量 清除全部环境变量.全局变量 清除部分环境变量.全局变量 二:清除一个指定环境变量.全局变量 1. 清除一个环境变量,如清除用户名环境变量,username为变 ...

  7. 行为型设计模式之模板方法(TEMPLATE METHOD)模式 ，策略（Strategy ）模式

    1 模板方法(TEMPLATE METHOD)模式: 模板方法模式把我们不知道具体实现的步聚封装成抽象方法,提供一些按正确顺序调用它们的具体方法(这些具体方法统称为模板方法),这样构成一个抽象基类.子 ...

  8. C#使用命令编译代码

    1.在路径%SystemRoot%\Microsoft.NET\Framework\vX.X.X(安装的.net版本号)下找到csc.exe,在cmd窗口cd到该路径下. ps(在该路径下有一个CSC ...

  9. 【原】Solr入门之概念和安装

    Apache Solr 是Apache Lucene项目的开源企业搜索平台.其主要功能包括全文检索.命中标示.分面搜索.动态聚类.数据库集成,以及富文本(如Word.PDF)的处理.Solr是高度可扩 ...

  10. java 跨域-利用jsonp

    Tomcat在 7.0.73, 8.0.39, 8.5.7 版本之前的可以用,不然后台报错 /** * 前端首页跳转后台 */ @RequestMapping("WebIndex.get&q ...