最近在贝壳 app 中推出 VR 看房功能，让您身临其境，用户体验也不错。所以也想探究一下其背后技术。也想简单地实现 VR 看房功能。简单 demo 想实现一下以下效果，地上有动态的指南针，提供您想查看的主要部分尺寸，通过指定点来切换不同位置以便观察各个房间的局部，可以切换到俯视 3D 模型图。
思路就是用 three.js 基于 webgl 开发室内全景导航，sketchup 建模来实现俯视 3D 模型切换，今天我们就开始 VR 看房之旅。通过 VR 来学习掌握 three.js。
看一看今天的成果，搭建完成全景室内场景，添加一个几何体（正方体）到房间内部，用于作为一个参考的立方体，便于开发时观察对 3D 视图的缩放和旋转，在地面上添加动态旋转的指南针，如下图。通过鼠标或旋转手机可以在全景图自由游走。
效果图1
效果图2
效果图2
three.js
我记得三年前吧，在看 js 开发者大会时，threejs 的创始人演示了 threejs 的 demo，虽然现场下面有许多喝彩，但是大家还很质疑 three.js 的未来，由于 js 和 web 技术在性能上的局限的局限性，或天生不足让 web 对 3d 效果渲染无法满足当下人的视觉口味，看一看 3 dmax 效果吧。
3dmax
当有人问到有关于 three.js 前景的问题，threejs 的创始人显得也很尴尬。但是随着 web 技术不断发展，three.js 也在一些 web 的应用中落地，毕竟 web 应用有其自身的特点，即开即用，良好的用户体验。随着 webGL 技术出现，为 web 3d 技术也进一步助力。在 web 应用上也可以做到照片级别渲染。WebGL 是一项在浏览器体现 3D 画面的技术。WebGL 的规格尚在发展中，由非营利的 Khronos Group 管理。现在出现 web assemble 技术在未来也将解决 web 3d 根本问题，速度和性能。
webGL
网友评论