web服务器发布网站（web服务器发布网站是什么）〔发布网站的web服务器有哪几种〕

　　WebVR并不是一个新事物 ，人们讨论利用 WebGL在欣赏 器出现 互动3D图形已经高出 5年，如今 已经拥有各种实现方法。然而，新的可用开源库可以让纵然 是新手开辟 者也能在很短的时间内构建假造 实际 体验 。在两年前 ，要是在这么短的时间内完成这个事变 是一件非常困难的。但颠末 一些热心开辟 者的积极 （Josh Carpenter、Brandon Jones 、Vlad Vuki?evi?、Tony Parisi和Boris Smus，这里只是提到部分 人。），他们为网页内容开辟 了一片新天地 。

　　为了证明 这一点 ，以下是一个10分钟的教程，教你怎样 用最短的工程量去构建属于本身 的WebVR体验。

　　步调 0：去认真的看《火星救济 (The Martian)》

　　《火星救济 》大概 是我本年 最喜好 的影戏 ，《火星救济 》非常恭敬 册本 原作。几周前我看了它 ，我想构建一个相称 于火星外貌 的实地观察 假造 实际 环境 ，由于 我的航天票仍旧 还没能拿到 。

　　步调 1：下载Boris的boilerplate代码

　　Boris的boilerplate项目是一个很棒的初学者代码，可以实现全部 根本 功能，你必要 设置一个webVR项目（polyfill, mode manager等.）。

　　amidha$ git clone https://github.com/borismus/webvr-boilerplate.git步调 2：启动一个本地 文件服务器

　　设置一个服务器 ，它可以让你利用 本地 端口搭建webVR应用程序，就跟你必须得启动通例 的web应用程序服务器一样。

　　amidha$ cd webvr-boilerplate/amidha$ python -m SimpleHTTPServer 8000

　　为了测试您的服务器正在运行，用网页打开主机服务器的端口 ，像我如许 ：https://localhost:8000/

　　您如今 应该看到默认的样式，一个旋转的蓝色立方块在一个布满 绿色网格线的玄色 配景 中心 。

　　步调 3：添加配景 图

　　让我们去谷歌找一张能表现 这部影戏 主题的图片。我喜好 这张水手号峡谷配景 。

　　添加你的配景 ，让我们添加几行脚本语言创建一个球面投影外貌 ，我们可以将一个全景场景举行 渲染。把图片放到你的项目标 “IMG ”文件夹下面 。

　　//add this code below effect.setSize(window.innerWidth, window.innerHeight);//create a sphere — we’ll use the inner surface to project our Mars image on to itvar geometry = new THREE.SphereGeometry(50, 200, 200);// create the material, using a texture of marsvar material = new THREE.MeshBasicMaterial();material.map = THREE.ImageUtils.loadTexture(‘img/mars.jpg’);material.side = THREE.BackSide;// create the mesh based on geometry and materialvar mesh = new THREE.Mesh(geometry, material);var skybox = new THREE.Mesh(geometry, material);scene.add(skybox);

　　您如今 应该看到立方体旋转在球形的火星场景配景 图中:

　　由于这是火星的缘故，我们把旋转的立方体放进一个地球模子 内里 ，如许 可以让火星不会那么孤独：

　　// Create 3D objects for our Earth modelvar geometry = new THREE.SphereGeometry(0.5, 32, 32); var material = new THREE.MeshBasicMaterial(); var earthMesh = new THREE.Mesh(geometry, material);// Position earth mesh [to be fair, this should be Phobos or Deimos if I was really trying to pay homage to Andy Weir's scientific authenticity, but the Earth texturewas easier to find in 10 mins...]earthMesh.position.z = 1;earthMesh.position.x = 15;earthMesh.position.y = 7.25;// Add earth mesh to your three.js scene - I found it here https://planetpixelemporium.com/planets.html. Place the image in the img directory.scene.add(earthMesh);material.map = THREE.ImageUtils.loadTexture(‘img/earthmap1k.jpg’)

　　如今 应该是雷同 于下面的场景：

　　步调 4：利用 ngrok、戴上谷歌纸板 ，放上你的手机去观看它

　　Ngrok是一个小小的实用程序，答应 您本地 web服务器发布在互联网上。在下载和安装它之后放进你的项目，它可以在你本地 端口运行这个项目。

　　./ngrok http 8000

　　在移动欣赏 器上访问ngrok提供的url ，你会看到一个webVR体验，你可以用你的手机加上任何假造 实际 头显（如谷歌纸板 、Merge VR等等 。）

　　配景 图片更换 很简单 ，你可以更换 任何你想要的高分辨率图像文件，下面是我实行 更换 的一些配景 ，其他没改，就只举行 配景 图更换 ：

　　假如 你想要这个项目标 全部 代码，可以到这里获取。

　　文章由VR科技网提供 ，想相识 最新假造 实际 资讯，请关注VR科技网