<!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. Shell 流程控制 if while for

    if else if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): if [ $(p ...

  2. [转]让程序不触发 Vista/Win7下应用程序兼容性助手弹出 .

    原文地址 http://blog.csdn.net/maxuhuiabc/article/details/6081874 在Vista/Win7下 运行一个 exe 应用程序后,系统经常弹出 兼容性助 ...

  3. vmware workstation 下安装ubuntu

    安装时我是借鉴 https://blog.csdn.net/xiaohua0877/article/details/78507631 期间遇到几个问题 键盘不好使,解决办法是重新运行wmware wo ...

  4. Selenium3自动化问题一：selenium3在火狐浏览器执行driver.quit()报错2052解决方案

    一:问题说明 最近用到selenium3在火狐浏览器中执行自动化脚本,每次执行到driver.quit()方法总是报错,报错日志如下: 二:解决方案 搜了一圈网上的资料,都说是火狐的问题,于是去到se ...

  5. Java NIO系列教程（十二） Java NIO与IO

    当学习了Java NIO和IO的API后,一个问题马上涌入脑海: 我应该何时使用IO,何时使用NIO呢?在本文中,我会尽量清晰地解析Java NIO和IO的差异.它们的使用场景,以及它们如何影响您的代 ...

  6. Java MongoDB

    package com.dys.mongo; import java.io.IOException; import java.util.ArrayList; import java.util.List ...

  7. UIKit 框架之UIView二

    下面这些都是UIView一些基本的东西,具体的可以参考UIKit 框架之UIView一博客 一.自定义一个View // // MyView.m // UIView // // Created by ...

  8. Spring学习之路-SpringBoot简单入门

    简单讲SpringBoot是对spring和springMVC的二次封装和整合,新添加了一些注解和功能,不算是一个新框架. 学习来源是官方文档,虽然很详细,但是太墨迹了… 地址:https://doc ...

  9. 念念不忘，ASP.NET MVC显示WebForm网页或UserControl控件

    学习与使用ASP.NET MVC这样久,还是对asp.net念念不忘.能否在asp.net mvc去显示aspx或是user control呢?这个灵感(算不上灵感,只能算是想法)是来自前些天有写过一 ...

  10. AutoMapper之自定义解析

    自定义解析 4.自定义解析 AutoMapper可以通过名称匹配等规则进行对象的映射,但是在实际的项目中,只是这样是远远不够的,比说我们需要名称不同的字段进行映射,或者需要再加一些逻辑处理.AutoM ...