ThreeJs技术交流(4)——Unity3D与ThreeJS、以及在3D场景中添加视频
Unity3D和ThreeJS
最近我正在学习Unity3D,ThreeJS的文章可能更新地会比较慢一点。其实Unity3D和ThreeJS既有相同点又有很大的区别,前者是世界首屈一指的3D游戏引擎,展现出来的效果远比ThreeJS强大,但是学习时间比较长,需要懂得很多计算机图形学的知识,还要有C#的编程基础。我在B站上看的教学视频就有两三百节,感觉足够我学几个月了。。。
而ThreeJS作为一个JS库,极大地封装了计算机图形学的概念,像我一开始啥也不知道,也可以照着例子装模作样做出来个什么东西。但其本身运行在网页端,限于浏览器的性能,实现的模型场景比较简陋。大家可以看我截的下面两张图,可见其渲染能力的巨大差距。
1.使用Unity3D构建的校园走廊
2.使用ThreeJS构建的3D仓库demo
在3D场景中添加视频
网站演示,已上传最新版本,大家可以访问下面的链接查看演示
3D仓库演示
最新代码和图片资源等已上传至GitHub
https://github.com/xiao149/ThreeJsDemo
有些时候,厂区内装有监控摄像头。我们想要在ThreeJs构建的场景中要如何添加这个视屏呢?
这里我给出了两种解决方案:
- 一种基于平面的视屏如同下图:视屏直接作为一个平面添加到场景中,缺点是只能播放,无法实现快进倒退等视屏播放器的功能(视屏素材只是个例子,大家可以替换成监控视屏或其他)。
2. 另一种使用开源的视屏播放插件
video.js
,可以实现播放器的所有功能:(视屏素材只是个例子,大家可以替换成监控视屏或其他)
基于平面添加视频
我们在Module.js
文件中加入下述方法:x,y,z是视屏平面的坐标位置;width,length是平面的长宽;videoId 是HTML中建立的视屏div的ID
//region 放置视频面板
function addVideoPlane( x,y,z,width,length,scene,videoId ) {
var planeGeometry = new THREE.PlaneGeometry(width, length);
var material = new THREE.MeshPhongMaterial();
material.side = THREE.DoubleSide;
var video = document.getElementById(videoId);
var texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
material.map = texture;
var mesh = new THREE.Mesh(planeGeometry, material);
mesh.position.set(x,y,z);
scene.add(mesh);
}
//endregion
基于video.js视屏控件添加视频
这个画面我是单独开了一个HTML,名称是#3DVideo.html
,大家也可以在我的Github上找到。
代码很简单,我就不多说了。
<!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 {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#my-video {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="./ThreeJs/js/three.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" autoplay loop data-setup="{}" crossorigin="anonymous">
<source src="./video/video.mp4"/>
</video>
</body>
</html>
结束语
我跟广大学习ThreeJs的初学者一样,仍带着懵懂的心去探索这片新大陆,CSDN上的许多前辈都给了我很多关键的灵感和技术方法,如果大家有兴趣,也可以互相交流成长,欢迎大家指导咨询。PS:大家有兴趣可以点进去我的头像,陆陆续续也写了十来篇了。
链接:使用ThreeJs从零开始构建3D智能仓库——第一章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第二章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第三章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第四章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第五章: 点我跳转.