* readme, pkg.json, favicon, examples

fritx · fritx · commit f29192d41c2d · 2016-05-24T00:16:05.000+08:00
vuejs/vue#681 (comment) vuejs/Discussion#354 (comment)
diff --git a/README.md b/README.md
@@ -1,24 +1,30 @@
 # vue-threejs
 
 > [WIP] Simplest bindings between [Vue][react] & [Three.js][threejs]
+
 > Migrated from [react-threejs](https://github.com/fritx/react-threejs)
 
 <img width="400" src="https://github.com/fritx/react-threejs/raw/dev/debugging.jpg">
 
+```js
+import VueThreejs from 'vue-threejs'
+Vue.use(VueThreejs)
+```
+
 ```vue
 <template>
-  <renderer :size="size">
+  <renderer :dim="dim">
     <scene>
-      <camera :size="size" :position="camPos"></camera>
-      <ocean :position="oceanPos"></ocean>
+      <camera :dim="dim" :position="{ z: 15 }"></camera>
+      <object3d :obj="mesh" :position="{ y: -200 }"></object3d>
     </scene>
   </renderer>
 </template>
 ```
 
 **Study Notes**
 
-- [v-ref is not working with ~~<template>~~(dom) element](https://github.com/vuejs/vue/issues/681#issuecomment-75802646)
+- [v-ref is not working with <template> element](https://github.com/vuejs/vue/issues/681#issuecomment-75802646)
 - [Can I use a compoent inherit other compoent?](https://github.com/vuejs/Discussion/issues/354#issuecomment-133019536)
 
 [react-threejs]: https://github.com/fritx/react-threejs
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/examples/main.js'
   },
   output: {
     path: config.build.assetsRoot,
diff --git a/config/index.js b/config/index.js
@@ -7,7 +7,8 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    // assetsPublicPath: '/',
+    assetsPublicPath: '',
     productionSourceMap: true
   },
   dev: {
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>vue-threejs</title>
+    <link rel="icon" href="static/vue.png" type="image/x-icon">
   </head>
   <body>
     <app></app>
diff --git a/package.json b/package.json
@@ -3,19 +3,18 @@
   "version": "0.0.0",
   "description": "Simplest bindings between Vue & Three.js",
   "author": "Fritz Lin <uxfritz@163.com>",
-  "private": true,
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "test": "",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "babel-runtime": "^6.0.0",
-    "vue": "^1.0.21"
+    "babel-runtime": "^6.0.0"
   },
   "peerDependencies": {
-    "three": "^0.76.1"
+    "three": "^0.76.1",
+    "vue": "^1.0.21"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/src/components/Camera.vue b/src/components/Camera.vue
@@ -10,7 +10,7 @@ export default {
   mixins: [Object3D],
 
   props: {
-    size: {
+    dim: {
       type: Object, // { width, height }
       required: true
     },
@@ -20,7 +20,7 @@ export default {
   },
 
   created () {
-    const { width, height } = this.size
+    const { width, height } = this.dim
     if (!(this.obj instanceof Camera)) {
       this.obj = new PerspectiveCamera(75, width / height, 0.1, 1000)
     }
diff --git a/src/components/Renderer.vue b/src/components/Renderer.vue
@@ -9,7 +9,7 @@ import { WebGLRenderer } from 'three'
 
 export default {
   props: {
-    size: {
+    dim: {
       type: Object, // { width, height }
       required: true
     },
@@ -22,7 +22,7 @@ export default {
       this.obj = new WebGLRenderer({ antialias: true })
     }
     this.obj.name = this.obj.name || this.constructor.name
-    this.obj.setSize(this.size.width, this.size.height)
+    this.obj.setSize(this.dim.width, this.dim.height)
     this.obj.setClearColor(0x000000)
   },
 
diff --git a/src/examples/App.vue b/src/examples/App.vue
@@ -3,28 +3,26 @@
 </style>
 
 <template>
-  <renderer :size="size">
+  <renderer :dim="dim">
     <scene>
-      <camera :size="size" :position="camPos"></camera>
-      <ocean :position="oceanPos"></ocean>
+      <camera :dim="dim" :position="{ z: 15 }"></camera>
+      <ocean :position="{ y: -200 }"></ocean>
     </scene>
   </renderer>
 </template>
 
 <script>
-  import Ocean from './examples/Ocean'
+  import Ocean from './Ocean'
 
   export default {
     components: { Ocean },
 
     data () {
       return {
-        size: {
+        dim: {
           width: window.innerWidth,
           height: window.innerHeight
-        },
-        oceanPos: { y: -200 },
-        camPos: { z: 15 }
+        }
       }
     }
   }
diff --git a/src/examples/Ocean.vue b/src/examples/Ocean.vue
@@ -11,34 +11,34 @@ import Object3D from '../components/Object3D'
 export default {
   mixins: [Object3D],
 
-  data () {
-    return { mesh: null }
-  },
-
   created () {
     this.animate = this.animate.bind(this)
     this.clock = new THREE.Clock()
-
-    const geometry = this.geometry = new THREE.PlaneGeometry(10000, 10000, 40, 40)
-    geometry.rotateX(-Math.PI / 2)
-    for (var i = 0, l = geometry.vertices.length; i < l; i++) {
-      geometry.vertices[ i ].y = 10 * Math.sin(i / 2)
-    }
-
-    const texture = new THREE.TextureLoader().load(require('./water.jpg'))
-    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-    texture.repeat.set(5, 5)
-    const material = new THREE.MeshBasicMaterial({ color: 0x0044ff, map: texture })
-
-    this.mesh = new THREE.Mesh(geometry, material)
-    this.mesh.name = 'Ocean'
+    this.mesh = this.createOcean()
   },
 
   ready () {
     this.animate()
   },
 
   methods: {
+    createOcean () {
+      const geometry = this.geometry = new THREE.PlaneGeometry(10000, 10000, 40, 40)
+      geometry.rotateX(-Math.PI / 2)
+      for (var i = 0, l = geometry.vertices.length; i < l; i++) {
+        geometry.vertices[ i ].y = 10 * Math.sin(i / 2)
+      }
+
+      const texture = new THREE.TextureLoader().load(require('./water.jpg'))
+      texture.wrapS = texture.wrapT = THREE.RepeatWrapping
+      texture.repeat.set(5, 5)
+      const material = new THREE.MeshBasicMaterial({ color: 0x0044ff, map: texture })
+
+      const mesh = new THREE.Mesh(geometry, material)
+      mesh.name = 'Ocean'
+      return mesh
+    },
+
     animate () {
       requestAnimationFrame(this.animate)
       const time = this.clock.getElapsedTime() * 5
diff --git a/src/examples/main.js b/src/examples/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App'
-import VueThreejs from './'
+import VueThreejs from '../'
 
 Vue.use(VueThreejs)
 
diff --git a/static/.gitkeep b/static/.gitkeep
diff --git a/static/vue.png b/static/vue.png
