THREE.VideoTexture失效的问题

最新推荐文章于 2023-08-24 14:43:54 发布
最新推荐文章于 2023-08-24 14:43:54 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： JS/THREE.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40245044/article/details/106426626
版权

最近发现之前用THREE.VideoTexture在模型网格上渲染视频的方法在一些机型上失效了，原因未知，主要在微信里。而且前几天还没有什么问题。

尝试了各种方法后也只能选择用一个笨方法代替：

首先将视频绘制在canvas上，然后用THREE.CanvasTexture作为纹理，当然视频需要设置x5-video-player-type="h5-page"。

 

 

艾黎先生
关注
专栏目录
移动端H5视频video开发兼容性总结
peade的博客
07-01 1358
在开发移动端视频video时，存在两个兼容性问题： 视频播放时全屏 视频播放时层级最高 视频播放时全屏 移动端浏览器在播放时，默认是全屏播放。改为内联播放方式为： ele.setAttribute('playsinline', props.options.playsinline); ele.setAttribute( 'webkit-playsinline', props.options.playsinline); ele.setAttribute('x5-video-player-type', 'h
three.js改全景3D房间，有一面要放视频，一直显示不出来，不知道是啥原因，有没有知道的啊。下面是代码
qq_41573447的博客
10-09 399
<!DOCTYPEhtml> <html> <head> <title>three.jscss3d-panorama</title> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1...
three.js 纹理贴图时图片加载失败
qq_38909255的博客
04-12 2204
原因：出现这个错误是因为不能直接用浏览器打开，需要放在服务器或本地服务器上面。 解决方案：前端起本地服务即可； 步骤一：安装http-serverr; npm install http-server -g 步骤二：进入文件目录，然后输入http-server -p 8080,启动服务； http-server -p 8080 步骤三：浏览器中访问localhost:8080 步骤四：选择需要打开的文件即可；效果如下： 总结：只要将其放在服务器下运行即可实现，可以直接使用w...
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1433
【代码】three.js材质纹理显示不出来（显示黑色）
THREE.js移动端全景视频
qq_40245044的博客
06-11 2165
创建video var video = document.createElement('video'); video.width = window.innerWidth; video.height = window.innerHeight; video.loop = true; //预加载 ...
three.js用视频输出作为纹理，使用VideoTexture视频纹理实现物体表面播放视频(vue中使用three.js81)
点燃火柴的博客
06-05 3278
使用VideoTexture视频纹理实现物体表面播放视频1.demo效果2. 实现要点2.1 使用标签引入视频资源2.2 创建视频纹理材质4. demo代码 1.demo效果 2. 实现要点 2.1 使用标签引入视频资源 在public目录下的index.html文件中通过< script >标签引入相关文件文件 <video id="video" style="display: none; position: absolute; left: 15px; top: 75px;" :src
Three.js - 用 VideoTexture 视频输出作为纹理
ithanmang
09-10 6830
1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html 效果 2、实现步骤 2.1、添加 video 标签 &amp;amp;amp;lt;video id=&amp;amp;quot;video&amp;amp;quot; autoplay loop muted&amp;amp;amp;gt; &amp;amp;amp;lt;sourc
threex.dynamictexture:处理动态生成纹理的three.js助手
06-02
Threex.dynamictexture 是一个。 它提供了一种处理动态生成纹理的简单方法。 灵感来自优秀的 ，它获得了 。 它主要用于在纹理中写入文本。 假设你有一个角色会说些什么，你可能想把它放在一个纹理中并在你的角色上方...
three.js 智慧城市模型
07-06
Three.js 提供了多种加载器，如 `THREE.OBJLoader` 和 `THREE.GLTFLoader`，它们负责异步加载并解析模型数据。 五、动画和交互 1. 时间线（Animation）：通过 `THREE.AnimationClip` 和 `THREE.AnimationMixer` ...
Three.js 画3维图形Demo
01-07
通过VideoTexture和VideoElement，可以实时地将视频流映射到物体表面，实现动态视觉效果。 在压缩包中的"threejsdemo"可能包含了以下内容：HTML文件用于设置页面结构和加载Three.js库，JavaScript文件用于创建和...
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
03-04
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
threejs 纹理流动_WebGL Three.js使用canvas内容做纹理（texture）
weixin_35724794的博客
12-31 629
JavaScript语言：JaveScriptBabelCoffeeScript确定var width = window.innerWidth,height = window.innerHeight / 2;var size = 128;var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');var ...
Three TextureLoader纹理贴图不显示图片（显示黑色）的原因分析
weixin_42718460的博客
09-16 1557
两种原因： 1、物体材质不对 代码： // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理 var textureLoader = new THREE.TextureLoader(); // 执行load方法，加载纹...
移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
weixin_30783913的博客
02-06 214
笔者接触移动前端快一年了，特将平时的一些笔记整理出来，希望能够给需要的人一些小小的帮助。同时也由于笔者的水平有限，虽说都是笔者遇到过使用过的，但文中可能也会出现一些问题或不严谨的地方，望各位指出，不胜感激！ 一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，要再加一层div设置 height:100%加overflow：h...
video使用，以及解决：网页刷新后，video视频无法播放
Sumbo_Z的博客
03-16 3779
我需要设置视频在网页打开后，视频自动加载出来，开始播放，并自动循环播放。 开始我的设置 <video id="videos" autoplay="autoplay" loop="loop"> <source type="video/mp4" src="https://s2.luckincoffeecdn.com/luckyweb/homepage/assets/ee2b34ad1ef22cf57bd1497e29639051.mp4"&g
ThreeJS入门篇11—移动3D 控帧
牟云飞的博客
01-22 947
渲染Render更像打印机，将我们前面“拍摄”的图像呈现在浏览器中，根据图像的拍摄方式不同，基于B/S的ThreeJS能够将不同的画面到PC/移动等设备，通过控制每秒帧的数量fbs保持流程的画面感，渲染器根据渲染的物体有不同的类型，多个类型可以组合使用： WebGLRenderer：按照webGL的规范进行渲染显示场景，这种渲染方式最常用 CSS3DRenderer：通过CSS3转换属性将分层的3D应用到DOM元素中，这种渲染方式不支持材质和几何体，只适合普通的DOM元素 CSS2DRender...
threejs纹理加载三（视频加载）
最新发布
baidu_41601048的博客
08-24 1404
threejs中除了能把图片作为纹理进行几何体贴图以外，还可以把视频作为纹理进行贴图设置。纹理的类型有很多，我们可以用不同的加载器来加载，而对于视频作为纹理，我们需要用到今天的主角：VideoTexture。我们先看效果
vue加载three模型成功，但显示黑屏？
空谷足音的博客
04-03 5055
遇到问题解决方案： 遇到问题：导入到场景内的模型无法查看，而且也没有报错 这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的： 1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。 2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看 获取模型的大小： // 获取模型大小 let box = new TH...
Three.js实战：Cookbook精华
8. **性能优化**：Three.js库考虑了性能问题，例如通过LOD（Level of Detail）技术动态调整物体的细节级别，以及使用精灵（Sprite）进行2D元素的渲染，以减少渲染开销。 9. **WebVR支持**：Three.js还支持WebVR，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

艾黎先生

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值