three.js

使用ES6标准

三大组建

场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

场景

场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。

相机

相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。

渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

创建三大组件 -> 添加物体到场景 -> 渲染

trhee组成：

// https://threejs.org/docs/#api/zh/

WebVR

需要2件事： 一个头戴设备，一个支持VR的浏览器

判断是否支持VR

XR设备判断方法:

if ( 'xr' in navigator ) {

navigator.xr.requestDevice().then( function ( device ) {

device.supportsSession( { immersive: true, exclusive: true /* DEPRECATED */ } )

.then( function () { showEnterXR( device ); } )

.catch( showVRNotFound );

} ).catch( showVRNotFound );

}

VR设备判断方法:

if ( 'getVRDisplays' in navigator ) {

navigator.getVRDisplays()

.then( function ( displays ) {

if ( displays.length > 0 ) {

showEnterVR( displays[ 0 ] );

} else {

showVRNotFound();

}

} ).catch( showVRNotFound );

}

科普：

VR:虚拟现实- Virtual Reality

是利用设备模拟产生一个虚拟世界，提供用户关于视觉、听觉等感官的模拟，有十足的“沉浸感”与“临场感”。简单的说就是，你戴上一个VR眼镜（注意：戴上去后你就看不到现实世界了）看到的所有东西都是计算机生成的，都是虚拟的。典型的设备就是暴风魔镜。VR需要用一个不透明的头戴设备完成虚拟世界里的沉浸体验，你看到的是一个100%的虚拟世界

AR:增强现实 - Augmented Reality

增强现实技术是一种将真实世界信息和虚拟世界信息“无缝”集成的新技术，它把原本在现实世界的一定时间空间范围内很难体验到的实体信息（视觉信息、声音、味道、触觉等），通过电脑等科学技术，模拟仿真后再叠加，将虚拟的信息应用到真实世界，被人类感官所感知，从而达到超越现实的感官体验。真实的环境和虚拟的物体实时地叠加到了同一个画面或空间同时存在。AR需要清晰的头戴设备看清真实世界和重叠在上面的信息和图像，以现实世界的实体为主体，借助于数字技术帮助消费者更好地探索现实世界和与之交付。AR设备创造的虚拟物体，是可以明显看出是虚拟的，比如GoogleGlass投射出的随你而动的虚拟信息

MR:混合现实- Mixed Reality

将真实世界和虚拟世界混合在一起，来产生新的可视化环境，环境中同时包含了物理实体与虚拟信息，并且必须是“实时的”。MR设备直接向视网膜投射整个4维光场，用户看到的虚拟物体和真实物体几乎是无法区分的。

CR:电影现实- Cinematic Reality

影像现实，意思是虚拟场景跟电影特效一样逼真。这是Google投资的MagicLeap提出的概念，主要为了强调与VR、AR技术的不同。实际上理念是类似的，均是模糊物理世界与虚拟世界的便捷，所完成的任务、所应用的场景、所提供的内容，与MR产品是相似的，所以后来好像他们的发言人也把自己归做MR了。

XR:扩展现实- Extended Reality

扩展现实是指通过计算机技术和可穿戴设备产生的一个真实与虚拟组合的、可人机交互的环境。扩展现实包括增强现实（AR），虚拟现实（VR），混合现实（MR）等多种形式。换句话说，为了避免概念混淆，XR其实是一个总称，包括了AR，VR，MR。XR分为多个层次，从通过有限传感器输入的虚拟世界到完全沉浸式的虚拟世界。