<!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. 【MonogDB】The description of index(二) Embedded and document Index

    In this blog, we will talk about another the index which was called "The embedded ". First ...

  2. AngularJs使用过程中，在ng-repeat中使用track by

    1.问题描述: 点击删除后:table中的被选中设备确实被删除了,但是data-table并没有重新加载出来, 查看js代码: 先对$scope.data_table进行了destroy(),然后重新 ...

  3. Java 实现文件随机读写-RandomAccessFile

    现有如下的一个需求,向已存在1G数据的txt文本里末尾追加一行文字,内容如下“Lucene是一款非常优秀的全文检索库”.可能大多数朋友会觉得这个需求很easy,说实话,确实easy,然后XXX君开始实 ...

  4. Django：学习笔记(4)——请求与响应

    Django:学习笔记(4)——请求与响应 0.URL路由基础 Web应用中,用户通过不同URL链接访问我们提供的服务,其中首先经过的是一个URL调度器,它类似于SpringBoot中的前端控制器. ...

  5. 官方微信接口（全接口） - 微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.微信支付.微信红包.微信卡券.微信小店. 微信开发探讨群 330393916 <?php /**  * Description o ...

  6. C语言预处理命令之条件编译（#ifdef,#else,#endif,#if等）

    转自:http://www.kuqin.com/language/20090806/66164.html 预处理过程扫描源代码,对其进行初步的转换,产生新的源代码提供给编译器.可见预处理过程先于编译器 ...

  7. Django- 反向生成url

    Django中提供了一个关于URL的映射的解决方案, 1.客户端的浏览器发起一个url请求,Django根据URL解析,把url中的参数捕获,调用相应的试图,获取相应的数据,然后返回给客户端显示 2. ...

  8. html5 canvas js(时钟)

    <!doctype html> <html> <head> <title>canvas</title> </head> < ...

  9. Apache 配置参数

    参数说明 1.Global Environment 全局环境配置,决定Apache服务器的全局参数3.Virtual Hosts—虚拟主机,虚拟主机不能与Main Server主服务器共存,当启用了虚 ...

  10. 响应式Tab选项卡

    在线演示 本地下载