ThreeJs技术交流（4）——Unity3D与ThreeJS、以及在3D场景中添加视频

  • Unity3D和ThreeJS
  • 在3D场景中添加视频
  • 基于平面添加视频
  • 基于video.js视屏控件添加视频
  • 结束语


Unity3D和ThreeJS

最近我正在学习Unity3D，ThreeJS的文章可能更新地会比较慢一点。其实Unity3D和ThreeJS既有相同点又有很大的区别，前者是世界首屈一指的3D游戏引擎，展现出来的效果远比ThreeJS强大，但是学习时间比较长，需要懂得很多计算机图形学的知识，还要有C#的编程基础。我在B站上看的教学视频就有两三百节，感觉足够我学几个月了。。。
而ThreeJS作为一个JS库，极大地封装了计算机图形学的概念，像我一开始啥也不知道，也可以照着例子装模作样做出来个什么东西。但其本身运行在网页端，限于浏览器的性能，实现的模型场景比较简陋。大家可以看我截的下面两张图，可见其渲染能力的巨大差距。

1.使用Unity3D构建的校园走廊

threeJS 加载 unity prefab unity threejs 结合_ide


2.使用ThreeJS构建的3D仓库demo

threeJS 加载 unity prefab unity threejs 结合_3D_02

在3D场景中添加视频

网站演示，已上传最新版本，大家可以访问下面的链接查看演示
3D仓库演示最新代码和图片资源等已上传至GitHub
https:///xiao149/ThreeJsDemo

有些时候，厂区内装有监控摄像头。我们想要在ThreeJs构建的场景中要如何添加这个视屏呢？
这里我给出了两种解决方案：

  1. 一种基于平面的视屏如同下图：视屏直接作为一个平面添加到场景中，缺点是只能播放，无法实现快进倒退等视屏播放器的功能（视屏素材只是个例子，大家可以替换成监控视屏或其他）。 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>