<!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. EntityFramework 6 开篇

    本系列文章主要来讲解理解以及怎样使用EntityFramework,写这个系列主要是因为部门里面准备来使用EF,为了让大家一起来学习,我每天发布1-2篇文章让大家一块参与学习.之前一直写在有道云笔记里 ...

  2. 【Q2D】如何导出自定义C++类给框架使用

    本文基于Quick cocos2d x这个游戏框架,为了行文流畅,后面都简称Q2D 导出自定义c++类给项目使用已经有了现成的例子了 详见:http://quick.cocos.org/?p=235 ...

  3. 阿里云ECS服务器磁盘挂载（转）

    买了阿里云的ECS云服务器,本机赠送20GB的磁盘,感觉不够用,又买了一块500GB的磁盘,本文就是记录怎么把这500GB的磁盘挂载上. 检查现在磁盘情况 我们可以看到买的那个500GB的磁盘没有出现 ...

  4. js小工具---本地图片转换为base64编码数据

    今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...

  5. 优秀 H5 案例收集 vol.4（不定期更新）

    重返木叶村 http://hyrz.qq.com/act/a20160113muyecun/index.html 飞越淘宝奇市 https://g.alicdn.com/fdilab/flyover- ...

  6. Python高阶函数（Map、Reduce、Filter）和lambda函数一起使用 ，三剑客

    Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...

  7. [BZOJ3124]直径

    Description 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅有N-1 条边. 路径:一 ...

  8. Spring容器基础ClassPathXmlApplicationContext（一起看源码）

    ApplicationContext相比较于BeanFactory,扩展了很多功能.也就是说前者包含了后者的所有功能.使用前者加载XML的方式:ApplicationContext app=new C ...

  9. jq定时器

    1.$(function(){ setInterval (showTime, 2000); function showTime(){ var today = new Date(); alert(&qu ...

  10. Linux 动态链接库包含静态链接库的方法

    今天老司机们在讨论一个编译问题  A是一个静态库  C是一个动态库  B是运行程序,能不能将A打包到C 然后B只需要链接C 就可以了. 这个问题我以前在出来zlib库版本冲突的时候有点印象,所以写了个 ...