随着mono-design不断推广,用户越来越多,陆续有电话来询问“为什么3D展现的时候,是一团黑?”,针对这个问题,专门写个帖子说明原因并给出解决方案,并且在mono-design编辑器中加了判断功能,同时链接到这里,不用等到发现一团黑时,才知道出问题。
好了,言归正传,开始分析问题:
当发现3D展现是一团黑的时候,在控制台如果看到“Unable to get image data from canvas because the canvas has been tainted by cross-origin data.”的错误提示,这是因为浏览器的安全策略,“同源策略”。浏览器为了阻止欺骗,会追踪 image data。当你把一个“跟canvas的域不同的”图片放到canvas上,这个canvas就成为 “tainted”(被污染的,脏的),浏览器就不让你操作该canvas 的任何像素。
这个问题有两种解决方案
方案一:有服务器环境,将项目部署在web服务器上,最简单的tomcat。
mono-design的目录中并直接移动到例如apache-tomcat-6.0.37\webapps\ROOT\下,然后浏览器打开后输入http://localhost/mono-design/即可。
方案二:设置浏览器
On Windows:
Chrome:
1、得到Chrome的安装路径,例如:
C:\Users\-your-user-name\AppData\Local\Google\Chrome\Application
2、在命令行窗口,输入安装路径,加上–allow-file-access-from-files参数,例如:
Chrome installation path\chrome.exe --allow-file-access-from-files
,回车执行,启动Chrome
3、测试的一个临时方法::复制一个Chrome的快捷方式,右键->属性->目标的文本框中加上参数
--allow-file-access-from-files
,例如:
"Chrome installation path\chrome.exe" --allow-file-access-from-files
IE11:默认可以加载本地图片
Firefox:
1、Firefox的用户请在浏览器的地址栏输入“about:config”,回车
2、在过滤器(filter)中搜索“security.fileuri.strict_origin_policy”
3、将security.fileuri.strict_origin_policy设置为false
4、关闭目前开启的所有Firefox窗口,然后重新启动Firefox。
On Mac:
Chrome:从命令行窗口中启动,启动命令为
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
Safari:
1、Safari->偏好设置->高级->勾选“在菜单栏中显示‘开发’菜单”
2、开发->勾选“启用WebGL”
3、开发->勾选“停用本地文件限制”
Firefox:
1、Firefox的用户请在浏览器的地址栏输入“about:config”,回车
2、在过滤器(filter)中搜索“security.fileuri.strict_origin_policy”
3、将security.fileuri.strict_origin_policy设置为false
4、关闭目前开启的所有Firefox窗口,然后重新启动Firefox。
相关推荐
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
unity打包webgl在本地浏览器打不开?可以查看我的文档,并下载此配置文件即可实现本地浏览unity网页
用于本地加载WebGL程序时使用的配置文件
正常打包WebGL后在浏览器直接运行会报以下这个错: It seems your browser does not support running Unity WebGL content from file:// urls. Please upload it to an http server, or try a different browser. ...
untiy webgl 打开 PDF文件
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...
本书?前可以?把?教你使用WebGL进行编程,?且在不断更 新。
Unity通用WebGL模板Universal WebGL Template 1.2.1 仅供学习,请勿商用。
Unity Webgl播放直播功能源码及运行文件
webgl代码,B站资源。
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统...
webGL开发代码教程 提供兴趣者学习学习学习 资源共享
效果超棒的Webgl模型-
webGl介绍, 调研收集, 此资源主要针对我的博客文章的附件:
支持Webgl自动播放视频,支持unity2019以上版本,强烈推荐
Better-Minimal-WebGL-Template unity webgl打包模板 支持手机
1.unity高版本视频播放插件; 2.UMP Pro Android iOS支持资源包;
WebGL Programming Guide Interactive 3D Graphics Programming with WebGL 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
webgl文档开发教程