<!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. Mac 下安装.NET Core 与 CLI

    .NET Foundation:https://github.com/dotnet/home .NET Core:https://github.com/dotnet/coreclr CLI:https ...

  2. jenkins发送邮件失败“No emails were triggered”

    我在Jenkins邮箱配置成功,试发送也成功了以后,发现构建项目还是没有收到邮件 构建日志中提示“No emails were triggered” 检查了一下构建项目的配置,发现Editable E ...

  3. 深入理解.sync修饰符

    原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...

  4. Async异步编程入门示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. C# 连接 sql server

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. SpringBoot学习（二）——Spring的Java配置方式

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 一.@Configuration 和 @Bean Spring的Java配置方式是通过@Configuration和@Bean ...

  7. 我进行jvm内存调优的一些记录

    jvm内存调优的一些记录 java内存调优的方法和过程 可以使用 jmap -heap pid号 查看,例如pid是9300,执行的结果可能是这样的. root@ubuntu:~# jmap -hea ...

  8. MVC应用程序JsonResult()的练习

    这次学习MVC应用程序,尝试使用jQuery的获取数据,并显示于视图上,关键技术还是javascript的一个子集Json.我们先去HomeController写一个方法JsonResult GetJ ...

  9. C＃ 字符串首字符大写

    我找到一些把字符串首字符大写的方法. 假如需要把字符串 "red" 转换为 "Red",把 "red house" 转为 "Red ...

  10. Spring基础(8) ： 延迟加载，Bean的作用域，Bean生命周期

    1.延迟加载 <bean id="p" class="com.Person" lazy-init="true"/> @Confi ...