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

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

            //根据提供的 HSL 值设置颜色。参数范围从 0 到 1。可以查看 http://en.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL 了解 HSL 如何用于设置颜色。

            i++;

        });

        lines.colors = colors;

        var material = new THREE.LineBasicMaterial({

            opacity: 1.0,

            linewidth: 1,

            vertexColors: THREE.VertexColors

        });

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

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

        scene.add(line);

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

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

        // call the render function

        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>

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

26-THREE.JS 虚线绘制线框样式几何图形的材质
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
利用d3.js绘制雷达图
利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...
js动态创建样式: style 和 link
js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章有很多提供动态创建 ...
js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...
OpenGL学习-------绘制简单的几何图形
本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...
微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...

随机推荐

pandas 修改指定列中所有内容
如下图: 读取出来的 DataFrame “code” 列内容格式为:“浪潮信息(000977.XSHE)” 格式,目标效果是:000977.XSHE 代码: df["code"] ...
Java I/O(一) NIO概述
基本概念 BIO:是堵塞I/O,无论是磁盘I/O,还是网络I/O,数据在写入OutputStream和InputStream都可能发生堵塞,一旦有堵塞,线程会失去CPU的使用权(堵塞). NIO:简单 ...
openwrt undefined reference to ‘getpwent_r’
由于须要安装 su sudo useradd groupadd chown login 等用户管理命令,会訪问passwd文件. 用到了 getpwant_r 函数.详细是哪个命令引起的,临时不知. ...
Linux ssh面密码登录
1.生成自己的公钥和私钥 ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa 进入~/.ssh目录看多了两个文件:id_rsa id_rsa.pub 其中一个是公钥一 ...
【Spring MVC】spring mvc中相同的url请求返回不同的结果
在项目中凡是使用Spring MVC这种控制器的,大多都是返回JSON数据对象,或者JSP页面. 但是相同的URL请求如何让他自动的选择放回的是什么? 在这里有由于鄙人没有亲自测试过,就不敢乱贴代码, ...
gif 命令大全
git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...
kafka--producer配置解析
producer解析主要是解析一下producer的相关配置以及一些使用场景相关解析名称说明类型默认值有效值重要性 bootstrap.servers 用于建立与kafka集群连接 ...
url末尾的斜杠作用探秘
今天突然好奇,想区分www.abc.com/efg 和www.abc.com/efg/这两个网址的区别.即分析一下url末尾加个斜杠是否有特殊的效果. 找到网上的介绍: 当Web服务器接收到对某个末尾 ...
SVN如何切换用户对代码进行操作
在使用svn更新或提交数据时需要输入用户名和密码,在输入框中可以选择是否记录,以便下次操作无需再次输入用户名和密码: 要切换其他用户名时,需要删除已记录用户的数据,在电脑桌面上右击,依次点击菜单项To ...
每天学点Linux命令之grep 和 wc命令 ---（6/25）
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

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

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

随机推荐

热门专题

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

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