SCRIPT1002: Синтаксическая ошибка - Проблема в IE11

382
21 октября 2021, 15:30

Использую на сайте готовый плагин анимации, основанный на three.js. Прикручиваю код плагина, который не работает в IE11. Вот код:

(function () {
    var Particles;
    Particles = class Particles {
        constructor () {
            this.getPastelColor = this.getPastelColor.bind(this);
            this.setActors = this.setActors.bind(this);
            this.addStars = this.addStars.bind(this);
            this.getTexture = this.getTexture.bind(this);
            this.setLighting = this.setLighting.bind(this);
            this.setStage = this.setStage.bind(this);
            this.animate = this.animate.bind(this);
            this.resize = this.resize.bind(this);
            this.random = this.random.bind(this);
            this.rotateRadians = this.rotateRadians.bind(this);
            this.render = this.render.bind(this);
            this.particleCount = 200;
            this.initialRadius = 0.1;
            this.movementSpeed = 0.35;
            this.directions = [];
            this.starSystems = [];
            this.systemCount = 1;
            this.setStage();
            this.setLighting();
            this.setActors();
            setInterval(() => {
                this.systemCount++;
                return this.addStars(this.getPastelColor(), 0, 0);
            }, 17000);
            this.animate();
            this.render();
        }
        getPastelColor () {
            this.col = new THREE.Color(`hsl(${this.random(0, 360)}, ${Math.floor(25 + 70 * Math.random())}%, ${Math.floor(85 + 10 * Math.random())}%)`);
            return `#${this.col.getHexString()}`;
        }
        setActors () {
            return this.addStars(this.getPastelColor(), 0, 0);
        }
        addStars (color, x, y) {
            var angle, i, k, radiusSQ, ref, vertex;
            this.dirs = [];
            this.geometry = new THREE.Geometry();
            this.materials = new THREE.PointsMaterial({
                color: color,
                size: 1,
                transparent: true,
                blending: THREE.AdditiveBlending,
                map: this.getTexture(color),
                depthTest: false,
            });
            for (i = k = 0, ref = this.particleCount; (ref >= 0 ? k < ref : k > ref); i = ref >= 0 ? ++k : --k) {
                angle = Math.random() * Math.PI;
                radiusSQ = Math.random() * this.initialRadius * this.initialRadius;
                vertex = new THREE.Vector3();
                vertex.x = x;
                vertex.y = y;
                vertex.z = 0;
                this.dirs.push({
                    x: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2),
                    y: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2),
                    z: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2),
                });
                this.geometry.vertices.push(vertex);
            }
            this.starSystem = new THREE.Points(this.geometry, this.materials);
            this.starSystem.sortParticles = false;
            this.directions.push(this.dirs);
            this.starSystems.push(this.starSystem);
            return this.scene.add(this.starSystem);
        }
        getTexture (color) {
            var canvas, context, gradient, texture;
            canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;
            context = canvas.getContext('2d');
            gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
            gradient.addColorStop(0, 'rgba(112,32,255,1)');
            gradient.addColorStop(0.3, 'rgba(112,32,255,1)');
            gradient.addColorStop(0.6, 'rgba(112,32,255,1)');
            gradient.addColorStop(1, 'rgba(112,32,255,0)');
            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);
            texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        }
        setLighting () {
            this.ambientLight = new THREE.AmbientLight('#ffffff', 1);
            return this.scene.add(this.ambientLight);
        }
        setStage () {
            this.renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('acuiring-particles'),
                antialias: true,
                alpha: true,
            });
            this.renderer.setPixelRatio(window.devicePixelRatio);
            this.renderer.autoClear = true;
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.scene = new THREE.Scene();
            this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            this.camera.position.z = 50;
            window.addEventListener('resize', this.resize, false);
        }
        animate () {
            var i, j, k, l, particle, ref, ref1;
            for (j = k = 0, ref = this.systemCount - 1; (ref >= 0 ? k <= ref : k >= ref); j = ref >= 0 ? ++k : --k) {
                for (i = l = 0, ref1 = this.particleCount; (ref1 >= 0 ? l < ref1 : l > ref1); i = ref1 >= 0 ? ++l : --l) {
                    particle = this.starSystems[j].geometry.vertices[i];
                    particle.x += this.directions[j][i].x;
                    particle.y += this.directions[j][i].y;
                    particle.z += this.directions[j][i].z;
                }
                this.starSystems[j].geometry.verticesNeedUpdate = true;
            }
            this.render();
            return requestAnimationFrame(this.animate);
        }
        resize () {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            return this.render();
        }
        random (min, max) {
            return min;
            // return Math.floor(Math.random() * max) + min;
        }
        rotateRadians (deg) {
            return deg * (Math.PI / 180);
        }
        render () {
            return this.renderer.render(this.scene, this.camera);
        }
    };
    new Particles();
}).call(this);

Ошибку выдает на строку Particles = class Particles {

Как правильно переписать код, чтобы его понял IE11?

READ ALSO
Как сделать чтобы после запятой оставались только 2 цифры?

Как сделать чтобы после запятой оставались только 2 цифры?

Вот выводится число 10099 , а как сделать чтобы выводилось 1

117
Вопрос по поводу глобальных переменных

Вопрос по поводу глобальных переменных

Я отдаю себе отчет о том, что это супер нубский вопрос, но тем не менее, я просидел час в попытках понять, почему глоабальный вар изменяетсяЯ...

125
Вставить картинку в base64 из localStorage на html страницу

Вставить картинку в base64 из localStorage на html страницу

Имею скрипт, который добавляет картинки в localStorage в таком виде

208
Ошибка в сравнении

Ошибка в сравнении

Условие: Пользователь вводит номер месяцаВывести название времени года (весна, лето, осень, зима)

223