threejs三维场景播放video视频mp4效果代码
代码语言:html
所属分类:多媒体
代码描述:threejs三维场景播放video视频mp4效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.58.js"></script> <video id="video" autoplay style="display:none;width:200px;" > <source src="//repo.bfw.wiki/bfwrepo/video/5d87680ae1bf6.mp4" codecs="avc1.42E01E, mp4a.40.2"> </video> <script> var AMOUNT = 100; var container; var camera, scene, renderer; var video, image, imageContext, imageReflection, imageReflectionContext, imageReflectionGradient, texture, textureReflection; var mesh; var mouseX = 0; var mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; //camera.position.y = 200; scene = new THREE.Scene(); video = document.getElementById('video'); image = document.createElement('canvas'); image.width = 480; image.height = 204; imageContext = image.getContext('2d'); imageContext.fillStyle = '#000000'; imageContext.fillRect(0, 0, 480, 204); texture = new THREE.Texture(image); texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true }); imageReflection = document.createElement('canvas'); imageReflection.width = 480; imageReflection.height = 204; imageReflectionContext = imageReflection.getContext('2d'); imageReflectionContext.fillStyle = '#000000'; imageReflectionContext.fillRect(0, 0, 480, 204); imageReflectionGradient = imageReflectionContext.createLinearGradient(0, 0, 0, 204); imageReflectionGradient.addColorStop(0.2, 'rgba(240, 240, 240, 1)'); imageReflectionGradient.addColorStop(1, 'rgba(240, 240, 240, 0.8)'); textureReflection = new THREE.Texture(imageReflection); textureReflection.minFilter = THREE.LinearFilter; textureReflection.magFilter = THREE.LinearFilter; var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection, side: TH.........完整代码请登录后点击上方下载按钮下载查看
网友评论0