<!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>

    <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 renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0x000000, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMapEnabled = true;

        // 设置相机坐标

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // 添加自然光

        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

        scene.add(ambientLight);

        // 添加聚光灯

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        scene.add(spotLight);

        // 高斯帕曲线

        var points = gosper(4, 60);

        var lines = new THREE.Geometry();

        var colors = [];

        var i = 0;

        points.forEach(function (e) {

            lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));

            colors[i] = new THREE.Color(0xffffff);

            colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8);

            i++;

        });

        lines.colors = colors;

        lines.computeLineDistances();

        var material = new THREE.LineDashedMaterial({

            vertexColors: true,

            color: 0xffffff,

            dashSize: 2,

            gapSize: 2,

            scale: 0.1

        });

        var line = new THREE.Line(lines, material);

        line.position.set(25, -30, -60);

        scene.add(line);

        // 把渲染后的结果放到DOM元素中

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var step = 0;

        render();

        function render() {

            stats.update();

            line.rotation.z = step += 0.01;

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function gosper(a, b) {

            var turtle = [0, 0, 0];

            var points = [];

            var count = 0;

            rg(a, b, turtle);

            return points;

            function rt(x) {

                turtle[2] += x;

            }

            function lt(x) {

                turtle[2] -= x;

            }

            function fd(dist) {

//                ctx.beginPath();

                points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});

//                ctx.moveTo(turtle[0], turtle[1]);

                var dir = turtle[2] * (Math.PI / 180);

                turtle[0] += Math.cos(dir) * dist;

                turtle[1] += Math.sin(dir) * dist;

                points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});

//                ctx.lineTo(turtle[0], turtle[1]);

//                ctx.stroke();

            }

            function rg(st, ln, turtle) {

                st--;

                ln = ln / 2.6457;

                if (st > 0) {

//                    ctx.strokeStyle = '#111';

                    rg(st, ln, turtle);

                    rt(60);

                    gl(st, ln, turtle);

                    rt(120);

                    gl(st, ln, turtle);

                    lt(60);

                    rg(st, ln, turtle);

                    lt(120);

                    rg(st, ln, turtle);

                    rg(st, ln, turtle);

                    lt(60);

                    gl(st, ln, turtle);

                    rt(60);

                }

                if (st == 0) {

                    fd(ln);

                    rt(60);

                    fd(ln);

                    rt(120);

                    fd(ln);

                    lt(60);

                    fd(ln);

                    lt(120);

                    fd(ln);

                    fd(ln);

                    lt(60);

                    fd(ln);

                    rt(60)

                }

            }

            function gl(st, ln, turtle) {

                st--;

                ln = ln / 2.6457;

                if (st > 0) {

//                    ctx.strokeStyle = '#555';

                    lt(60);

                    rg(st, ln, turtle);

                    rt(60);

                    gl(st, ln, turtle);

                    gl(st, ln, turtle);

                    rt(120);

                    gl(st, ln, turtle);

                    rt(60);

                    rg(st, ln, turtle);

                    lt(120);

                    rg(st, ln, turtle);

                    lt(60);

                    gl(st, ln, turtle);

                }

                if (st == 0) {

                    lt(60);

                    fd(ln);

                    rt(60);

                    fd(ln);

                    fd(ln);

                    rt(120);

                    fd(ln);

                    rt(60);

                    fd(ln);

                    lt(120);

                    fd(ln);

                    lt(60);

                    fd(ln);

                }

            }

        }

        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>

　　

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. NOIP2018酱油记

    考完了,终于有时间来写游记了. 有一种悲伤,叫做知道正解是什么但是就是不会写... 有一种遗憾,叫做能拿到的分考完才意识到... 有一种$NOIP$,叫做$Day1$原题大赛,$Day2AHOI$.. ...

  2. 我的Android进阶之旅------>解决：Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'.

    错误描述 今天在Android Studio项目中加入了jackson的开发包,编译运行时候,引发了如下的错误: Error:Execution failed for task ':app:trans ...

  3. Django - 回顾（2）- 中介模型

    一.中介模型 我们之前学习图书管理系统时,设计了Publish.Book.Author.AuthorDetail这样几张表,其中Book表和Author表是多对多关系,处理类似这样简单的多对多关系时, ...

  4. Java Synchronized 与 ThreadLocal 异同

    同:都是为了线程安全 异:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问.而ThreadLocal为每一个线程都提供了变量的副本, 使得每个线程在某一时间访问到的并 ...

  5. C/C++中浮点数输出格式问题

    在C语言中,浮点数的输出格式有三种:%g, %f, %e 首先要说的是%e是采用科学计数法来显示. %g与后两者有一个重要的差别,就是设置输出精度的时候,(C中默认浮点输出精度是6),%g认为,包括整 ...

  6. Java集合（7）：HashMap

    一.HashMap介绍 HashMap是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据hash算法来来计算 ...

  7. window下rails4.1 发生TZInfo::DataSourceNotFound 错误

    在官网上学习rails 4.1 ,启动rails server之后发生了如下错误 $ rails serverBooting WEBrickRails 4.1.0 application starti ...

  8. Codeforces Round #395 (Div. 2) D. Timofey and rectangles

    地址:http://codeforces.com/contest/764/problem/D 题目: D. Timofey and rectangles time limit per test 2 s ...

  9. 在Ubuntu上安装Brackets的步骤（加源和移除源）

    学习编写接口开发和测试时需要用到编写HTML页面,在Windows下采用的是HBuilder,但是无Ubuntu版本.安装一个网上推荐的Brackets 安装步骤:参见http://www.xiton ...

  10. Linux命令（6/28）——declare/typeset命令

    declare 与 typeset 命令是bash的内建命令,两者是完全一样的,用来声明shell变量,设置变量的属性. declare命令(别名typeset)属shell内建命令,用于申明shel ...