<!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. php项目代码 编码格式不对会大范围报错

    php项目代码 编码格式不对会大范围报错

  2. Spark高级数据分析· 2数据分析

    wget https://archive.ics.uci.edu/ml/machine-learning-databases/00210/donation.zip 数据清洗 cd /Users/eri ...

  3. JS类、对象、方法、prototype、_proto_

    案例代码: function People(name) { //对象属性 this.name = name; //对象方法 this.Introduce = function() { alert(&q ...

  4. Activiti：创建activiti工程

    Activiti:创建activiti工程 一.Activiti下载: 1,Activiti下载地址:https://github.com/Activiti/Activiti/releases 2,A ...

  5. JavaScript浮点运算，小数点精度

    math.js JavaScript浮点运算,小数点精度 // JavaScript Document //数学函数 // 浮点数加法运算 function floatAdd(arg1, arg2) ...

  6. 20145301 《Java程序设计》第九周学习总结

    20145301 <Java程序设计>第八周学习总结 教材学习内容总结 整合数据库 JDBC JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作 ...

  7. 20145314郑凯杰 《Java程序设计》第2周学习总结 代码开始!

    ---恢复内容开始--- 20145314郑凯杰 <Java程序设计>第2周学习总结 代码开始! 教材学习内容总结 跟着教材的顺序开始总结我学过的内容: 1编辑.编译.运行教材上代码 这部 ...

  8. 解读：MultipleOutputs类

    //MultipleOutputs类用于简化多文件输出The MultipleOutputs class simplifies writing output data to multiple outp ...

  9. 使用ubifs作为根文件系统的openwrt如何在进行sysupgrade时保存旧的配置

    1.openwrt的默认方案(squashfs + jffs2) sysupgrade脚本直接调用default_do_upgrade更新设备树.内核.根文件系统,那么它是如何保存旧配置的呢?请看de ...

  10. Oracle18c创建不带C##的用户

    18c数据库分两种数据库CDB(容器数据库).PDB(可插拔数据库) 数据库安装完成之后,默认是CDB 创建一个用户,必须要用C##开头,但使用PDB没有这个限制 1. 先查看PDB数据库servic ...