Использую на сайте готовый плагин анимации, основанный на 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?
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Вот выводится число 10099 , а как сделать чтобы выводилось 1
Я отдаю себе отчет о том, что это супер нубский вопрос, но тем не менее, я просидел час в попытках понять, почему глоабальный вар изменяетсяЯ...
Имею скрипт, который добавляет картинки в localStorage в таком виде
Условие: Пользователь вводит номер месяцаВывести название времени года (весна, лето, осень, зима)