问题描述
Uncaught Error: image not loaded for security reasons (serve this page over "http://" instead)
at Function.Texture.fromImage (lightgl.js:1843)
at new Renderer (renderer.js:106)
at window.onload (main.js:65)解决方案
方案一、搭建网站访问
有服务器环境，将项目部署在web服务器上，最简单的tomcat。
方案二、内嵌图片资源
以WebGL-Water为例：
<!DOCTYPE html>
<html><head>
<title>WebGL Water</title>
<script src="lightgl.js">
</script>
<script src="cubemap.js"></script>
<script src="renderer.js"></script>
<script src="water.js"></script>
<script src="main.js"></script>
<style type="text/css">
* { -webkit-user-select: none;
-moz-user-select: none;
cursor: default; }
body { font: 13px/18px Arial,
sans-serif; background: black;
color: white;
overflow: hidden; }
img {
visibility: hidden;
}
</style>
</head><body>
<div id="loading">Loading...
<img id="tiles" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
<img id="xneg" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
<img id="xpos" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
<img id="ypos" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
<img id="zneg" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
<img id="zpos" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...">
</div>
</body></html>
