39 Three.js線性幾何體材質THREE.LineBasicMaterial

專注前端30年發表於2017-12-07
JS

簡介

THREE.LineBasicMaterial用於繪製線段的基礎材質。

相關屬性

名稱 描述
color 該屬性設定材質的顏色，如果設定了vertexColors，這是屬性將被忽略
linewidth 設定線的寬度，預設值為1.0
linecap 這個屬性定義了線框模式下頂點間線段的端點如何顯示。可選的值包括butt（平）、round（圓）和square（方）。預設值為round。在實際使用中，這個屬性的修改結果很難看出來。WebGLRenderer物件不支援該屬性
linejoin 這個屬性定義了線段的連線點如何顯示。可選的值有round（圓）、bevel（斜角）和miter（尖角）。預設值為round。如果你在一個使用低透明度和很大wireframeLinewidth值的例子裡靠近觀察，就可以看到這個屬性的效果。WebGLRenderer物件不支援該屬性
vertexColors 將這個屬性設定成THREE.VertexColors值，就可以給每個頂點指定一種顏色
fog 該屬性指定當前材質是否受全域性霧化效果設定的影響

簡單使用

var material = new THREE.LineBasicMaterial( {
    color: 0xffffff,
    linewidth: 1,
    linecap: 'round', 
    linejoin:  'round' 
} );

案例程式碼

這裡寫圖片描述

案例檢視地址：http://www.wjceo.com/blog/threejs/2018-02-12/41.html

<!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="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
    <script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
    <script src="https://johnson2heng.github.io/three.js-demo/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;

        //定義直線紋理
        var material = new THREE.LineBasicMaterial({
            opacity: 1.0, //設定透明度
            linewidth: 1, //設定線的寬度
            vertexColors: THREE.VertexColors //設定這個可以給每個頂點指定一種顏色
        });

        //生成網格
        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>

相關文章