<!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. phpcms v9模板制作常用代码集合

    phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 ...

  2. win 7 64 安装 tensorflow

    1:安装 python 3.5 2. 安装 pip 3: 安装 tensorflow 4,demo

  3. manager

    S 识别  M 买账 A-安排 R-认同 T-提问识别上级的沟通特点,判断形势,识别沟通的时机摆正自己的角色位置,礼多人不怪,回应情绪做好沟通准备,有策略,安排合适时间听取反馈意见,认同并接纳指导提问 ...

  4. OpenVPN GUI出现CreateProcess错误的解决方法

    问题描述     启动 OpenVPN GUI 时失败,提示“CreateProcess Failed, exe=’X:\XXXXX\OpenVPN\bin\openvpn.exe’ cmdline= ...

  5. 通过Java编码获取String分行字符串的内容

    代码案列: import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IOException ...

  6. 资产证券化（ABS）+ 特殊目的信托（SPV）

    资产证券化是指以基础资产未来所产生的现金流为偿付支持,通过结构化设计进行信用增级,在此基础上发行资产支持证券(Asset-backed Securities, ABS)的过程,通过将有形或者无形资产作 ...

  7. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  8. CSS3 简介

    CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模 ...

  9. linux安全第一周总结——20135227黄晓妍

    实验部分: 我将源代码做了修改,将其中一个数字修改为我学号27 2.在实验楼环境下将其保存为text.c并将其编译,得到text.s 3.将.开头的多余的语句删去了之后,我得到了32位环境的汇编代码 ...

  10. excel省市区三级分类级联

    前言:同事正好需要一个这样的地址类型给用户使用下载模板,改好地址再导入,这样就不会出现地址不匹配问题.所以就自己也整理了一套,以备不时之需. 效果展示: 图一:省级 图二:市级 图三:区级 图四:各乡 ...