h5 增加iframe 嵌套three.js网页不显示

本文详细记录了在iframe中正确加载并显示Three.js相关内容的步骤与遇到的问题,包括解决iframe显示默认隐藏、图片纹理加载失败等挑战。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<iframe style="height:100%;width:100%;"  src="./3d.html">

始终不限时内容,
增加iframe允许运行script脚本属性:sandbox=“allow-scripts”
并且将 src放在最后

<iframe style="height:100%;width:100%;" sandbox="allow-scripts"  src="./3d.html">

ok,网页开始执行

下一步开始进行three.js报错,继续!

继续:
发现依然不能显示,多次实验后发现,ifreame所在的div是默认隐藏的,问题在这
所以直接找到了显示该div的script语句

 $("#video-section").show();
$("#input-container").hide();

加上一句:

$("#video-section").show();
document.getElementById('ar_ifream').src='./3d.html';   //显示隐藏的vid中的ifream
$("#input-container").hide();

ok,搞定!!!

下一个问题,
用ifream 展示three.js显示的时候,使用图片纹理,是黑的~~
在这里插入图片描述
但是直接打开ifream引用的网页,图片纹理可以显示

继续,继续!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

齐天大疯子

为别人的付出付费,必将轮回自己

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值