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智能倉庫——第五章: 點我跳轉.