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

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构建的场景中要如何添加这个视屏呢?
这里我给出了两种解决方案:

  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>

结束语

我跟广大学习ThreeJs的初学者一样,仍带着懵懂的心去探索这片新大陆,CSDN上的许多前辈都给了我很多关键的灵感和技术方法,如果大家有兴趣,也可以互相交流成长,欢迎大家指导咨询。PS:大家有兴趣可以点进去我的头像,陆陆续续也写了十来篇了。
链接:使用ThreeJs从零开始构建3D智能仓库——第一章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第二章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第三章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第四章: 点我跳转.
链接:使用ThreeJs从零开始构建3D智能仓库——第五章: 点我跳转.

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页