webvr-webpack-boilerplate

A webvr multi-pages project for three.js, es6/7, webpack and postcss.

中文

Features

• webvr: a webvr boilerplate supporting scenes changing
• three.js: use as the global varriable
• es6/7: by babel and it's presets and plugins
• postcss: by postcss-loader
• webpack provides faster compilation
• glsl: import .glsl files for shaders

Installation

$ npm install
# or
$ yarn install

Configuration

You can custom your local environment port via webpack.config.js.

Run in development

$ npm start

Build for production

$ npm run build

This will generator minified scripts to dist/.

Create webvr page

Here comes the basic script to create a webvr page. See more pages in src/views/*.js .

import { VRScene } from '@/core';

class Index extends VRScene {
  assets() {
    return {
      TEXTURE_SKYBOX: 'texture/360bg.jpg'
    }
  }
  start() {
     // create panorama
    const { TEXTURE_SKYBOX } = this.assets;
    const geometry = new THREE.SphereGeometry(radius,50,50);
    const material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load(TEXTURE_SKYBOX),side:THREE.BackSide } );
    const panorama = new THREE.Mesh(geometry,material);
    this.add(panorama);
  }
  loaded() {
    console.log('assets has been loaded.');
  }
  update(delta) {
    // animate
  }
}
export default Index;

Init WebVR and Add Routers

import WebVRApp from '@/core'
// create router map
WebVRApp.create([
    {
        path: '/', // e.g 127.0.0.1:8080/
        component: () => import('@/views/index.js')
    },
    {
        path: '/user', // e.g 127.0.0.1:8080/1
        component: () => import('@/views/userPage.js')
    },
    {
        path: '/detail', // e.g 127.0.0.1:8080/2
        component: () => import('@/views/detailPage.js')
    }
],document.querySelector('.webvr-container')
);

VRScene class API

VRScene class is a class for create a scene below the root scene.

name	type	description
start	Function()	excute before the first rendering
loaded	Function()	excute after all the textures,3d models and audio are loaded
update	Function()	excute during each rendering
assets	Function()	declear assets path for the scene
root	Object	gobal property ,incluing root.scene, root.camera and so on.

VRScene.root

Using this.root to get gobal variable among all VRScenes. It is a property of the VRScene instance, incluing root.scene, root.camera and so on.

name	type	description
root.router	Object	router for controling the action between vr scenes
root.scene	THREE.Scene	global webvr scene
root.camera	THREE.PerspectiveCamera	global camera of first person
root.renderer	THREE.Renderer	global renderer
root.crossHair	THREE.Object3d	global crosshair
root.display	VRDisplay	vrdispaly[0]

root.router

root.router is a router controling the action between vr pages.

• push(routerName) this.root.router.push('home') // goto 127.0.0.1:8080/home,history will push state
• replace(routerName) this.root.router.replace('home') // goto 127.0.0.1:8080/home,history will replace state
• back()

By using this.root.router.push can just fetch the script of page when you need to goto other vr pages.

this.root.router.push('2'); // it will redirect to e.g: 127.0.0.1:8080/2

How it work

Need Help

Ask questions here.

Any advise

PR welcome here.

Contributors

Yone Chen [email protected]

License

MIT