本地 搭建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科技网