<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 创建一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建一个渲染器

        var webGLRenderer = new THREE.WebGLRenderer();

        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        webGLRenderer.shadowMapEnabled = true;

        var polyhedron = createMesh(new THREE.IcosahedronGeometry(10, 0));

        // 创建一个多面体

        scene.add(polyhedron);

        // 设置照相机的位置和朝向

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 50;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 把渲染之后的结果放到DOM元素中去

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

        var step = 0;

        var controls = new function () {

            this.radius = 10;

            this.detail = 0;

            this.type = 'Icosahedron';

            this.redraw = function () {

                // remove the old plane

                scene.remove(polyhedron);

                // create a new one

                switch (controls.type) {

                    case 'Icosahedron':

                        polyhedron = createMesh(new THREE.IcosahedronGeometry(controls.radius, controls.detail));

                        break;

                    case 'Tetrahedron':

                        polyhedron = createMesh(new THREE.TetrahedronGeometry(controls.radius, controls.detail));

                        break;

                    case 'Octahedron':

                        polyhedron = createMesh(new THREE.OctahedronGeometry(controls.radius, controls.detail));

                        break;

                    case 'Dodecahedron':

                        polyhedron = createMesh(new THREE.DodecahedronGeometry(controls.radius, controls.detail));

                        break;

                    case 'Custom':

                        var vertices = [

                            1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1

                        ];

                        var indices = [

                            2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1

                        ];

                        polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, indices, controls.radius, controls.detail));

                        break;

                }

                // 把它添加到场景中去

                scene.add(polyhedron);

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'radius', 0, 40).step(1).onChange(controls.redraw);

        gui.add(controls, 'detail', 0, 3).step(1).onChange(controls.redraw);

        gui.add(controls, 'type', ['Icosahedron', 'Tetrahedron', 'Octahedron', 'Dodecahedron', 'Custom']).onChange(controls.redraw);

        render();

        function createMesh(geom) {

            // 申请两种材料

            var meshMaterial = new THREE.MeshNormalMaterial();

            meshMaterial.side = THREE.DoubleSide;

            var wireFrameMat = new THREE.MeshBasicMaterial();

            wireFrameMat.wireframe = true;

            // 创建混合材料

            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;

        }

        function render() {

            stats.update();

            polyhedron.rotation.y = step += 0.01;

            requestAnimationFrame(render);

            webGLRenderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init;

</script>

</body>

</html>

　　

35-THREE.JS 多面体的更多相关文章

  1. 35.Node.js GET/POST请求

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交. 表单提交到服务器 ...

  2. JS学习之路，菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

  3. js去除空格12种方法

    注:本文非本人原著:原文作者: 黄卉  <js去除空格12种方法> //JS去除空格的方法目前共有12种: //实现1 String.prototype.trim = function() ...

  4. 进阶攻略|最全的前端开源JS框架和库

    新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...

  5. jQuery元宵猜灯谜特效(元宵十五日猜一个字)

    在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...

  6. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

  7. IDF 实验室部分题目WriteUp

    前天花了一个下午的时间刷了几道IDF实验室的题目, 这个网站实在是有点冷清, 题目也比较少, 所以就被我和师兄们刷榜了2333... 因为我最先开始做, 所以就干脆刷到第一去了. 题目很水, 切莫见怪 ...

  8. Web前端开发必备

    前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...

  9. javascript总结集合

    前言:下面的总结都是自己测试过的,绝大多数都是没问题的,但是不敢保证一定全面,还需要诸君自己独立思考: 1)基础:在nodejs里全局对象是global,而网页里js的全局对象是window:对于所有 ...

随机推荐

  1. 从硬件到语言，详解C++的内存对齐（memory alignment）

    转载请保留以下声明 作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9099603.html 很多写C/C++的人都知道“内存对齐”的概念以及规则 ...

  2. URAL - 1091 Tmutarakan Exams (简单容斥原理)

    题意:K个不同数组成的集合,每个数都不超过S且它们的gcd>1.求这样的数的个数 分析:从2开始枚举gcd,但这样会发生重复.譬如,枚举gcd=2的集合个数和gcd=3的集合个数,枚举6的时候就 ...

  3. HBuilder 详细使用方法 -------------参考 ：http://www.runoob.com/w3cnote/hbuilder-intro.html

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于Ecl ...

  4. C#打开文件资源管理器

    需求: 需要打开windows的文件资源管理器进行浏览文件. 方法: 利用命令提示符(cmd)中输入explorer.exe命令即可打开文件资源管理器 代码实现: 1.引用 using System. ...

  5. [简明版] 有道云笔记Markdown指南

    使用有道词典配合Markdown,可以快速准确做出美观精致的笔记,下面我们来看一下如何使用有道词典的MarkDown功能. 什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程 ...

  6. Python面试题之Python生成器

    首先说明一下生成器也是迭代器,也有迭代器的那些优点. 那为什么要生成器呢?因为到目前为止都 不是你写的迭代器,都是别人定义好的.那如何自己去造一个迭代器呢?下面的内容就会给你答案. 想要自己造一个迭代 ...

  7. 20145215《Java程序设计》第二周学习总结

    教材内容总结 类型.变量与运算符 *基本类型 整数(short.int.long) 字节(byte) 浮点数(float/double) 字符(char)将一个数字字母或者符号用单引号标识,字符串用双 ...

  8. 20145321 《Java程序设计》第7周学习总结

    20145321 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1 认识时间与日期 1.格林威治时间(GMT) 观察太阳得来 2.世界时(UT) 3.国 ...

  9. java第一周学习总结

    学号20145336 <Java程序设计>第1周学习总结 教材学习内容总结 java是sun推出的一门高级编程语言,现已经成为web开发的首选语言.他分为三种技术架构,j2ee针对web应 ...

  10. ubuntu文字界面与图形界面切换

    redhat: (据说是) 图形界面->文字界面:crtl+alt+F1~6 文字界面->图形界面:crtl+alt+F7 -------------------------------- ...