@krock00000

Three.js проблема на устройствах apple?

Всем доброе утро.
Работаю над проектом, и встала задача сделать 3d анимацию ДНК
Вот что получилось, анимация на 4 блоке - paycore.goodface.com.ua/security-and-compliance.html
На пк и андроид все работает хорошо. Но на технике apple анимация не такая насыщеная, как буд то точек становится на много меньше.

Пробовал добавить renderer.setPixelRatio(window.devicePixelRatio), это исправило проблему на айфонах, но на пк от apple она осталась. В чем может быть проблема?

Мой код:

let renderer;
let scene;
let particles;
const {
innerWidth,
innerHeight
} = window;
const {
sin,
cos
} = Math;
const DENSITY_RADIOUS = 16;
const PHASE_SHIFT = 120;
let allPoints = []
const connectionPoints = [];

const rad = deg => (deg / 180) * Math.PI;
const getRandomPoint = () => DENSITY_RADIOUS * Math.random() - (DENSITY_RADIOUS / 2);
const range = x => Array(x).fill(0).map((_, index) => index)
const norm = (val, min, max) => (val - min) / (max - min)
const lerp = (nrm, min, max) => (max - min) * nrm + min
const lerpMap = (val, sMin, sMax, dMin, dMax) => lerp(norm(val, sMin, sMax), dMin, dMax)

const init = () => {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('dna-ill').appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(
dnaZoom,
window.innerWidth / window.innerHeight,
1,
5000
);
camera.position.z = 2500;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
};

const addParticles = particleArray => {
const geometry = new THREE.Geometry();
particleArray.forEach(particle => {
geometry.vertices.push(particle)
});
const material = new THREE.PointsMaterial({
size: 2,
opacity: 0.6,
alphaTest: 0.4,
transparent: true
});
material.color.set('#FFD400');
particles = new THREE.Points(geometry, material);
scene.add(particles);
};

const getPoints = p => {
const {
x,
y,
z
} = p;
return range(100).map(() => ({
x: x + getRandomPoint(),
y: y + getRandomPoint(),
z: z + getRandomPoint()
}));
};

const getCirclePoins = a => {
const angle = rad(a);
const r = 100;
const x = r * sin(angle);
const z = r * cos(angle);
return {
x,
z
};
};

const addConnection = ({
pa,
pb
}) => {
const connectionDensity = 100
const connectionPoints = range(connectionDensity).reduce(
(acc, i) => [
...acc,
...getPoints({
x: lerpMap(i, 0, connectionDensity, pa.x, pb.x),
y: pa.y,
z: lerpMap(i, 0, connectionDensity, pa.z, pb.z)
})
],
[]
);
allPoints = allPoints.concat(connectionPoints)
};

const calculateDnaPoints = () => {
range(1500).forEach(a => {
const pa = {
...getCirclePoins(a),
y: 1.5 * (a - 540)
};
const pb = {
...getCirclePoins(a + PHASE_SHIFT),
y: 1.5 * (a - 540)
};
allPoints = allPoints.concat(getPoints(pa))
allPoints = allPoints.concat(getPoints(pb))
if (a % 36 === 0) {
connectionPoints.push({
pa,
pb
});
}
});
connectionPoints.map(i => addConnection(i));
}

init();
calculateDnaPoints()
addParticles(allPoints)

particles.rotation.z = 1.55;

const loop = () => {
particles.rotation.x += 0.01
requestAnimationFrame(loop)
renderer.render(scene, camera);
}

loop();
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ответы на вопрос 1
Bavashi
@Bavashi
Попробую предположить: на самом деле кол-во точек остается неизменным, но их цветовая палитра меняется, потому что реализация рендера на макОС может отличаться. Не уверен, что правильно напишу код, но чтобы запретить браузеру ее изменить (корректировать) можно попробовать сделать так:
...
var canvas = document.getElementsByTagName("canvas");
var gl = canvas.getContext('webgl');
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
renderer = new THREE.WebGLRenderer(canvas);
...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы