<!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. ruby 时间 今天 昨天

    today = Time.now.strftime('%Y-%m-%d') yesterday = (Time.now - 1.day).strftime('%Y-%m-%d')

  2. ruby中的可调用对象--方法

    上一篇讲了ruby中的可调用对象proc和lambda,他们都是块转换成的对象.ruby中的可调用对象还有方法.通过使用method方法,并且以方法名作为参数(字符串或者符号),就可以得到一个方法对象 ...

  3. iClap助力移动互联网企业实现规范化管理

    移动互联网的迅速崛起,智能移动客户端深刻而全面地影响着人类生活与工作习惯.而企业办公已从原始的纸张办公,到固定PC办公,跨入到一个应用范围更广.效率更高的移动办公时代.由静生动,让企业办公更加人性化和 ...

  4. Centos上安装python3.5以上版本

    一.准备工作: yum install zlib-devel yum install openssl-devel 二.安装python3.5 wget https://www.python.org/f ...

  5. VS插件神器 ReShaper入门

    @简介: 1,Resharper提供以下6个核心功能,分别是: (1). 代码分析(Code Analysis):智能提示代码中存在的问题和修复建议. (2). 编码助手(Coding Assista ...

  6. 在eclipse中new 对象后怎么通过快捷键自动生成返回对象

    如题,每次new 对象的时候不想手动补全返回对象,可以实现快捷键生成返回对象.new  对象后可以按住ctrl+1,如下图: 选择第一行即可.

  7. 新linux系统上rz 与sz命令不可用

    使用命令进行安装:yum install lrzsz  即可使用

  8. 怎么解决teamviewer检测商业用途无法使用的问题

    https://jingyan.baidu.com/article/d5c4b52be51162da560dc517.html

  9. Python3.x：代理ip刷评分

    Python3.x:代理ip刷评分 声明:仅供为学习材料,不允许用作商业用途: 一,功能: 针对某网站对企业自动刷评分: 网站:https://best.zhaopin.com/ 二,步骤: 1,获取 ...

  10. [Linux 005]——IO重定向

    通常在 Shell 中执行命令的时候,我们会在输入命令的下方看到执行结果,操作系统默认将命令的执行结果输出到显示器上.当然,我们也可以手动的指定输出路径,或者输入路径,这就是 I/O 重定向. 1.标 ...