canvas.style('z-index', '-1'); no funciona con noscrollbars.css y rompió p5.easycam.js en Chrome. Estoy tratando de deshacerme de las barras de desplazamiento en un lienzo de ventana completo. esto funciona muy bien en Firefox pero rompe p5.easycam.js en Chrome, no obtengo errores en la consola. tal vez tiene algo que ver con node.js?
<!DOCTYPE html> <html> <link rel="stylesheet" href="noscrollbars.css"> <head> <meta charset="UTF-8" /> <script src="p5.js"></script> <script src="myscript.js"></script> <script src="p5.easycam.min.js"></script> </head> <body> <main> </main> </body> </html>noscrollbars.css
html, body { height: 100%; } body { margin: 0; display: flex; justify-content: center; align-items: center; }myscript.js (darle crédito a Paul Wheeler por señalar el error de la pregunta)
var canvas; var easycam; let CamState = { distance: 2000, center: [0,0,0], rotation: [1,0,0,0]}; function setup() { canvas = createCanvas(windowWidth, windowHeight, WEBGL); canvas.position(0, 0); canvas.style('z-index', '-1'); fill(255, 64, 0); easycam = createEasyCam(); easycam.setViewport([0, 0, windowWidth, windowHeight]); } function draw() { background(0); ambientLight(100, 100, 100); pointLight(255, 255, 255, -100, -100, 100); directionalLight(100, 100, 100, -1, 0.1, 0.8); box(150); } No lo sabía antes de publicar, pero supongo que varias capas de lienzo (en cromo) no se corresponden con el css que escribí y necesito aprender más sobre eso como canvas.style('z-index', '0'); obras
No puedo reproducir tu problema. Ejemplo ejecutable:
let easycam; function setup() { let c = createCanvas(windowWidth, windowHeight, WEBGL); c.style('z-index', '-1'); noStroke(); fill(255, 64, 0); easycam = createEasyCam(); easycam.setViewport([0, 0, windowWidth, windowHeight]); } function draw() { background(0); ambientLight(100, 100, 100); pointLight(255, 255, 255, -100, -100, 100); directionalLight(100, 100, 100, -1, 0.1, 0.8); box(150); } html, body { height: 100%; } body { margin: 0; display: flex; justify-content: center; align-items: center; } <!DOCTYPE html> <html> <link rel="stylesheet" href="test-link-before-head.css"> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://freshfork.github.io/p5.EasyCam/p5.easycam.js"></script> </head> <body> <main> </main> </body> </html>