THREE.VideoTexture失效的问题

最新推荐文章于 2023-08-24 14:43:54 发布
最新推荐文章于 2023-08-24 14:43:54 发布
阅读量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"。

 

 

艾黎先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Three.js - 用 VideoTexture 视频输出作为纹理
ithanmang
09-10 6731
1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html 效果 2、实现步骤 2.1、添加 video 标签 <video id="video" autoplay loop muted> <sourc
vue加载three模型成功，但显示黑屏？
空谷足音的博客
04-03 4902
遇到问题解决方案： 遇到问题：导入到场景内的模型无法查看，而且也没有报错 这种会有可能有多种情况造成的，一般情况下都是下面两种情况造成的： 1.模型太小或者太大，这种情况可以尝试放大一千倍或者缩小一千倍来查看效果。 2. 模型的位置太偏，根本不在相机照射范围内，这种问题我们可以将模型居中到相机照射的焦点位置看 获取模型的大小： // 获取模型大小 let box = new TH...
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
03-04
threejs video演示，从笔记本摄像头获取媒体流，将场景渲染在立方体上
video使用，以及解决：网页刷新后，video视频无法播放
Sumbo_Z的博客
03-16 3543
我需要设置视频在网页打开后，视频自动加载出来，开始播放，并自动循环播放。 开始我的设置 <video id="videos" autoplay="autoplay" loop="loop"> <source type="video/mp4" src="https://s2.luckincoffeecdn.com/luckyweb/homepage/assets/ee2b34ad1ef22cf57bd1497e29639051.mp4"&g
three.js材质纹理显示不出来（显示黑色）
Z_Gleng的博客
12-14 1322
【代码】three.js材质纹理显示不出来（显示黑色）
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
three.js. 3D机房项目
09-06
【标题】"three.js. 3D机房项目"是一个基于three.js库开发的三维可视化应用，主要用于模拟和展示数据中心的机房环境。这个项目利用WebGL技术在浏览器中渲染出逼真的3D场景，让操作者能够以第一人称视角或者上帝视角...
three.min.js 最全的版本
11-01
在实际使用"three.min.js"时，开发者需要注意优化问题，因为即使是压缩后的版本，也可能包含大量未使用的功能。为了减少加载时间，可以使用模块打包工具（如Webpack或Rollup）按需引入Three.js的部分功能，或者利用...
three.js的室内地图展示
05-21
在本项目中，我们主要探讨的是如何利用three.js库来实现一个室内地图的展示。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： ...
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
three.js改全景3D房间，有一面要放视频，一直显示不出来，不知道是啥原因，有没有知道的啊。下面是代码
qq_41573447的博客
10-09 391
<!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...
threejs纹理加载三（视频加载）
最新发布
baidu_41601048的博客
08-24 1322
threejs中除了能把图片作为纹理进行几何体贴图以外，还可以把视频作为纹理进行贴图设置。纹理的类型有很多，我们可以用不同的加载器来加载，而对于视频作为纹理，我们需要用到今天的主角：VideoTexture。我们先看效果
threejs 模型中指定材质更换为视频贴图
qq_43805885的博客
02-23 3009
threejs视频贴图
unity学习之VideoPlayer
liu_xueping的专栏
11-07 1929
unity VideoPlayer 黑屏
video-08-videojs黑屏问题（详解总结）
大雾起了清晨
06-30 2291
博主在开发的时候遇到这种情况，video黑屏问题，问题有两种情况，一种是视频黑屏且不可以播放，另一种是视频黑屏且自己播放，事件可以监听到
Three TextureLoader纹理贴图不显示图片（显示黑色）的原因分析
weixin_42718460的博客
09-16 1528
两种原因： 1、物体材质不对 代码： // 纹理贴图映射到一个矩形平面上 var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面 // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理 var textureLoader = new THREE.TextureLoader(); // 执行load方法，加载纹...
three.js用视频输出作为纹理，使用VideoTexture视频纹理实现物体表面播放视频(vue中使用three.js81)
点燃火柴的博客
06-05 3082
使用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 纹理贴图时图片加载失败
qq_38909255的博客
04-12 2130
原因：出现这个错误是因为不能直接用浏览器打开，需要放在服务器或本地服务器上面。 解决方案：前端起本地服务即可； 步骤一：安装http-serverr; npm install http-server -g 步骤二：进入文件目录，然后输入http-server -p 8080,启动服务； http-server -p 8080 步骤三：浏览器中访问localhost:8080 步骤四：选择需要打开的文件即可；效果如下： 总结：只要将其放在服务器下运行即可实现，可以直接使用w...
private async parseMaterial(osgStateSet: any) { let material = new THREE.MeshBasicMaterial({ // side: THREE.DoubleSide, }); //THREE.FrontSide 背面 // THREE.BackSide 前面 // THREE.DoubleSide 双面 let osgImage = osgStateSet.TextureAttributeList[0].value.StateAttribute.Image; // let texture = this.parseImage(osgImage); let fileName = osgImage.Name; const isJPEG = fileName.search(/.jpe?g($|?)/i) > 0; const isPNG = fileName.search(/.png($|?)/i) > 0; if (!isPNG && !isJPEG) { return; } let mimeType = isPNG ? 'image/png' : 'image/jpeg'; let imageUri: any = new Blob([osgImage.Data], { type: mimeType }); let base64 = await this.blobToBase64(imageUri); // debugger let imageUrl: any = URL.createObjectURL(imageUri); try { let texture = new THREE.TextureLoader().load(base64, () => { texture.needsUpdate = true; // texture.format = THREE.RGBAFormat; texture.type = THREE.UnsignedShort5551Type; texture.minFilter = THREE.LinearMipmapNearestFilter; texture.magFilter = THREE.LinearMipmapNearestFilter; texture.generateMipmaps = false; // texture.format = THREE.RGBAIntegerFormat; // texture.minFilter = THREE.NearestFilter; // texture.magFilter = THREE.NearestFilter; // texture.minFilter = THREE.LinearMipMapLinearFilter; // texture.magFilter = THREE.LinearFilter; // texture.wrapS = THREE.RepeatWrapping; // texture.wrapT = THREE.RepeatWrapping; // texture.anisotropy = 1; // texture.generateMipmaps = false; // texture.encoding = THREE.sRGBEncoding; }); imageUri = null; osgImage = null; imageUrl = null; if (texture) { material.map = texture; } } catch (e) { console.log('纹理加载出错', e); } osgStateSet = null; return material; } private blobToBase64(blob: any) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); // readAsDataURL fileReader.readAsDataURL(blob); fileReader.onload = (e: any) => { resolve(e.target.result); }; }); }没有显示base64图片的纹理，也没有报错，请找出问题，并给出详细代码
06-12
let texture = await new Promise<THREE.Texture>((resolve) => { let imageUrl = URL.createObjectURL(imageUri); new THREE.TextureLoader().load(imageUrl, (texture) => { // 在加载完成的回调函数中，手动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

艾黎先生

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

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

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

打赏作者

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

抵扣说明：

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

余额充值