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.

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.

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