1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title></title>
  7.     <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
  8.     <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
  9.     <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             overflow: hidden;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <div id="Stats-output">
  20. </div>
  21. <div id="WebGL-output">
  22. </div>
  23. <script type="text/javascript">
  24.  
  25.     // 初始化
  26.     function init() {
  27.  
  28.         var stats = initStats();
  29.  
  30.         // 创建一个场景
  31.         var scene = new THREE.Scene();
  32.  
  33.         // 创建一个相机
  34.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  35.  
  36.         // 创建一个渲染器
  37.         var webGLRenderer = new THREE.WebGLRenderer();
  38.         webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  39.         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
  40.         webGLRenderer.shadowMapEnabled = true;
  41.  
  42.         var circle = createMesh(new THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2));
  43.         // 把圆形添加到场景中去
  44.         scene.add(circle);
  45.  
  46.         // 设置相机的坐标
  47.         camera.position.x = -20;
  48.         camera.position.y = 30;
  49.         camera.position.z = 40;
  50.         camera.lookAt(new THREE.Vector3(10, 0, 0));
  51.  
  52.         // 添加聚光灯
  53.         var spotLight = new THREE.SpotLight(0xffffff);
  54.         spotLight.position.set(-40, 60, -10);
  55.         scene.add(spotLight);
  56.  
  57.         // 把渲染后的结果放到DOM元素中去
  58.         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
  59.  
  60.         var step = 0;
  61.  
  62.         var controls = new function () {
  63.  
  64.             console.log(circle.children[0].geometry);
  65.             this.radius = 4;
  66.  
  67.             this.thetaStart = 0.3 * Math.PI * 2;
  68.             this.thetaLength = 0.3 * Math.PI * 2;
  69.             this.segments = 10;
  70.  
  71.             this.redraw = function () {
  72.                 // remove the old plane
  73.                 scene.remove(circle);
  74.                 // create a new one
  75.                 circle = createMesh(new THREE.CircleGeometry(controls.radius, controls.segments, controls.thetaStart, controls.thetaLength));
  76.                 // add it to the scene.
  77.                 scene.add(circle);
  78.             };
  79.         };
  80.  
  81.         var gui = new dat.GUI();
  82.         gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
  83.         gui.add(controls, 'segments', 0, 40).onChange(controls.redraw);
  84.         gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);
  85.         gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw);
  86.         render();
  87.  
  88.         function createMesh(geom) {
  89.  
  90.             //  两种材质
  91.             var meshMaterial = new THREE.MeshNormalMaterial();
  92.             meshMaterial.side = THREE.DoubleSide;
  93.             var wireFrameMat = new THREE.MeshBasicMaterial();
  94.             wireFrameMat.wireframe = true;
  95.  
  96.             // 混合材质
  97.             var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
  98.  
  99.             return mesh;
  100.         }
  101.  
  102.         function render() {
  103.             stats.update();
  104.  
  105.             circle.rotation.y = step += 0.01;
  106.             requestAnimationFrame(render);
  107.             webGLRenderer.render(scene, camera);
  108.         }
  109.  
  110.         function initStats() {
  111.  
  112.             var stats = new Stats();
  113.             stats.setMode(0); // 0: fps, 1: ms
  114.             stats.domElement.style.position = 'absolute';
  115.             stats.domElement.style.left = '0px';
  116.             stats.domElement.style.top = '0px';
  117.  
  118.             document.getElementById("Stats-output").appendChild(stats.domElement);
  119.  
  120.             return stats;
  121.         }
  122.     }
  123.     window.onload = init;
  124. </script>
  125. </body>
  126. </html>

　　

28-THREE.JS 扇形圆形的更多相关文章

  1. js绘制圆形时钟

    纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 蒲公英 · JELLY技术周刊 Vol.28: Next.js 10 发布

    蒲公英 · JELLY技术周刊 Vol.28 前端应用到底该选 SSR 还是 CSR?每个项目技术栈决策的时候都会根据实际需求有自己的看法,而在不久前 React 17 发布之后,自然而然也会有同学好 ...

  3. js实现圆形的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 碰撞检测这个东西写小游戏挺有用der~~~ 注释写的还挺全,所以就不多说了,看注释 这是页面结构.wrap存放生成的小 ...

  4. 第28篇 js中let和var

      let与var 在js中声明一个变量除了一个var 还有一个let的声明.对于var 在前面的作用域中已经讲过,这次主要说下二者的区别: 在MDN上有这样的一个demo: var list = d ...

  5. 28.Node.js 函数和匿名函数

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...

  6. 用HTML、CSS、JS制作圆形进度条（无动画效果）

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

  7. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  8. JS小记

    好记性不如烂笔头. 1.document.ElementFromPoint:根据坐标获得元素 2.有时候要操作DOM页面,但是得不到预期结果,很可能是因为页面还没加载完成,在console控制台可以看 ...

  9. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

随机推荐

  1. django-admin详细设置

    Django自带的后台管理是Django明显特色之一,可以让我们快速便捷管理数据.后台管理可以在各个app的admin.py文件中进行控制.以下是我最近摸索总结出比较实用的配置.若你有什么比较好的配置 ...

  2. Linux（4）- centos7安装python3、Linux下安装、配置virtualenv、确保开发环境的一致性、虚拟环境之virtualenvwrapper、vim

    一.centos7安装python3 1.下载python3的源码包 下载地址:https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz cd ...

  3. Android自定义属性：attr.xml 与 TypedArray

    1.attr.xml <?xml version="1.0" encoding="utf-8"?> <resources> <de ...

  4. MyBatis缓存机制-二级缓存

    MyBatis二级缓存是基于namespace级别的缓存. 1.MyBatis的缓存机制整体设计以及二级缓存的工作模式 如上图所示,当开一个会话时,一个SqlSession对象会使用一个Executo ...

  5. 信息安全意识教育日历——By 安全牛

    安全牛:企业即使投入再好的信息安全技术和产品,也难以解决内部威胁以及社会工程等攻击手段,无法做到全面有效地保护企业信息资产.而通过开展员工的信息安全意识培训教育工作,不仅能降低企业风险.满足合规要求, ...

  6. ionic3使用echart插件

    安装 看官方文档可以知道ECharts可以在webpack中使用看这里,故我们可以使用npm下载安装到项目中 npm install echarts --save //下载ECharts npm in ...

  7. 关于\r和\n的区别

    回车和换行来源 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两 ...

  8. PAT 1095 Cars on Campus

    1095 Cars on Campus (30 分) Zhejiang University has 8 campuses and a lot of gates. From each gate we ...

  9. Hadoop源码如何查看

    如何查看hadoop源码 1解压hadoop安装压缩文件成为文件夹,再进入解压后的文件夹下的src文件夹,选中core,hdfs,mapred三个文件夹

  10. Linux主从同步监测和利用sendMail来发邮件

    首先介绍下sendMail About SendEmailSendEmail is a lightweight, command line SMTP email client. If you have ...