<!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 cylinder = createMesh(new THREE.CylinderGeometry(20, 20, 20));

        // 把圆柱体添加到场景中

        scene.add(cylinder);

        // 设置相机的坐标

        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.radiusTop = 20;

            this.radiusBottom = 20;

            this.height = 20;

            this.radialSegments = 8;

            this.heightSegments = 8;

            this.openEnded = false;

            this.redraw = function () {

                // remove the old plane

                scene.remove(cylinder);

                // create a new one

                cylinder = createMesh(new THREE.CylinderGeometry(controls.radiusTop, controls.radiusBottom, controls.height, controls.radialSegments, controls.heightSegments, controls.openEnded));

                // add it to the scene.

                scene.add(cylinder);

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'radiusTop', -40, 40).onChange(controls.redraw);

        gui.add(controls, 'radiusBottom', -40, 40).onChange(controls.redraw);

        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);

        gui.add(controls, 'radialSegments', 1, 20).step(1).onChange(controls.redraw);

        gui.add(controls, 'heightSegments', 1, 20).step(1).onChange(controls.redraw);

        gui.add(controls, 'openEnded').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();

            cylinder.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>

33-THREE.JS 圆柱体的更多相关文章

  1. 33.Node.js 文件系统fs

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node ...

  2. 第33篇 js 常用简单的写法

    1.取整 取整可以使用'~~'相当于Math.floor() ~~1.5=1; 2.判断为空或者undefine时赋一个自定义的值 var obj={a:"111",b:" ...

  3. js实现复制功能

    JS 点击复制Copy 1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl ...

  4. Js 中json简单处理

    Json2.js下载地址 json常用处理 Json字符串 var str = '{"code":10,"msg":"codemsg",&q ...

  5. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  6. JS实现“双色球”

    需求: 双色球玩法简单介绍: “双色球”彩票投注区分为红色球号码区和蓝色球号码区.每注投注号码由6个红色球号码和1个蓝色球号码组成.红色球号码从1--33中选择:蓝色球号码从1--16中选择.程序要求 ...

  7. js一键导出Excel

    HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...

  8. cdn for js library

    https://cdnjs.com/libraries/jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js htt ...

  9. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

随机推荐

  1. [luogu4556]雨天的尾巴

    [luogu4556]雨天的尾巴 luogu 发现是一顿子修改然后再询问,那么把修改树上差分一下再线段树合并 但是... 如果你只有35分... https://www.luogu.org/discu ...

  2. 流畅的python 符合python风格的对象

    对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的标准方式.Python 提供了两种方式. repr() 以便于开发者理解的方式返回对象的字符串表示形式.str() 以便于用户理解 ...

  3. SQL竖表转换成横表统计

    #创建表user_score create table user_score ( name varchar(20), subjects varchar(20), score int ); insert ...

  4. 上手Keras

    Keras的核心数据是“模型”,模型是一种组织网络层的方式.Keras中主要的模型是Sequential模型,Sequential是一系列网络层按顺序构成的栈. Sequential模型如下: fro ...

  5. Android之网络----使用HttpClient发送HTTP请求（通过get方法获取数据）

    [正文] 一.HTTP协议初探: HTTP(Hypertext Transfer Protocol)中文 "超文本传输协议",是一种为分布式,合作式,多媒体信息系统服务,面向应用层 ...

  6. Android开发中string.xml文件的使用

    为什么需要把应用中出现的文字单独存放在string.xml文中呢? 一:是为了国际化,Android建议将在屏幕上显示的文字定义在strings.xml中,如果今后需要进行国际化,比如我们开发的应用本 ...

  7. android学习四---Activity和Intent

    1.android项目资源深入了解 在深入学习android之前,先好好玩玩手机上的应用,大部分程序都有一个图标,点开图标,程序启动,一定时间后,程序会跳转到第一个界面,比如手机QQ,点开图标,会跳出 ...

  8. day4-递归

    递归 特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1) 递归就是在 ...

  9. WinIo简介

    WinIo简介 一日发现SendInput对某程序居然无效,无奈只好开始研究WinIo.上网查了很多资料,发现关于WinIo模拟鼠标键盘的资料很少,有的也只是支言片语讲的不是很详细,而且大部分都是关于 ...

  10. Java面向对象—多态

    概述:同一个事物,在不同的时刻表现出不同的状态. 代码中如何体现: 要有继承, 要有方法重写, 父类引用指向子类对象 多态的成员访问特点 成员变量:编译看左边(父类), 运行看左边 成员方法:编译看左 ...