策划案例网站,装饰设计公司资质,网站做一年了没做301,一级a做爰片视频网站#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️VideoTexture 视频纹理 二、…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️VideoTexture 视频纹理 二、使用VideoTexture实现视频VIDEO更新纹理1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中使用VideoTexture实现视频VIDEO更新纹理亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️VideoTexture 视频纹理
VideoTexture创建一个使用视频来作为贴图的纹理对象。 它和其基类Texture几乎是相同的除了它总是将needsUpdate设置为true以便使得贴图能够在视频播放时进行更新。自动创建mipmaps也会被禁用。 构造函数 VideoTexture( video : Video, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number ) video – 将被作为纹理贴图来使用的Video元素。 mapping – 纹理贴图将被如何应用映射到物体上它是THREE.UVMapping中的对象类型。 请参阅mapping constants映射模式常量来了解其他选项。 wrapS – 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants包裹模式常量来了解其他选项。 wrapT – 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants包裹模式常量来了解其他选项。 magFilter – 当一个纹素覆盖大于一个像素时贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants放大滤镜常量来了解其它选项。 minFilter – 当一个纹素覆盖小于一个像素时贴图将如何采样。 其默认值为THREE.LinearMipMapLinearFilter。请参阅minification filter constants缩小滤镜常量来了解其它选项。 format – 在纹理贴图中使用的格式。 请参阅format constants格式常量来了解各个选项。 type – 默认值是THREE.UnsignedByteType. 请参阅type constants类型常量来了解其他选项。 anisotropy – 沿着轴通过具有最高纹素密度的像素的采样数。 默认情况下这个值为1。设置一个较高的值将会比基本的mipmap产生更清晰的效果代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值这个值通常是2的幂。 属性 基类Texture共有属性。 方法 基类Texture共有方法。
二、使用VideoTexture实现视频VIDEO更新纹理
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set。4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.DirectionalLight平行光源设置平行光源位置设置平行光源投影scene添加平行光源。5、加载几何模型创建THREE.AxesHelper坐标辅助工具helperscene场景中加入helper。创建THREE.BoxGeometry立方体几何体geometry。通过document.querySelector(‘#video’)获取h5 video元素video。传入video参数创建THREE.VideoTexture视频贴图texture设置texture的水平和垂直包裹、采样。传入texture参数创建THREE.MeshBasicMaterial基础材质对象material。传入geometry、material参数创建THREE.Mesh网格对象scene场景中加入创建的网格对象。6、加入controls控制加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn59(使用VIDEOTEXTURE实现视频VIDEO更新纹理)/titlescript srclib/threejs/127/three.js-master/build/three.js/scriptscript srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/scriptscript srclib/js/Detector.js/script
/head
style typetext/csshtml, body {margin: 0;height: 100%;}canvas {display: block;}#video {position: fixed;left: 0;bottom: 0;}
/style
body onloaddraw()
video idvideo autoplay controlssource srcdata/video/sintel.ogv typevideo/ogg; codecstheora, vorbissource srcdata/video/sintel.mp4 typevideo/mp4; codecsavc1.42E01E, mp4a.40.2
/video
/body
scriptvar renderer, camera, scene, gui, light, stats, controlsvar initRender () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setClearColor(0xeeeeee)renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled truedocument.body.appendChild(renderer.domElement)}var initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 0, 15)}var initScene () {scene new THREE.Scene()}var initGui () {}var initLight () {scene.add(new THREE.AmbientLight(0x444444))light new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow truescene.add(light)}var initModel () {var helper new THREE.AxesHelper(50)scene.add(helper)var geometry new THREE.BoxGeometry(10, 5, 5)var video document.querySelector(#video)var texture new THREE.VideoTexture(video)texture.wrapS texture.wrapT THREE.RepeatWrappingtexture.minFilter THREE.LinearFiltermaterial new THREE.MeshBasicMaterial({map: texture})scene.add(new THREE.Mesh(geometry, material))}var initStats () {stats new Stats()document.body.appendChild(stats.dom)}var initControls () {controls new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping true}var render () {renderer.render(scene, camera)}var onWindowResize () {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate () {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw () {if(!Detector.webgl) Detector.addGetWebGLMessage()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize onWindowResize}
/script
/html效果如下
