40 Three.js线性几何体材质THREE.LineDashedMaterial

2018-02-12 18:45:00 人阅读

案例查看有问题?
全屏试试!

案例解析

 

简介

这种材质和THREE.LineBasicMaterial略有些不同,它不但可以给线段上色,还可以添加一种虚线的效果。

额外属性

名称 描述
scale 线条中虚线部分的占比,缩放dashSize和gapSize。如果scale的值小于1,dashSize和gapSize就会增大;如果scale的值小于1,dashSize和gapSize就会减小
dashSize 破折号(-)的大小。默认为3。
gapSize 间隙的大小。默认为1。

注意事项

使用THREE.LineDashedMaterial和THREE.LineBasicMaterial基本一样,唯一区别是必须调用computeLineDistance()(用来计算线段顶点之间的距离)。如果不这样做,间隔就不会正确的显示。

简单示例

        //定义直线纹理         geometry.computeLineDistances();         var material = new THREE.LineDashedMaterial({             vertexColors: true,             color: 0xffffff,             dashSize: 2,             gapSize: 2,             scale: 5         });          //生成网格         line = new THREE.Line(geometry, material);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

案例代码

这里写图片描述 

案例源代码


                        

 

 
<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ShaderMaterial案例</title>
    <script src="/lib/three.js"></script>
    <script src="/lib/js/libs/stats.min.js"></script>
    <script src="/lib/js/libs/dat.gui.min.js"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
 
        canvas {
            display: block;
        }
 
    </style>
</head>
<body onload="draw()">
 
</body>
<script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
        document.body.appendChild(renderer.domElement);
    }
 
    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0,50,100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }
 
    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }
 
    //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
    }
 
    var ambientLight,spotLight;
    function initLight() {
        ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
 
        spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);
    }
 
    var line;
    function initModel() {
        //获取点的位置
        var points = gosper(3, 60);
 
        //实例化一个几何图形
        var geometry = new THREE.Geometry();
        var colors = []; //存放颜色的数组
        for(var i=0,len=points.length; i<len; i++){
            var e = points[i];
            //遍历将顶点的位置添加进入
            geometry.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);
        }
 
        //设置几何图形每个点的颜色
        geometry.colors = colors;
 
        //定义直线纹理
        geometry.computeLineDistances();
        var material = new THREE.LineDashedMaterial({
            vertexColors: true,
            color: 0xffffff,
            dashSize: 2,
            gapSize: 2,
            scale: 5
        });
 
        //生成网格
        line = new THREE.Line(geometry, material);
        //设置位置
        line.position.set(0, 0, -60);
        scene.add(line);
    }
 
    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }
 
    var step = 0;
    function render() {
 
        //设置模型动画
        line.rotation.z = step += 0.01;
        line.rotation.y = step += 0.01;
 
        renderer.render(scene, camera);
    }
 
    //窗口变动触发的函数
    function onWindowResize() {
 
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);
 
    }
 
    function animate() {
        //更新控制器
        render();
 
        //更新性能插件
        stats.update();
 
        requestAnimationFrame(animate);
    }
 
    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initStats();
 
        animate();
        window.onresize = onWindowResize;
    }
 
    //高斯帕曲线生成函数gosper(密度, 大小),也被称为flowsnake(一首音误的雪花),是一种空间填充曲线。它是一个与龙曲线和希尔伯特曲线相似的分形物体。
    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);
            }
        }
    }
 
</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多