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，可以实现播放器的所有功能：（视屏素材只是个例子，大家可以替换成监控视屏或其他）
![在这里插入图片描述]()
2. 另一种使用开源的视屏播放插件
基于平面添加视频
我们在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智能仓库——第五章: 点我跳转.