three.js-线上运动的光效

r囧r小猫 2021-11-17 10:24 439阅读 0赞

先上图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]  
一个简单的动画效果，刚开始研究three.js，作的一个小demo。  
代码结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 2]  
这些js在three.js的官网git上可以下载。  
index.html中代码如下，全部代码，写的有点儿low：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            canvas {
                display: block;
            }
    
            #myBox {
                width: 60vw;
                height: 80vh;
                margin: 10vh auto;
            }
        </style>
    </head>
    
    <body>
        <div id="myBox"></div>
        <script type="module">
            import * as THREE from './js/three-src/three.module.js';
            import { OrbitControls } from './js/obj-control/OrbitControls.js';
            import { Lensflare, LensflareElement } from './js/obj-control/Lensflare.js';
            import { Line2 } from './js/lines/Line2.js';
            import { LineMaterial } from './js/lines/LineMaterial.js';
            import { LineGeometry } from './js/lines/LineGeometry.js';
            var Boxes = (function (THREE) {
                'use strict';
                var myObj = document.getElementById("myBox");
                var spline = null;
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                //
                function Box(pos) {
                    this.vector = pos;
                    // this.texture = texture;
                    this.radius = {
                        x: 20,
                        y: 30,
                        z: 20
                    };
                    this.counter = 0;
                    this.axis = new THREE.Vector3();
                    this.up = new THREE.Vector3(0, 1, 0);
                    this.speed = 0.005 + Math.random() * 0.005;
                    this.mesh = null;
                }
                Box.prototype.init = function (scene) {
    
    
                    //球体
                    // this.mesh = new THREE.Mesh(
                    //     new THREE.SphereGeometry(2, 32, 32)   
                    // , new THREE.MeshLambertMaterial({color: 0xffffff} ));
                    // this.mesh.position.set(this.vector.x, this.vector.y, this.vector.z);
                    // scene.add(this.mesh);
    
    
                    var textureLoader = new THREE.TextureLoader();
    
                    var textureFlare0 = textureLoader.load('images/lensflare0.png');
    
                    var self = this;
                    addLight(0.995, 0.5, 0.9, 5000, 5000, - 1000);
                    // addLight( 0.995, 0.5, 0.9, 5000, 5000, - 1000 );
                    function addLight(h, s, l, x, y, z) {
    
                        self.light = new THREE.PointLight(0xffffff, 1.5, 2000);
                        self.light.color.setHSL(h, s, l);
                        self.light.position.set(self.vector.x, self.vector.y, self.vector.z);
                        scene.add(self.light);
    
                        var lensflare = new Lensflare();
                        lensflare.addElement(new LensflareElement(textureFlare0, 80, 0, self.light.color));
                        self.light.add(lensflare);
    
                    }
    
    
                }
    
                function Point(pos) {
                    this.vector = new THREE.Vector3(pos.x, pos.y, pos.z);
                }
    
                function Spline(points) {
                    this.points = points;
                    this.box = null
                    this.curve = null;
                }
                Spline.prototype.init = function (scene) {
                    var curve = new THREE.CatmullRomCurve3();
                    var pointArr = [];
                    var colorArr = [];
                    this.points.forEach(function (point) {
                        curve.points.push(point.vector);
                    });
                    var geometry = new THREE.Geometry();
                    geometry.vertices = curve.getPoints(100);
                    var objArr = geometry.vertices;
                    for (var i=0; i<objArr.length; i++) {
                        pointArr.push(objArr[i].x);
                        pointArr.push(objArr[i].y);
                        pointArr.push(objArr[i].z);
                        colorArr.push(0);
                        colorArr.push(0);
                        colorArr.push(1);
                    }
                    var geometry1 = new LineGeometry();
                    geometry1.setColors(colorArr);
                    geometry1.setPositions(pointArr);
    
        
                    var matLine = new LineMaterial({
                        color: 0xffffff,
                        linewidth: 10, // in pixels
                        vertexColors: THREE.VertexColors,
                        //resolution:  // to be set by renderer, eventually
                        // dashed: true
                    });
                    matLine.resolution.set(width,height);
                    var splineObject = new Line2(geometry1, matLine);
                    scene.add(splineObject);
    
    
    
    
                    this.box = new Box(this.points[0].vector);
                    this.box.init(scene);
                    this.box1 = new Box(this.points[0].vector);
                    this.box1.init(scene);
                    this.curve = curve;
                    this.box2 = new Box(this.points[0].vector);
                    this.box2.init(scene);
                    this.curve = curve;
    
    
    
    
                };
                Spline.prototype.update = function () {
                    var box = this.box;
                    if (box.counter < 1) {
                        box.light.position.copy(this.curve.getPointAt(box.counter));
                        box.counter += box.speed;
                    } else {
                        box.counter = 0;
                    }
    
    
    
                    var box1 = this.box1;
                    if (box1.counter < 1) {
                        box1.light.position.copy(this.curve.getPointAt(box1.counter));
                        box1.counter += (0.004 + Math.random() * 0.004);
                    } else {
                        box1.counter = 0;
                    }
    
    
                    var box2 = this.box2;
                    if (box2.counter < 1) {
                        box2.light.position.copy(this.curve.getPointAt(box2.counter));
                        box2.counter += (0.002 + Math.random() * 0.004);
                    } else {
                        box2.counter = 0;
                    }
    
    
                };
                //
                var width = myObj.clientWidth;
                var height = myObj.clientHeight;
    
                var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
                var renderer = new THREE.WebGLRenderer();
                var light = new THREE.DirectionalLight(0xFFFFFF, 1);
    
                var controls = new OrbitControls(camera, renderer.domElement);//控制鼠标移动镜头移动
                controls.damping = 0.2;
    
    
    
                var splines;
                // var texture;
    
                function setUpWorld() {
                    camera.position.set(0, -150, 120);
                    camera.lookAt(scene.position);
                    scene.add(camera);
                    renderer.setSize(width, height);
                    renderer.setClearColor(0x21111);
                    myObj.appendChild(renderer.domElement);
                    scene.add(light);
                    light.position.set(0, -300, 30);
                }
    
                /**
                 * splinesNum 线条的条数
                */
                function generateSplines(splinesNum, range, spacing) {
                    splines = [];
                    for (var i = 0; i < splinesNum; i += 1) {
                        var points = [];
                        // for (var x = -range / 2; x <= range / 2; x += spacing) {
                        //     var offset = -50 + Math.random() * 50;
                        //     var point = new Point({
                        //         x: x - offset,
                        //         y: offset,
                        //         z: (-offset / 2) * 10 + (Math.random() * offset / 2) * 10
                        //     });
                        //     points.push(point);
                        // }
                        
                    
    
                        //直线
                        // points = [
                        //     new Point({x:-100,y:0,z:0}),
                        //     new Point({x:100.199427036501952,y:0,z:0}),  
                        // ]
                        //曲线
                        points = [
                            new Point({x:-100,y:0,z:0}),
                            new Point({x:-50,y:50,z:0}),
                            new Point({x:100.199427036501952,y:0,z:0}),  
                        ]
                        console.log(points)
                        spline = new Spline(points);
                        spline.init(scene);
                        splines.push(spline);
                    }
                }
    
                function renderFrame() {
                    window.requestAnimationFrame(renderFrame);
                    //controls.update();
    
                    renderer.clear();
                    renderer.render(scene, camera);
                    splines.forEach(updateSpline);
                }
    
                function updateSpline(spline) {
    
                    spline.update();
                }
    
                function init() {
                    setUpWorld();
                    generateSplines(1, 2, 1);
                    renderFrame();
    
                }
    
                return {
                    init: init
                };
    
            })(THREE);
    
            Boxes.init();
    
        </script>
    </body>
    
    </html>

核心思想：  
1.利用Line2去画线。  
2.利用官网中的Lensflare.js去渲染光效（其实就是一张光效图片）。  
3.利用requestAnimationFrame去做运动动画。

注意点儿：  
1.一定要用line2去画线，这样linewidth才能生效。  
2.由于我不考虑兼容性，用了es6的import和export去导入文件（其实是为了省事儿），如果你用的谷歌高版本，可以直接运行。

附上源码下载链接：[线上运动的光效][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70]: /images/20211116/a72d7397b1b34a9cbe9d3978a4e034c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 1]: /images/20211116/88c08ff6741b46fb9205134231222838.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0MjY2MA_size_16_color_FFFFFF_t_70 2]: /images/20211116/42b50b9d25f2493b947407d72f1b4dc4.png
[Link 1]: https://download.csdn.net/download/weixin_43842660/12967619