CN110458929B - 一种基于Three.js的室内布景渲染方法及系统 - Google Patents

一种基于Three.js的室内布景渲染方法及系统 Download PDF

Info

Publication number
CN110458929B
CN110458929B CN201910740787.8A CN201910740787A CN110458929B CN 110458929 B CN110458929 B CN 110458929B CN 201910740787 A CN201910740787 A CN 201910740787A CN 110458929 B CN110458929 B CN 110458929B
Authority
CN
China
Prior art keywords
coordinate axis
scene
camera
coordinate
picture
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910740787.8A
Other languages
English (en)
Other versions
CN110458929A (zh
Inventor
陈登峰
张温
王帅举
耿建勤
肖海燕
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xian University of Architecture and Technology
Original Assignee
Xian University of Architecture and Technology
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xian University of Architecture and Technology filed Critical Xian University of Architecture and Technology
Priority to CN201910740787.8A priority Critical patent/CN110458929B/zh
Publication of CN110458929A publication Critical patent/CN110458929A/zh
Application granted granted Critical
Publication of CN110458929B publication Critical patent/CN110458929B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/21—Design or setup of recognition systems or techniques; Extraction of features in feature space; Blind source separation
    • G06F18/214—Generating training patterns; Bootstrap methods, e.g. bagging or boosting
    • G06F18/2148—Generating training patterns; Bootstrap methods, e.g. bagging or boosting characterised by the process organisation or structure, e.g. boosting cascade
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/24—Classification techniques
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/011—Arrangements for interaction with the human body, e.g. for user immersion in virtual reality
    • G06F3/013—Eye tracking input arrangements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/04—Texture mapping
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/006—Mixed reality
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V40/00—Recognition of biometric, human-related or animal-related patterns in image or video data
    • G06V40/10—Human or animal bodies, e.g. vehicle occupants or pedestrians; Body parts, e.g. hands
    • G06V40/18—Eye characteristics, e.g. of the iris
    • G06V40/19—Sensors therefor

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Graphics (AREA)
  • Evolutionary Biology (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Evolutionary Computation (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Human Computer Interaction (AREA)
  • Computer Hardware Design (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • General Health & Medical Sciences (AREA)
  • Ophthalmology & Optometry (AREA)
  • Multimedia (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种基于Three.js的室内布景渲染方法及系统，包括：通过摄像相机对检测区域的人员进行监测；当检测区域有人员时，通过OpenCV的级联分类器检测出人脸区域，获得人脸信息；根据检测到的人脸信息结合人眼定位识别算法定出外坐标轴；外坐标轴与Three.js中的相机坐标轴关联；根据外坐标轴分别定出人员双眼的位置坐标；根据人的移动状况，用人眼跟踪算法不断更新眼睛的位置坐标；然后获取场景图片，并将其存储于服务器；在客户端进行场景构建，利用Three.js框架进行Web开发；客户端与服务器通信，最后将开发的结果在显示屏上展示，完成室内布景渲染。本发明可实现一个无需眼镜的VR效果。

Description

一种基于Three.js的室内布景渲染方法及系统
技术领域
本发明属于互联网领域，涉及到OpenCV中的级联分类器的应用和人眼定位识别算法、人眼跟踪算法领域，特别涉及一种基于Three.js的室内布景渲染方法及系统。
背景技术
随着社会经济水平的不断提高和科技的飞速发展，人们的生活水平也在不断的提高。人们生活质量的不断提高，使得对生活环境的要求也不断提高，更加重视人与居住环境的协调。在家庭生活中，人们往往会在室内养殖一些景观植物，或者在墙壁上增加一些相框艺术照，来改善室内的气体环境同时也改善了心情，一个恰到好处的景观布置可以在一定程度上提高人们的身心健康，给人们带来无与伦比的感受。
然而，通过种植景观植物的方法对室内需要对植物进行养护，此过程会耗费一定的时间和精力。进一步需要解决的问题是，在墙壁上增加一些相框艺术照可以为室内增加艺术气息，但长时间观看单一的静态图会造成审美疲劳，不仅无法改善心情，反而可能会造成相反的结果。
综上，亟需一种新的基于Three.js的室内布景渲染方法。
发明内容
本发明的目的在于提供一种基于Three.js的室内布景渲染方法及系统，以解决上述存在的一个或多个技术问题。
为达到上述目的，本发明采用以下技术方案：
一种基于Three.js的室内布景渲染方法，包括：
通过摄像相机对检测区域的人员进行监测；
当检测区域有人员时，通过OpenCV的级联分类器检测出人脸区域，获得人脸信息；
根据检测到的人脸信息结合人眼定位识别算法定出外坐标轴；外坐标轴与Three.js中的相机坐标轴关联；
根据外坐标轴分别定出人员双眼的位置坐标(x1,y1,z1)，(x2,y2,z2)，并计算出双眼的中心坐标((x1+x2)/2,(y1+y2)/2，(z1+z2)/2)；
根据人的移动状况，用人眼跟踪算法不断更新眼睛的位置坐标；
然后获取场景图片，并将其存储于服务器；
在客户端进行场景构建，利用Three.js框架进行Web开发；客户端与服务器通信，最后将开发的结果在显示屏上展示，完成室内布景渲染。
进一步地，设置识别区域为Three.js中设置的立方体一半的尺寸；外坐标轴中心点与Three.js中立方体中心点相对应，外坐标轴的坐标轴方向也与Three.js中坐标轴相对应；外坐标轴与Three.js中的相机坐标轴相关联后，人眼中心点在外坐标轴的位置坐标为相机在Three.js中坐标轴的位置坐标。
进一步地，人眼识别定位算法的识别区域为5m*2.5m*3m；Three.js中的坐标轴中心点位于创建的盒子中心，外坐标轴的中心点位于识别区域的2.5m*2.5m*1.5m处。
进一步地，Three.js相机的视点通过计算两只眼睛的角度定位：当arctan((z1-z2)/(x1-x2))＝π/4，视点坐标(camera.lookAt)为六面体右侧面中心点；当arctan((z1-z2)/(x1-x2))＝-π/4时，视点坐标为六面体左侧面中心点；当arctan((z1-z2)/(x1-x2))＝0时，视点坐标为六面体背面中心点。
进一步地，获取场景图片的步骤具体包括：
(1)通过鱼眼相机拍摄得到球型图片，通过AS3编程将其转换成六张大小相同的矩形图片；
(2)在3D Max中，通过指定一个视点位置，将场景渲染到六个图片上，生成六幅大小相同的图，完成场景图片的获取。
进一步地，利用Three.js框架进行Web开发的步骤具体包括：
S1：获取图片，并将其储存在服务器中；所述图片包括上下左右前后6个面的图片；
S2：利用WebGL技术中的Three.js库进行页面开发，将步骤S1获取的图片在客户端的浏览器上展示；
S3：在three.js库的开发中嵌入OrbitControls.js，实现图片与用户之间的交互。
进一步地，客户端与服务器通过TCP协议进行通信。
进一步地，Web开发中，贴图时使用UV映射的方法进行粘贴。
一种基于Three.js的室内布景渲染系统，包括：
数据采集模块，用于采集获取检测区域的人员位置信息；
数据处理模块，用于根据人员位置信息，再利用OpenCV中的级联分类器检测出人脸区域，根据检测到的人脸信息通过人眼定位识别算法定出一个外坐标轴用于坐标定位，分别定出人的左右两只眼睛的位置坐标(x1,y1,z1)和(x2,y2,z2)，并计算出中心坐标((x1+x2)/2，(y1+y2)/2，(z1+z2)/2)；然后，根据人的移动，用人眼跟踪算法不断的更新眼睛的位置坐标；
场景图片获取模块，用于获取场景图片；
服务器，用于存储信息，并与客户端通信；其中，存储的信息包括位置坐标和场景图片信息；
客户端，用于Web界面的开发；所述Web界面的开发基于Three.js库；
显示模块，用于显示渲染的效果。
进一步地，数据采集模块包括两个摄像机；显示模块包括电视屏。
与现有技术相比，本发明具有以下有益效果：
本发明通过人眼识别定位算法定出人眼睛的位置，并将其与Three.js中的摄像机坐标关联，通过人眼跟踪算法对人的眼睛进行追踪并不断更新人眼坐标，通过人眼位置的改变控制相机坐标的变化，达到人与Web页面交互的目的，实现虚拟现实的效果；同时，解决了种植景观植物改变室内环境浪费时间精力的问题，
进一步地，本发明通过摄像机对人的位置信息的采集，再利用OpenCV中的级联分类器检测出人脸区域，根据检测到的人脸信息，通过人眼识别定位算法定出一个外坐标轴，将其与Three.js中的相机坐标轴相对应，并检测出眼睛在坐标轴上的位置坐标，然后用人眼跟踪算法对坐标的变化实时更新，根据人眼坐标的变化，在客户端中用WebGL技术对Web页面进行开发，最终实现一个无需眼镜的VR效果。
本发明可通过image:THREE.ImageUtils.loadTexture(url)调用服务器中存储的图片，达到场景更换的目的，然后将客户端开发的结果通过连接线转接至电视屏播放。
本发明的系统，可实现一个无需眼镜的VR效果。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面对实施例或现有技术描述中所需要使用的附图做简单的介绍；显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来说，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例的一种基于Three.js的室内布景渲染方法的流程示意框图；
图2是本发明实施例中，外坐标轴与相机坐标轴关联示意图；
图3是本发明实施例中，相机与眼睛视角示意图；
图4是本发明实施例中，Web页面开发的流程示意框图。
具体实施方式
为使本发明实施例的目的、技术效果及技术方案更加清楚，下面结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述；显然，所描述的实施例是本发明一部分实施例。基于本发明公开的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的其它实施例，都应属于本发明保护的范围。
本发明的一种基于Three.js的室内布景渲染方法，包括如下步骤：
(1)两架摄像机分别放置于电视屏两侧，并连接服务器，采集人眼睛的位置信息。
(2)通过OpenCV的级联分类器检测出人脸区域，根据检测到的人脸信息结合人眼定位识别算法定出一个外坐标轴，外坐标轴的中心点位于识别区域的2.5m*2.5m*1.5m处，与Three.js中的相机坐标轴相关联。根据外坐标轴分别定出两只眼睛的位置坐标(x1,y1,z1)，(x2,y2,z2)，并计算出双眼的中心坐标((x1+x2)/2,(y1+y2)/2，(z1+z2)/2)。
(3)根据人的移动状况，用人眼跟踪算法不断的更新眼睛的位置坐标。
(4)获取图片，包括上下左右前后6个面的图片，6张图片的大小一致，并将其储存在服务器中。
优选的，图片的获取方式如下：
1)通过鱼眼相机拍摄得到球型图片，通过AS3编程将其转换成六张大小相同的矩形图片。
2)利用3D Max中的功能，在3D Max中，可以通过指定一个视点位置，将场景渲染到六个图片上，生成六幅图。
使用封装库对Web界面的设计开发。WebGL中只提供了一些简单的API，Three.js是对WebGL的封装，是开源的Javascript库，里面包含了大量的常用API，直接调用Three.js库中的函数，可以大幅度提升界面开发效率。
创建设计部分会用到的全局变量，Three.js中不可缺少的三部分：scene(场景)、camera(相机)、render(渲染器)。
创建灯光，调用函数light＝new THREE.DirectionalLight()；设置灯光可以更加清晰的看到场景中的物体。其中DirectionalLight为定向光，类似于太阳光。函数的括号中可设置灯光的属性，包括光颜色，光源的强度，光线的强度，光的颜色通常设置为0xffffff，光源的强度为1.0，光线强度设为默认值即可。
创建相机，选用透视相机THREE.PerspectiveCamera()，函数括号内包含四个属性分别为：相机视角fov，纵横比aspect，(通常设置为width/height)，最近观测距离near，和最远观测距离far。本发明中四个属性分别设置为THREE.PerspectiveCamera(75,width/height,1,2500)，根据坐标轴的对应关系，相机位置与人眼中心位置坐标相匹配，设置为camera.position((x1+x2)/2，(y1+y2)/2，(z1+z2)/2))，相机的视点通过计算两只眼睛的角度定位：当arctan((z1-z2)/(x1-x2))≥π/4，视点坐标(camera.lookAt)为六面体右侧面中心点250,0,0)；当arctan((z1-z2)/(x1-x2))≤-π/4时，视点坐标为六面体左侧面中心点(-250,0,0)；当arctan((z1-z2)/(x1-x2))＝0时，视点坐标为六面体背面中心点(0,0,-250)。
设置相机控件，实现相机的任意角度旋转controls＝new THREE.OrbitControls(camera,renderer.domElement)。
将渲染器属性antialias设置为true。
创建立方体，Geometry＝new THREE.BoxGeometry()；括号内为立方体的长、宽、高属性，设置5000,5000,3000。
设置立方体材质为new THREE.MeshBasicMaterial；即网格状的盒子模型。
设置文件路径path，路径名称为存储图片的文件夹。
设置数组获取对象，directions＝["px","nx","py","ny","pz","nz"]，其中"px","nx","py","ny","pz","nz"分别代表图片放在盒子对应的右，左，上，下，前，后。
设置图片格式，var＝format＝".jpg"。
通过map:THREE.ImageUtils.loadTexture(path+directions[i]+format)函数将图片纹理贴上。
贴图时使用UV映射的方法进行粘贴，可以有效的处理立方体的边缘接缝问题。
通过side:THREE.BackSide设置镜像翻转的效果，便于盒子内部观看图片。
利用scene.add()函数，将天空盒子添加到场景中。
加入controls.update()，对相机实时更新。
加入renderer.render(scene,camera)，对场景和相机进行实时渲染。
调用requestAnimationFrame，对render()和data()进行循环渲染。
将编好的代码在服务器中部署。
用浏览器打开服务器中的代码，在客户端进行场景展示。
客户端通过连接线将其转接至电视屏进行展示。
综上所述，针对现阶段室内布景中采用种植景观植物的方法浪费时间精力的问题，布置单一的壁画改善房间长时间会引起审美疲劳的问题，以及现阶段观看3D效果需佩戴特殊眼镜的问题，本发明提出了一种基于Three.js的室内布景渲染方法，通过WebGL技术和一些算法的结合，最终实现无需特殊眼镜即可观看的VR的交互效果，同时解决家庭布景中的问题。本发明通过人眼识别定位算法定出人眼睛的位置并将其与Three.js中的摄像机坐标关联，通过人眼跟踪算法对人的眼睛进行追踪并不断更新人眼坐标，通过人眼位置的改变控制相机坐标的变化，达到人与Web页面交互的目的，实现虚拟现实的效果。同时，解决了种植景观植物改变室内环境浪费时间精力的问题，且可通过image:THREE.ImageUtils.loadTexture(url)调用服务器中存储的图片达到场景更换的目的，解决长时间观看产生审美疲劳的问题。
本发明提出的基于Three.js的室内布景渲染方法中，Three.js是对WebGL的一个封装，是面向物联网3D可视化开发的开源Javascript库。WebGL是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，且无需使用插件。Three.js作为WebGL框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求。WebGL技术可实现用户与Web端的交互，通过对Web页面的开发可实现虚拟现实的目的。
本发明通过摄像机对人的位置信息的采集，再利用OpenCV中的级联分类器检测出人脸区域，根据检测到的人脸信息，通过人眼识别定位算法定出一个外坐标轴，将其与Three.js中的相机坐标轴相对应，并检测出眼睛在坐标轴上的位置坐标，然后用人眼跟踪算法对坐标的变化实时更新，根据人眼坐标的变化，在客户端中用WebGL技术对Web页面进行开发，最终实现一个无需眼镜的VR效果，且可通过image:THREE.ImageUtils.loadTexture(url)调用服务器中存储的图片，达到场景更换的目的，然后将客户端开发的结果通过连接线转接至电视屏播放。
实施例
请参阅图1，图1为本发明实施例的总体结构框图。首先，通过摄像相机对检测区域的人员进行监测，当检测区域有人员时，通过OpenCV的级联分类器检测出人脸区域，根据检测到的人脸信息结合人眼识别定位算法定出一个外坐标轴，外坐标轴的中心点位于识别区域2.5m*2.5m*1.5m处，坐标方向与Three.js中的相机坐标轴相关联。根据外坐标轴分别定出两只眼睛的位置坐标(x1,y1,z1)，(x2,y2,z2)，并计算出双眼的中心坐标((x1+x2)/2，(y1+y2)/2，(z1+z2)/2)；结合人眼跟踪算法根据人眼睛的移动情况对人眼位置坐标实时更新；然后获取场景图片，并将其存储于服务器；在客户端进行场景构建，利用Three.js框架进行Web开发，最后将开发的结果在显示屏上展示。
请参阅图2，图2为外坐标轴与Three.js中的相机坐标轴关联图，具体为：设置识别区域，即为Three.js中设置的立方体一半的尺寸，外坐标轴中心点位于识别区域2.5m*2.5m*1.5m处，与Three.js中立方体中心点(坐标轴中心点位置)相对应，坐标轴的方向也与Three.js中坐标轴相对应。外坐标轴与Three.js中的相机坐标轴相关联后，人眼中心点在外坐标轴的位置坐标即为相机在Three.js中坐标轴的位置坐标。
摄像机与服务器相连，服务器用于存储信息，包括摄像机检测到的位置信息和获取的图片等。服务器和客户端相连，客户端用于Web界面的开发设计，可通过TCP协议与服务器通信，获取所需信息。客户端通过专用链接线连接屏幕，将开发内容在屏幕上展示。
请参阅图4，图4为本发明Web页面开发部分的框图，具体开发步骤如下:
获取图片，包括上下左右前后6个面的图片，6张图片的大小一致，并将其储存在服务器中。
图片的获取方式如下：
1)通过鱼眼相机拍摄得到球型图片，通过AS3编程将其转换成六张大小相同的矩形图片。
2)利用3D Max中的功能，在3D Max中，可通过指定一个视点位置，将场景渲染到六个图片上，生成六幅图。
使用封装库对Web界面的设计开发。WebGL中只提供了一些简单的API，Three.js是对WebGL的封装，是开源Javascript库，里面包含了大量的常用API，直接调用Three.js库中的函数，可以大幅度提升界面开发效率。
创建设计部分会用到的全局变量，Three.js中不可缺少的三部分：scene(场景)、camera(相机)、render(渲染器)。
创建灯光，调用函数light＝new THREE.DirectionalLight()；设置灯光可以更加清晰的看到场景中的物体。其中DirectionalLight为定向光，类似于太阳光。函数的括号中可设置灯光的属性，包括光颜色，光源的强度，光线的强度，光的颜色通常设置为0xffffff，光源的强度为1.0，光线强度设为默认值即可。
设置相机，选用透视相机THREE.PerspectiveCamera(),函数括号内包含四个属性分别为：相机视角fov，纵横比aspect，(通常设置为width/height)，最近观测距离near，和最远观测距离far。本发明中四个属性分别设置为THREE.PerspectiveCamera(75,width/height,1,2500)，根据坐标轴的对应关系，相机位置与人眼中心位置坐标相匹配，设置为camera.position((x1+x2)/2，(y1+y2)/2，(z1+z2)/2)，相机的视点通过计算两只眼睛的角度定位：当arctan((z1-z2)/(x1-x2))≥π/4，视点坐标(camera.lookAt)为六面体右侧面中心点(250,150，0)；当arctan((z1-z2)/(x1-x2))≤-π/4时，视点坐标为六面体左侧面中心点(-250,150,0)；当arctan((z1-z2)/(x1-x2))＝0时，视点坐标为六面体背面中心点(0，150，-250)。
设置相机控件，实现相机的任意角度旋转controls＝newTHREE.OrbitControls(camera,renderer.domElement)。
将渲染器属性antialias设置为true。创建天空盒子，Geometry＝newTHREE.BoxGeometry()；括号内为盒子的长、宽、高，设置为600,400,300。设置盒子材质为newTHREE.MeshBasicMaterial；即网格状的盒子模型。设置文件路径path，路径为存储图片的文件夹。设置数组获取对象，directions＝["px","nx","py","ny","pz","nz"]，其中"px","nx","py","ny","pz","nz"分别代表图片放在盒子对应的右，左，上，下，前，后。
设置图片格式，var＝format＝".jpg"。通过map:THREE.ImageUtils.loadTexture(path+directions[i]+format)函数将图片纹理贴上。
贴图时使用UV映射的方法进行粘贴，可以有效的处理立方体的边缘接缝问题。
通过side:THREE.BackSide设置镜像翻转的效果，便于盒子内部观看图片。利用scene.add()函数，将天空盒子添加到场景中。
加入controls.update()，对相机实时更新。加入renderer.render(scene,camera)，对场景和相机进行实时渲染。
调用requestAnimationFrame，对render()和data()进行循环渲染。将编好的代码在服务器中部署。
用浏览器打开服务器中的代码，在客户端进行场景展示。
客户端通过连接线将其转接至电视屏进行展示。
综上所述，本发明实施例公开一种基于Three.js的室内布景渲染方法，用OpenCV中的级联分类器检测出人脸区域，再用人眼定位识别算法定出一个外坐标轴，分别定出人两只眼睛的在坐标轴上的位置坐标，并计算出其中心坐标，将中心坐标与Three.js中相机坐标相关联，并用人眼跟踪算法对人的眼睛位置跟踪，实时更新眼睛位置坐标，结合Three.js对Web页面的开发，达到人与计算机的交互的目的，实现无需眼镜便可虚拟现实的VR效果。此方法通过多种算法的结合，解决了家庭室内布景中存在的问题，是一种很好的创新方法。
本发明的一种基于Three.js的室内布景渲染系统，包括：数据采集模块、显示模块、客户端、服务器。
数据采集模块用于采集信息，并将采集到的信息反馈到服务器处理；数据采集模块包括两个摄像机；
显示模块用于效果展示；显示模块包括SX QLED电视屏The Wall，连接线；
客户端用于对Web界面的开发设计以及与服务器的通信；
服务器用于存储信息。
其中，数据采集模块利用摄像机采集人的位置信息，再利用OpenCV中的级联分类器检测出人脸区域，根据检测到的人脸信息通过人眼定位识别算法定出一个外坐标轴用于坐标定位，分别定出人的左右两只眼睛的位置坐标(x1,y1,z1)和(x2,y2,z2)，并计算出中心坐标((x1+x2)/2，(y1+y2)/2，(z1+z2)/2),然后，根据人的移动，用人眼跟踪算法不断的更新眼睛的位置坐标。
人眼识别定位算法的识别区域为5m*2.5m*3m，外坐标轴与Three.js中的坐标轴相对应。Three.js中的坐标轴中心点位于创建的盒子中心，外坐标轴的中心点位于识别区域的
2.5m*2.5m*1.5m处。
Three.js相机的视点通过计算两只眼睛的角度定位：当arctan((z1-z2)/(x1-x2))＝π/4，视点坐标(camera.lookAt)为六面体右侧面中心点；当arctan((z1-z2)/(x1-x2))＝-π/4时，视点坐标为六面体左侧面中心点；当arctan((z1-z2)/(x1-x2))＝0时，视点坐标为六面体背面中心点。
相机的坐标与人眼中心坐标相对应为(((x1+x2)/2，(y1+y2)/2，(z1+z2)/2))，并根据人眼坐标的变化更新相机坐标。
客户端与服务器通过TCP协议进行通信。
Web界面设计开发包括如下步骤：
S1：获取图片，包括上下左右前后6个面的图片，并将其储存在服务器中。
S2：利用WebGL技术中的Three.js库进行页面开发，将获取的图片在客户端的浏览器上展示。
S3：在three.js库的开发中嵌入OrbitControls.js，即轨道控制器，实现图片与用户之间的交互。
其中，获取图片时包括：
1)通过鱼眼相机拍摄得到球型图片，通过AS3编程将其转换成六张大小相同的矩形图片。
2)利用3D Max中的一个功能，在3D Max中，可以通过指定一个视点位置，将场景渲染到六个图片上，生成六幅大小相同的图。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员依然可以对本发明的具体实施方式进行修改或者等同替换，这些未脱离本发明精神和范围的任何修改或者等同替换，均在申请待批的本发明的权利要求保护范围之内。

Claims (10)

1.一种基于Three.js的室内布景渲染方法，其特征在于，包括：
通过摄像相机对检测区域的人员进行监测；
当检测区域有人员时，通过OpenCV的级联分类器检测出人脸区域，获得人脸信息；
根据检测到的人脸信息结合人眼定位识别算法定出外坐标轴；外坐标轴与Three.js中的相机坐标轴关联；
根据外坐标轴分别定出人员双眼的位置坐标(x1,y1,z1)，(x2,y2,z2)，并计算出双眼的中心坐标((x1+x2)/2,(y1+y2)/2，(z1+z2)/2)；
根据人的移动状况，用人眼跟踪算法不断更新眼睛的位置坐标；
然后获取场景图片，并将其存储于服务器；
在客户端进行场景构建，利用Three.js框架进行Web开发；客户端与服务器通信，最后将开发的结果在显示屏上展示，完成室内布景渲染。
2.根据权利要求1所述的一种基于Three.js的室内布景渲染方法，其特征在于，设置识别区域为Three.js中设置的立方体一半的尺寸；外坐标轴中心点与Three.js中立方体中心点相对应，外坐标轴的坐标轴方向也与Three.js中坐标轴相对应；外坐标轴与Three.js中的相机坐标轴相关联后，人眼中心点在外坐标轴的位置坐标为相机在Three.js中坐标轴的位置坐标。
3.根据权利要求2所述的一种基于Three.js的室内布景渲染方法，其特征在于，人眼识别定位算法的识别区域为5m*2.5m*3m；Three.js中的坐标轴中心点位于创建的盒子中心，外坐标轴的中心点位于识别区域的2.5m*2.5m*1.5m处。
4.根据权利要求1所述的一种基于Three.js的室内布景渲染方法，其特征在于，Three.js相机的视点通过计算两只眼睛的角度定位：当arctan((z1-z2)/(x1-x2))＝π/4，视点坐标(camera.lookAt)为六面体右侧面中心点；当arctan((z1-z2)/(x1-x2))＝-π/4时，视点坐标为六面体左侧面中心点；当arctan((z1-z2)/(x1-x2))＝0时，视点坐标为六面体背面中心点。
5.根据权利要求1所述的一种基于Three.js的室内布景渲染方法，其特征在于，获取场景图片的步骤具体包括：
(1)通过鱼眼相机拍摄得到球型图片，通过AS3编程将其转换成六张大小相同的矩形图片；
(2)在3D Max中，通过指定一个视点位置，将场景渲染到六个图片上，生成六幅大小相同的图，完成场景图片的获取。
6.根据权利要求1所述的一种基于Three.js的室内布景渲染方法，其特征在于，利用Three.js框架进行Web开发的步骤具体包括：
S1：获取图片，并将其储存在服务器中；所述图片包括上下左右前后6个面的图片；
S2：利用WebGL技术中的Three.js库进行页面开发，将步骤S1获取的图片在客户端的浏览器上展示；
S3：在three.js库的开发中嵌入OrbitControls.js，实现图片与用户之间的交互。
7.根据权利要求1至6中任一项所述的一种基于Three.js的室内布景渲染方法，其特征在于，客户端与服务器通过TCP协议进行通信。
8.根据权利要求7所述的一种基于Three.js的室内布景渲染方法，其特征在于，Web开发中，贴图时使用UV映射的方法进行粘贴。
9.一种基于Three.js的室内布景渲染系统，其特征在于，包括：
数据采集模块，用于采集获取检测区域的人员位置信息；
数据处理模块，用于根据人员位置信息，再利用OpenCV中的级联分类器检测出人脸区域，根据检测到的人脸信息通过人眼定位识别算法定出一个外坐标轴用于坐标定位，分别定出人的左右两只眼睛的位置坐标(x1,y1,z1)和(x2,y2,z2)，并计算出中心坐标((x1+x2)/2，(y1+y2)/2，(z1+z2)/2)；然后，根据人的移动，用人眼跟踪算法不断的更新眼睛的位置坐标；
场景图片获取模块，用于获取场景图片；
服务器，用于存储信息，并与客户端通信；其中，存储的信息包括位置坐标和场景图片信息；
客户端，用于Web界面的开发；所述Web界面的开发基于Three.js库；
显示模块，用于显示渲染的效果。
10.根据权利要求9所述的一种基于Three.js的室内布景渲染系统，其特征在于，数据采集模块包括两个摄像机；
显示模块包括电视屏。
CN201910740787.8A 2019-08-12 2019-08-12 一种基于Three.js的室内布景渲染方法及系统 Active CN110458929B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910740787.8A CN110458929B (zh) 2019-08-12 2019-08-12 一种基于Three.js的室内布景渲染方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910740787.8A CN110458929B (zh) 2019-08-12 2019-08-12 一种基于Three.js的室内布景渲染方法及系统

Publications (2)

Publication Number Publication Date
CN110458929A CN110458929A (zh) 2019-11-15
CN110458929B true CN110458929B (zh) 2022-10-11

Family

ID=68485988

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910740787.8A Active CN110458929B (zh) 2019-08-12 2019-08-12 一种基于Three.js的室内布景渲染方法及系统

Country Status (1)

Country Link
CN (1) CN110458929B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111401921B (zh) * 2020-03-05 2023-04-18 成都威爱新经济技术研究院有限公司 一种基于虚拟人的远程客服方法
CN113625864B (zh) * 2020-05-07 2024-02-06 艾索擘(上海)科技有限公司 基于物联网的虚拟场景展示方法、系统、设备和存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017084281A1 (zh) * 2015-11-18 2017-05-26 乐视控股（北京）有限公司 全景视频的显示方法和装置
CN109522866A (zh) * 2018-11-29 2019-03-26 宁波视睿迪光电有限公司 裸眼3d图像处理方法、装置以及设备

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017084281A1 (zh) * 2015-11-18 2017-05-26 乐视控股（北京）有限公司 全景视频的显示方法和装置
CN109522866A (zh) * 2018-11-29 2019-03-26 宁波视睿迪光电有限公司 裸眼3d图像处理方法、装置以及设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于WebGL的在线房产展示系统研究;邹驼玲等;《信息与电脑(理论版)》;20190525(第10期);全文 *

Also Published As

Publication number Publication date
CN110458929A (zh) 2019-11-15

Similar Documents

Publication Publication Date Title
US10096157B2 (en) Generation of three-dimensional imagery from a two-dimensional image using a depth map
US10419716B1 (en) Ad-hoc dynamic capture of an immersive virtual reality experience
JP6340017B2 (ja) 被写体と３次元仮想空間をリアルタイムに合成する撮影システム
WO2020063100A1 (zh) 增强现实的图像展示方法、装置及设备
US11488348B1 (en) Computing virtual screen imagery based on a stage environment, camera position, and/or camera settings
CN105264478A (zh) 全息锚定和动态定位
CN107330964B (zh) 一种复杂三维物体的显示方法及系统
CN107862718B (zh) 4d全息视频捕捉方法
US20210225065A1 (en) Creating action shot video from multi-view capture data
CN101276478A (zh) 纹理处理设备与方法
US9754398B1 (en) Animation curve reduction for mobile application user interface objects
CN110458929B (zh) 一种基于Three.js的室内布景渲染方法及系统
EP3057316B1 (en) Generation of three-dimensional imagery to supplement existing content
WO2017029679A1 (en) Interactive 3d map with vibrant street view
CN106210856A (zh) 在网络视频直播平台上观看3d全景视频的方法及系统
CN106843790A (zh) 一种信息展示系统和方法
WO2022055367A1 (en) Method for emulating defocus of sharp rendered images
US20220036644A1 (en) Image processing apparatus, image processing method, and program
JP2023171298A (ja) 拡張現実及び複合現実のための空間とコンテンツの適合
CN112396683B (zh) 虚拟场景的阴影渲染方法、装置、设备及存储介质
WO2022116194A1 (zh) 一种全景呈现方法及其装置
WO2022055368A1 (en) Method for applying a vignette effect to rendered images
CN110853147B (zh) 一种三维人脸变换的方法
JP2000030080A (ja) Ｖｒシステム
TWI794512B (zh) 用於擴增實境之系統及設備及用於使用一即時顯示器實現拍攝之方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant