Open trusktr opened 2 years ago
Why is it not injecting a <script> for live reload?
<script>
This is the HTML file, and it arrives to the browser un-modified:
<title><lume-gltf-model></title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: white; touch-action: none; } </style> <lume-scene id="scene" perspective="800" webgl fog-mode="linear" fog-near="100" fog-far="500" fog-color="white"> <lume-ambient-light color="white" intensity="0.4"></lume-ambient-light> <lume-camera-rig active initial-distance="200" max-distance="700" min-distance="100"> <lume-point-light position="200 0 200" intensity="0.7" color="white" slot="camera-child"></lume-point-light> </lume-camera-rig> <lume-node position="0 1000 0"> <!-- FIXME mesh with manual behaviors not working initially. Change the has attribute to something else and back, then it works. Code load order issue. --> <!-- <lume-mesh has="shape-geometry phong-material" size="0 0 5" color="white" position="30 0 0" sidedness="double" receive-shadow="false"> --> <lume-shape size="30 60 5" color="red" position="-120 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="30 60 10" color="red" position="-50 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" fitment="contain" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="30 60 15" color="red" position="30 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" fitment="cover" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="30 60 15" color="red" position="50 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="10 60 15" color="red" position="100 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="30 10 15" color="red" position="120 0 0" mount-point="0.5 1" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> </lume-node> <lume-node position="0 10 0" scale="-1 1 1"> <lume-shape size="40 25 5" color="red" position="-120 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="40 25 10" color="red" position="-50 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" fitment="contain" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="40 25 15" color="red" position="0 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" fitment="cover" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="40 25 15" color="red" position="50 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="40 10 15" color="red" position="100 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> <lume-shape size="10 25 15" color="red" position="120 0 0" mount-point="0.5 0" sidedness="double" receive-shadow="false" fitment="scale-down" > <lume-box visible="false" has="basic-material" opacity="0.9" size-mode="proportional proportional proportional" size="1 1 1" wireframe ></lume-box> </lume-shape> </lume-node> <!-- prettier-ignore --> <!-- <test> <lume-mesh has="heart-2d-geometry phong-material" size="10 10 34" extrude shape-fit="contain"></lume-mesh> <lume-heart-2d size="10 10 34" extrude></lume-heart-2d> <lume-mesh has="path-shape-geometry phong-material" size="10 10 34" extrude shape-fit="contain" path="12.1 13, 5.3 16, 17 13"></lume-mesh> <lume-path-shape size="10 10 34" extrude shape-fit="contain" path="12.1 13, 5.3 16, 17 13"></lume-path-shape> </test> --> </lume-scene> <div class="ui"> <fieldset> <legend>Options</legend> <label> <input type="checkbox" onchange="updateSize()" /> Show size boundaries </label> <br /> <label> <input type="checkbox" onchange="updateBevel()" /> Bevel </label> </fieldset> </div> <script> let showSize = false const boxes = Array.from(document.querySelectorAll('lume-box')) function updateSize() { showSize = !showSize for (const box of boxes) box.visible = showSize } let bevel = false const hearts = Array.from(document.querySelectorAll('lume-shape')) function updateBevel() { bevel = !bevel console.log(bevel) for (const heart of hearts) { heart.bevel = bevel // if (bevel) heart.setAttribute('bevel', '') // else heart.removeAttribute('bevel') } } </script> <style> .ui { position: absolute; margin: 15px; padding: 10px; top: 0; left: 0; color: red; font-family: sans-serif; background: rgba(0, 0, 0, 0.1); border-radius: 7px; } fieldset legend { color: red; } fieldset { border-color: red; border-radius: 4px; } </style> <script src="global.js"></script> <script> // Define all the LUME elements with their default names. LUME.useDefaultNames() </script>
I discovered a bug: if the HTML file does not have a <body> then the script is not injected.
<body>
Ok, even with the script injected, it still does not live reload.
Why is it not injecting a
<script>
for live reload?This is the HTML file, and it arrives to the browser un-modified: