Anyone ever heard of LineSegment or other meshes not rendering on iPhone Safari? I just tried loading this project on two different iPhones and the lines aren’t visible, though other meshes are. I used the eruda console to check for errors and there are none. Here’s a live example of just the lines:
Here is the code:
import './reset.css';
import * as Three from 'three';
let scene, vpAspect, camera, camSocket, renderer, canvas;
let lineGeo, lines;
const lineCount = 10000;
let lastUpdate;
const camDepth = 300;
const cameraOffsetBuffer = 5000;
const lineMaxLength = 1000;
const lineMinLength = 400;
document.addEventListener("DOMContentLoaded", async () =>
{
initWorld();
});
function initWorld()
{
scene = new Three.Scene();
vpAspect = window.innerWidth / window.innerHeight;
camera = new Three.PerspectiveCamera(60, vpAspect, 1, 4000);
camSocket = new Three.Object3D();
camSocket.position.set(-1000, 0, 0);
scene.add(camSocket);
camSocket.add(camera);
camera.position.set(0, 0, camDepth);
camera.rotation.set(0, 0, 0);
canvas = document.querySelector('#main');
renderer = new Three.WebGLRenderer
({
canvas: canvas,
antialias: true,
// preserveDrawingBuffer: false, //various settings I've tried
// alpha: true,
// premultipliedAlpha: false
});
renderer.setClearColor(0x000000);
const winW = window.innerWidth;
const winH = window.innerHeight;
renderer.setSize(winW, winH);
initLines();
animate();
}
function initLines()
{
const positions = new Float32Array(lineCount * 6); // 6 values per line (x1, y1, z1, x2, y2, z2)
const initialYPositions = new Float32Array(lineCount);
const colors = new Float32Array(lineCount * 3); // 3 values per vertex color (r, g, b)
const velocities = new Float32Array(lineCount);
const accelerations = new Float32Array(lineCount);
const lengths = new Float32Array(lineCount);
for(let i=0; i<lineCount;++i)
{
const range = cameraOffsetBuffer;
const halfRange = range * 0.5;
const x = Math.random() * 2 * range - range;
const y = Math.random() * range - halfRange;
const z = Math.random() * range - halfRange;
const length = Math.random() * (lineMaxLength - lineMinLength) + lineMinLength;
lengths[i] = length;
//const height = Math.random() * 19 + 1;
initialYPositions[i] = y;
positions[i * 6] = x;
positions[i * 6 + 1] = y;
positions[i * 6 + 2] = z;
positions[i * 6 + 3] = x - length;
positions[i * 6 + 4] = y; // Adjust length of the line
positions[i * 6 + 5] = z;
setLineColor(colors, i);
velocities[i] = 0;
accelerations[i] = Math.random() * 0.001 + 0.015;
}
lineGeo = new Three.BufferGeometry();
lineGeo.setAttribute('position', new Three.BufferAttribute(positions, 3));
lineGeo.setAttribute('color', new Three.BufferAttribute(colors, 3));
lineGeo.setAttribute('velocity', new Three.BufferAttribute(velocities, 1));
lineGeo.setAttribute('acceleration', new Three.BufferAttribute(accelerations, 1));
lineGeo.setAttribute('length', new Three.BufferAttribute(lengths, 1));
lineGeo.setAttribute('initialYPosition', new Three.BufferAttribute(initialYPositions, 1));
const lineMaterial = new Three.LineBasicMaterial({ vertexColors: true, linewidth: 1 });
lines = new Three.LineSegments(lineGeo, lineMaterial);
scene.add(lines);
}
function animate(time)
{
time = isNaN(time) ? 0 : time;
let delta = getDelta(time);
//updateLines(delta)
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function getDelta(time)
{
let delta = isNaN(lastUpdate) ? 0 : time - lastUpdate;
lastUpdate = time;
delta = Math.min(12, Math.max(delta, 0));
return delta;
}
function setLineColor(colorArr, i)
{
const color = getRandomColor();
colorArr[i * 3] = color.r;//Math.random(); // Red
colorArr[i * 3 + 1] = color.g; // Green
colorArr[i * 3 + 2] = color.b; // Blue
}
function getRandomColor()
{
const r = Math.random();
const g = Math.random();
const b = Math.random();
return new Three.Color(r,g,b);
}