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.     <style>
  10.         body {
  11.             margin: 0;
  12.             overflow: hidden;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18. <div id="Stats-output">
  19. </div>
  20. <div id="WebGL-output">
  21. </div>
  22. <script type="text/javascript">
  23.  
  24.     // 初始化
  25.     function init() {
  26.  
  27.         var stats = initStats();
  28.  
  29.         // 创建一个场景
  30.         var scene = new THREE.Scene();
  31.  
  32.         // 创建一个相机
  33.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  34.  
  35.         // 创建一个渲染器
  36.         var renderer = new THREE.WebGLRenderer();
  37.  
  38.         renderer.setClearColor(new THREE.Color(0x000000, 1.0));
  39.         renderer.setSize(window.innerWidth, window.innerHeight);
  40.         renderer.shadowMapEnabled = true;
  41.  
  42.         // 设置相机坐标
  43.         camera.position.x = -30;
  44.         camera.position.y = 40;
  45.         camera.position.z = 30;
  46.         camera.lookAt(scene.position);
  47.  
  48.         // 添加自然光
  49.         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
  50.         scene.add(ambientLight);
  51.  
  52.         // 添加聚光灯
  53.         var spotLight = new THREE.SpotLight(0xffffff);
  54.         spotLight.position.set(-40, 60, -10);
  55.         spotLight.castShadow = true;
  56.         scene.add(spotLight);
  57.  
  58.         // 高斯帕曲线
  59.         var points = gosper(4, 60);
  60.  
  61.         var lines = new THREE.Geometry();
  62.         var colors = [];
  63.         var i = 0;
  64.         points.forEach(function (e) {
  65.             lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
  66.             colors[i] = new THREE.Color(0xffffff);
  67.             colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8);
  68.             i++;
  69.         });
  70.  
  71.         lines.colors = colors;
  72.  
  73.         lines.computeLineDistances();
  74.         var material = new THREE.LineDashedMaterial({
  75.             vertexColors: true,
  76.             color: 0xffffff,
  77.             dashSize: 2,
  78.             gapSize: 2,
  79.             scale: 0.1
  80.         });
  81.  
  82.         var line = new THREE.Line(lines, material);
  83.         line.position.set(25, -30, -60);
  84.         scene.add(line);
  85.  
  86.         // 把渲染后的结果放到DOM元素中
  87.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  88.  
  89.         var step = 0;
  90.         render();
  91.  
  92.         function render() {
  93.             stats.update();
  94.             line.rotation.z = step += 0.01;
  95.  
  96.             requestAnimationFrame(render);
  97.             renderer.render(scene, camera);
  98.         }
  99.  
  100.         function gosper(a, b) {
  101.  
  102.             var turtle = [0, 0, 0];
  103.             var points = [];
  104.             var count = 0;
  105.  
  106.             rg(a, b, turtle);
  107.  
  108.             return points;
  109.  
  110.             function rt(x) {
  111.                 turtle[2] += x;
  112.             }
  113.  
  114.             function lt(x) {
  115.                 turtle[2] -= x;
  116.             }
  117.  
  118.             function fd(dist) {
  119. //                ctx.beginPath();
  120.                 points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
  121. //                ctx.moveTo(turtle[0], turtle[1]);
  122.  
  123.                 var dir = turtle[2] * (Math.PI / 180);
  124.                 turtle[0] += Math.cos(dir) * dist;
  125.                 turtle[1] += Math.sin(dir) * dist;
  126.  
  127.                 points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
  128. //                ctx.lineTo(turtle[0], turtle[1]);
  129. //                ctx.stroke();
  130.  
  131.             }
  132.  
  133.             function rg(st, ln, turtle) {
  134.  
  135.                 st--;
  136.                 ln = ln / 2.6457;
  137.                 if (st > 0) {
  138. //                    ctx.strokeStyle = '#111';
  139.                     rg(st, ln, turtle);
  140.                     rt(60);
  141.                     gl(st, ln, turtle);
  142.                     rt(120);
  143.                     gl(st, ln, turtle);
  144.                     lt(60);
  145.                     rg(st, ln, turtle);
  146.                     lt(120);
  147.                     rg(st, ln, turtle);
  148.                     rg(st, ln, turtle);
  149.                     lt(60);
  150.                     gl(st, ln, turtle);
  151.                     rt(60);
  152.                 }
  153.                 if (st == 0) {
  154.                     fd(ln);
  155.                     rt(60);
  156.                     fd(ln);
  157.                     rt(120);
  158.                     fd(ln);
  159.                     lt(60);
  160.                     fd(ln);
  161.                     lt(120);
  162.                     fd(ln);
  163.                     fd(ln);
  164.                     lt(60);
  165.                     fd(ln);
  166.                     rt(60)
  167.                 }
  168.             }
  169.  
  170.             function gl(st, ln, turtle) {
  171.                 st--;
  172.                 ln = ln / 2.6457;
  173.                 if (st > 0) {
  174. //                    ctx.strokeStyle = '#555';
  175.                     lt(60);
  176.                     rg(st, ln, turtle);
  177.                     rt(60);
  178.                     gl(st, ln, turtle);
  179.                     gl(st, ln, turtle);
  180.                     rt(120);
  181.                     gl(st, ln, turtle);
  182.                     rt(60);
  183.                     rg(st, ln, turtle);
  184.                     lt(120);
  185.                     rg(st, ln, turtle);
  186.                     lt(60);
  187.                     gl(st, ln, turtle);
  188.                 }
  189.                 if (st == 0) {
  190.                     lt(60);
  191.                     fd(ln);
  192.                     rt(60);
  193.                     fd(ln);
  194.                     fd(ln);
  195.                     rt(120);
  196.                     fd(ln);
  197.                     rt(60);
  198.                     fd(ln);
  199.                     lt(120);
  200.                     fd(ln);
  201.                     lt(60);
  202.                     fd(ln);
  203.                 }
  204.             }
  205.         }
  206.  
  207.         function initStats() {
  208.  
  209.             var stats = new Stats();
  210.  
  211.             stats.setMode(0); // 0: fps, 1: ms
  212.             stats.domElement.style.position = 'absolute';
  213.             stats.domElement.style.left = '0px';
  214.             stats.domElement.style.top = '0px';
  215.  
  216.             document.getElementById("Stats-output").appendChild(stats.domElement);
  217.  
  218.             return stats;
  219.         }
  220.     };
  221.  
  222.     window.onload = init;
  223.  
  224. </script>
  225. </body>
  226. </html>

　　

26-THREE.JS 虚线绘制线框样式几何图形的材质的更多相关文章

  1. 25-THREE.JS 绘制线框样式几何图形的材质 线材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  2. html+js+highcharts绘制圆饼图表的简单实例

    下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧 实例如下: 1 2 3 4 5 6 7 8 ...

  3. 改写js原装的alert样式

    1.将下面的js代码单独到一个js文件中,然后在页面中引用 AlertDialog.js //改写js原装的alert样式 var t; var timeclose = 0; var showBack ...

  4. OpenGL学习-------绘制简单的几何图形

    本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...

  5. 使用jquery.PrintArea.js打印网页的样式问题

    在使用jquery.PrintArea.js打印局部网页样式的时候,发现样式打印不出来,在网上找了好多资料,整理一下分享给大家 一.先看看css的引用文件方式 1.直接在内部的元素中使用”style” ...

  6. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  7. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  8. ImageDrawer.js图片绘制插件

    ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...

  9. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

随机推荐

  1. BZOJ2648: SJY摆棋子&&2716: [Violet 3]天使玩偶

    BZOJ2648: SJY摆棋子 BZOJ2716: [Violet 3]天使玩偶 BZOJ氪金无极限... 其实这两道是同一题. 附上2648的题面: Description 这天,SJY显得无聊. ...

  2. 【零基础学习iOS开发】【02-C语言】08-基本运算

    一.算术运算符 算术运算符很地简单.就是小学数学里面的一些加减乘除操作.只是呢.还是有一些语法细节须要注意的. 1.加法运算符 + 1 int a = 10; 2 3 int b = a + 5; 在 ...

  3. (转)JAVA-反射机制的使用

    Java反射机制的实现原理 反射机制:所谓的反射机制就是java语言在运行时拥有一项自观的能力.通过这种能力可以彻底的了解自身的情况为下一步的动作做准备.下面具体介绍一下java的反射机制.这里你将颠 ...

  4. redis的图形化工具(四)

    1. 介绍 本篇会介绍几个关于redis的图形化的监控工具和管理工具. 2. redis-stat redis-stat提供终端和web端的监控页面,它安装和使用起来很简单. 安装只需要一条指令. $ ...

  5. python2函数

    1.函数的定义 函数的定义形式如下: def <name>(arg1,arg2...argN): <statements> 函数的名字必须以字母开头,可以包括下划线.函数的目的 ...

  6. Linux Shell编程第2章——Linux文件系统

    目录 用户和用户组管理 用户管理常用命令 用户组管理常用命令 文件和目录操作 文件操作常用命令 目录操作常用命令 文件和目录权限管理 文件查找--find 用户和用户组管理 用户管理常用命令 用户的角 ...

  7. Bootstrap总结二

    参考我的博客:http://www.isedwardtang.com/2017/09/01/bootstrap-primer-2/

  8. maven入门学习（一）

    一.maven介绍 1.软件开发中我们为什么要使用maven呢?(纯属个人体会观点,如有错误,敬请指正) (1)其一,企业岗位需求,目前的IT开发招聘岗位上,基本都要求会使用maven.        ...

  9. Linux 进程管理 进程优先级管理

    Linux进程优先级 Linux 是一个多用户.多任务的操作系统,系统中通常运行着非常多的进程.但是 CPU 在一个时钟周期内只能运算一条指令(现在的 CPU 采用了多线程.多核心技术,所以在一个时钟 ...

  10. ==与equals的各种情况

    == 能用于基本类型之间.基本类型与引用类型之间及相同引用类型之间,不能用于不同引用类型之间 对于基本类型,取值来对比,对于引用类型,取地址来对比 int a= 1; Integer b= 1; Sy ...