├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── Object3D.spec.js
├── examples
    ├── water.jpg
    ├── Cube.vue
    ├── main.js
    ├── gui.js
    ├── Ocean.vue
    ├── App.vue
    └── SF03.vue
├── public
    ├── favicon.ico
    ├── static
    │   ├── Project_Utopia.ogg
    │   ├── textures
    │   │   ├── diamond.png
    │   │   ├── redwool.png
    │   │   └── cobblestone.png
    │   └── threex
    │   │   └── spaceships
    │   │       ├── F03_512.jpg
    │   │       ├── lensflare0_alpha.png
    │   │       ├── SpaceFighter03.mtl
    │   │       ├── LICENSE
    │   │       └── SpaceFighter03.obj
    └── index.html
├── babel.config.js
├── .editorconfig
├── src
    ├── mesh
    │   ├── Mesh.vue
    │   ├── Geometry.vue
    │   ├── Material.vue
    │   ├── MObjMtl.vue
    │   └── Texture.vue
    ├── components
    │   ├── Light.vue
    │   ├── AudioListener.vue
    │   ├── Camera.vue
    │   ├── Base.vue
    │   ├── Scene.vue
    │   ├── OrbitControls.vue
    │   ├── Animation.vue
    │   ├── PositionalAudio.vue
    │   ├── Renderer.vue
    │   └── Object3D.vue
    ├── oimo
    │   ├── SpaceObject.vue
    │   ├── OimoWorld.vue
    │   ├── OimoBody.vue
    │   └── SpaceSystem.vue
    ├── util.js
    ├── dat
    │   └── DatGui.vue
    ├── index.js
    ├── physics
    │   ├── MovementObject.vue
    │   ├── MassObject.vue
    │   └── MovementSystem.vue
    └── threex
    │   ├── loaders
    │       ├── MTLLoader.js
    │       └── OBJLoader.js
    │   └── controls
    │       └── OrbitControls.js
├── .gitignore
├── .npmignore
├── jest.config.js
├── LICENSE
├── vue.config.js
├── package.json
└── README.md


/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | }


--------------------------------------------------------------------------------
/examples/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/examples/water.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/static/Project_Utopia.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/Project_Utopia.ogg


--------------------------------------------------------------------------------
/public/static/textures/diamond.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/textures/diamond.png


--------------------------------------------------------------------------------
/public/static/textures/redwool.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/textures/redwool.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     ['@vue/app', {
4 |       modules: 'commonjs'
5 |     }]
6 |   ]
7 | }


--------------------------------------------------------------------------------
/public/static/textures/cobblestone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/textures/cobblestone.png


--------------------------------------------------------------------------------
/public/static/threex/spaceships/F03_512.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/threex/spaceships/F03_512.jpg


--------------------------------------------------------------------------------
/public/static/threex/spaceships/lensflare0_alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fritx/vue-threejs/HEAD/public/static/threex/spaceships/lensflare0_alpha.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/mesh/Mesh.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Object3D from '@/components/Object3D'
 3 | 
 4 | export default {
 5 |   name: 'Mesh',
 6 |   mixins: [Object3D],
 7 |   props: {
 8 |     type: { type: String, default: 'Mesh' }
 9 |   },
10 | 
11 |   provide () {
12 |     return { meshVm: this }
13 |   }
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 
23 | package-lock.json
24 | /lib
25 | /package
26 | /package *
27 | *.tgz
28 | 


--------------------------------------------------------------------------------
/public/static/threex/spaceships/SpaceFighter03.mtl:
--------------------------------------------------------------------------------
 1 | # Blender MTL File: 'None'
 2 | # Material Count: 1
 3 | newmtl VMtl01.002_F03_512.JPG
 4 | Ns 96.078431
 5 | Ka 0.000000 0.000000 0.000000
 6 | Kd 0.398431 0.398431 0.398431
 7 | Ks 0.000000 0.000000 0.000000
 8 | Ni 1.000000
 9 | d 1.000000
10 | illum 2
11 | #map_Kd Free-game-models-collection/spaceships/SpaceFighter03/F03_512.JPG
12 | map_Kd F03_512.jpg
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/Cube.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <mesh name="Cube">
 3 |     <geometry type="Box" :args="[size, size, size]"></geometry>
 4 |     <material type="MeshBasic">
 5 |       <texture :url="`static/textures/${texture}.png`"></texture>
 6 |     </material>
 7 |   </mesh>
 8 | </template>
 9 | 
10 | <script>
11 | import { Object3D } from '@'
12 | 
13 | export default {
14 |   name: 'cube',
15 |   mixins: [Object3D],
16 |   props: { size: Number, texture: String }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 
23 | package-lock.json
24 | # /lib
25 | /package
26 | /package *
27 | *.tgz
28 | 
29 | /examples
30 | /src
31 | /test
32 | /public
33 | /.editorconfig
34 | /*.config.js
35 | 


--------------------------------------------------------------------------------
/src/components/Light.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import * as THREE from 'three'
 3 | import Object3D from './Object3D'
 4 | 
 5 | export default {
 6 |   name: 'Light',
 7 |   mixins: [Object3D],
 8 | 
 9 |   props: {
10 |     hex: Number,
11 |     intensity: Number
12 |   },
13 | 
14 |   data () {
15 |     let curObj = this.obj
16 |     if (!curObj) {
17 |       curObj = new THREE.DirectionalLight(this.hex, this.intensity)
18 |     }
19 |     curObj.name = curObj.name || curObj.type
20 |     return { curObj }
21 |   }
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/AudioListener.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Object3D :obj="listener" :position="position"></Object3D>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { AudioListener } from 'three'
 7 | import Object3D from './Object3D'
 8 | 
 9 | export default {
10 |   name: 'AudioListener',
11 |   mixins: [Object3D],
12 |   components: { Object3D },
13 |   inject: ['global'],
14 | 
15 |   data () {
16 |     let listener = new AudioListener()
17 |     this.global.audioListener = listener // fixme
18 |     return { listener }
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | 
 6 | // import * as VueThreejs from '@/../package/lib/VueThreejs.common' // testing pack
 7 | // import * as VueThreejs from '@/../lib/VueThreejs.common' // testing build
 8 | import * as VueThreejs from '@'
 9 | // import VueThreejs from '@'
10 | Vue.use(VueThreejs)
11 | 
12 | Vue.config.productionTip = false
13 | 
14 | new Vue({
15 |   render: h => h(App),
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: [
 3 |     'js',
 4 |     'jsx',
 5 |     'json',
 6 |     'vue'
 7 |   ],
 8 |   transform: {
 9 |     '^.+\\.vue$': 'vue-jest',
10 |     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11 |     '^.+\\.jsx?$': 'babel-jest'
12 |   },
13 |   moduleNameMapper: {
14 |     '^@/(.*)$': '<rootDir>/src/$1'
15 |   },
16 |   snapshotSerializers: [
17 |     'jest-serializer-vue'
18 |   ],
19 |   testMatch: [
20 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
21 |   ],
22 |   testURL: 'http://localhost/'
23 | }
24 | 


--------------------------------------------------------------------------------
/src/oimo/SpaceObject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div @vm-oimo-body="handleBody">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'space-object',
10 |   inject: ['spaceVms'],
11 | 
12 |   data () {
13 |     return { body: null }
14 |   },
15 | 
16 |   mounted () {
17 |     this.spaceVms.push(this)
18 |   },
19 | 
20 |   beforeDestroy () {
21 |     let index = this.spaceVms.indexOf(this)
22 |     if (index > -1) this.spaceVms.splice(index, 1)
23 |   },
24 | 
25 |   methods: {
26 |     handleBody (e) {
27 |       this.body = e.detail
28 |     }
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-threejs</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/mesh/Geometry.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Base from '@/components/Base'
 3 | import * as THREE from 'three'
 4 | 
 5 | export default {
 6 |   name: 'Geometry',
 7 |   mixins: [Base],
 8 |   inject: ['meshVm'],
 9 |   props: {
10 |     args: { type: Array, default: () => [] },
11 |     type: { type: String, default: '' }
12 |   },
13 | 
14 |   data () {
15 |     let mod = `${this.type}Geometry`
16 |     let geometry = new THREE[mod](...this.args)
17 |     return { geometry }
18 |   },
19 | 
20 |   mounted () {
21 |     this.meshVm.curObj.geometry = this.geometry
22 |   },
23 | 
24 |   beforeDestroy () {
25 |     this.meshVm.curObj.geometry = null
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/components/Camera.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { PerspectiveCamera } from 'three'
 3 | import Object3D from './Object3D'
 4 | 
 5 | export default {
 6 |   name: 'Camera',
 7 |   mixins: [Object3D],
 8 |   inject: ['global'],
 9 |   props: {
10 |     obj: { type: Object }
11 |   },
12 | 
13 |   data () {
14 |     let curObj = this.obj
15 | 
16 |     const { w, h } = this.global.rendererSize // fixme
17 |     if (!curObj) {
18 |       curObj = new PerspectiveCamera(75, w / h, 0.1, 1000)
19 |     }
20 |     curObj.name = curObj.name || curObj.type
21 | 
22 |     return { curObj }
23 |   },
24 | 
25 |   mounted () {
26 |     this.global.camera = this.curObj
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | import { Vector3 } from 'three'
 2 | 
 3 | // for simplicity
 4 | // using plain object `{ x, y, z }` to describe vector
 5 | // instead of class Vector3
 6 | let $vec = {
 7 |   multiplyScalar (v, s) {
 8 |     v = this.toVector3(v)
 9 |     v.multiplyScalar(s)
10 |     return this.toPlainObj(v)
11 |   },
12 | 
13 |   add (v1, v2) {
14 |     v1 = this.toVector3(v1)
15 |     v2 = this.toVector3(v2)
16 |     let v = v1.add(v2)
17 |     return this.toPlainObj(v)
18 |   },
19 | 
20 |   toVector3 (v) {
21 |     v = v || {}
22 |     return new Vector3(v.x, v.y, v.z)
23 |   },
24 | 
25 |   toPlainObj (v) {
26 |     let { x, y, z } = v
27 |     return { x, y, z }
28 |   }
29 | }
30 | 
31 | export { $vec }
32 | 


--------------------------------------------------------------------------------
/src/oimo/OimoWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |     <animation v-if="world" :fn="animate"></animation>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import * as Oimo from 'oimo'
10 | 
11 | export default {
12 |   name: 'oimo-world',
13 |   provide () {
14 |     return { world: this.world }
15 |   },
16 |   props: { options: Object },
17 | 
18 |   data () {
19 |     let opts = {
20 |       gravity: [0, 0, 0] // no gravity as default
21 |     }
22 |     Object.assign(opts, this.options)
23 | 
24 |     let world = new Oimo.World(opts)
25 |     return { world }
26 |   },
27 | 
28 |   destroyed () {
29 |     this.world.clear()
30 |   },
31 | 
32 |   methods: {
33 |     animate () {
34 |       this.world.step()
35 |     }
36 |   }
37 | }
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/dat/DatGui.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="panel" class="panel"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { GUI } from 'dat.gui'
 7 | 
 8 | export default {
 9 |   name: 'dat-gui',
10 |   props: {
11 |     model: { type: Object, required: true },
12 |     setup: { type: Function, required: true }
13 |   },
14 | 
15 |   data () {
16 |     let gui = new GUI({ autoPlace: false })
17 |     this.setup(gui, this.model)
18 |     return { gui }
19 |   },
20 | 
21 |   mounted () {
22 |     this.$refs.panel.appendChild(this.gui.domElement)
23 |   },
24 |   beforeDestroy () {
25 |     this.$refs.panel.removeChild(this.gui.domElement)
26 |   }
27 | }
28 | </script>
29 | 
30 | <style>
31 | .dg.main { user-select: none; }
32 | </style>
33 | 
34 | <style scoped>
35 | .panel { position: absolute; right: 0 }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/examples/gui.js:
--------------------------------------------------------------------------------
 1 | export function getModel () {
 2 |   let ui = {
 3 |     camera: {
 4 |       x: 9, y: 21, z: 20
 5 |     },
 6 |     ocean: {
 7 |       y: -200
 8 |     },
 9 |     sf03: {
10 |       scale: 1
11 |     },
12 |     sysKey: 0,
13 |     replay: () => {
14 |       ui.sysKey += 1
15 |     }
16 |   }
17 |   return ui
18 | }
19 | 
20 | export function setupPanel (gui, ui) {
21 |   let fc = gui.addFolder('Camera')
22 |   fc.add(ui.camera, 'x', -50, 50).step(0.01)
23 |   fc.add(ui.camera, 'y', -50, 50).step(0.01)
24 |   fc.add(ui.camera, 'z', -50, 50).step(0.01)
25 |   fc.open()
26 | 
27 |   let fo = gui.addFolder('Ocean')
28 |   fo.add(ui.ocean, 'y', -250, 10).step(0.01)
29 |   fo.open()
30 | 
31 |   let fs = gui.addFolder('SF03')
32 |   fs.add(ui.sf03, 'scale', 0.1, 7).step(0.01)
33 |   fs.open()
34 |   gui.add(ui, 'replay')
35 | }
36 | 


--------------------------------------------------------------------------------
/src/oimo/OimoBody.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Object3D from '@/components/Object3D'
 3 | 
 4 | export default {
 5 |   name: 'oimo-body',
 6 |   mixins: [Object3D],
 7 |   inject: ['world'],
 8 |   props: { options: Object },
 9 | 
10 |   data () {
11 |     return { body: null }
12 |   },
13 | 
14 |   mounted () {
15 |     let opts = {}
16 |     Object.assign(opts, this.options)
17 | 
18 |     let body = this.world.add(opts)
19 |     body.connectMesh(this.curObj)
20 |     this.body = body
21 | 
22 |     // If you want to wait until the entire view has been rendered
23 |     // https://vuejs.org/v2/api/#mounted
24 |     this.$nextTick(() => {
25 |       this.dispatchEvent('vm-oimo-body', body)
26 |     })
27 |   },
28 | 
29 |   beforeDestroy () {
30 |     this.body.dispose()
31 |     this.dispatchEvent('vm-oimo-body', null)
32 |   }
33 | }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/mesh/Material.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Base from '@/components/Base'
 3 | import * as THREE from 'three'
 4 | 
 5 | export default {
 6 |   name: 'Material',
 7 |   mixins: [Base],
 8 |   inject: ['meshVm'],
 9 |   props: {
10 |     options: { type: Object, default: () => ({}) },
11 |     color: { type: Number },
12 |     type: { type: String, default: '' }
13 |   },
14 | 
15 |   data () {
16 |     let mod = `${this.type}Material`
17 |     let opts = { ...this.options }
18 |     if (this.color) opts.color = this.color
19 |     let material = new THREE[mod](opts)
20 |     return { material }
21 |   },
22 |   provide () {
23 |     return { material: this.material }
24 |   },
25 | 
26 |   mounted () {
27 |     this.meshVm.curObj.material = this.material
28 |   },
29 |   beforeDestroy () {
30 |     this.meshVm.curObj.material = null
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/components/Base.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div><slot></slot></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'Base',
 8 |   inject: {
 9 |     _baseUrl: { name: '_baseUrl', default: null }
10 |   },
11 |   props: {
12 |     baseUrl: {
13 |       type: String,
14 |       default () { return this._baseUrl }
15 |     }
16 |   },
17 | 
18 |   provide () {
19 |     return {
20 |       _baseUrl: this.baseUrl
21 |     }
22 |   },
23 | 
24 |   methods: {
25 |     dispatchEvent (name, detail, options = {}) {
26 |       // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
27 |       let e = new CustomEvent(name, {
28 |         detail,
29 |         bubbles: true,
30 |         cancelable: true,
31 |         ...options
32 |       })
33 |       return this.$el.dispatchEvent(e)
34 |     }
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | let vueComs = {}
 2 | 
 3 | let vueContext = require.context('./', true, /\.vue$/)
 4 | vueContext.keys().forEach(path => {
 5 |   let com = vueContext(path).default
 6 |   vueComs[com.name] = com
 7 |   exports[com.name] = com
 8 | })
 9 | 
10 | let loaderContext = require.context('./threex/loaders', false, /\.js$/)
11 | loaderContext.keys().forEach(path => {
12 |   let com = loaderContext(path).default
13 |   // fix: uglify would kill the function name
14 |   let name = path.match(/([^/]+)\.js$/)[1]
15 |   exports[name] = com
16 | })
17 | 
18 | exports.install = Vue => {
19 |   Object.keys(vueComs).forEach(k => {
20 |     // fix: name 'object3d' is required,
21 |     // or it would be parsed to 'object-3-d' somewhere else
22 |     let rk
23 |     if (k === 'Object3D') rk = 'object3d'
24 |     if (rk) Vue.component(rk, vueComs[k])
25 |     Vue.component(k, vueComs[k])
26 |   })
27 | }
28 | 


--------------------------------------------------------------------------------
/src/physics/MovementObject.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Object3D :position="pos" :rotation="rot">
 3 |     <slot></slot>
 4 |   </Object3D>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Object3D from '@/components/Object3D'
 9 | 
10 | export default {
11 |   name: 'MovementObject',
12 |   mixins: [Object3D],
13 |   components: { Object3D },
14 |   inject: ['movemVms'],
15 | 
16 |   props: {
17 |     a: Object,
18 |     v0: Object,
19 |     ra: Object,
20 |     rv0: Object
21 |   },
22 | 
23 |   data () {
24 |     return {
25 |       rot: { x: 0, y: 0, z: 0 },
26 |       pos: { x: 0, y: 0, z: 0 },
27 |       v: { ...this.v0 },
28 |       rv: { ...this.rv0 }
29 |     }
30 |   },
31 | 
32 |   created () {
33 |     this.movemVms.push(this)
34 |   },
35 | 
36 |   beforeDestroy () {
37 |     let index = this.movemVms.indexOf(this)
38 |     if (index > -1) this.movemVms.splice(index, 1)
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/components/Scene.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /* eslint-disable no-duplicate-imports */
 3 | import { Scene } from 'three'
 4 | import * as THREE from 'three'
 5 | import Object3D from './Object3D'
 6 | 
 7 | export default {
 8 |   name: 'Scene',
 9 |   mixins: [Object3D],
10 |   inject: ['global'],
11 |   props: {
12 |     obj: { type: Object }
13 |   },
14 | 
15 |   data () {
16 |     let curObj = this.obj
17 |     if (!curObj) {
18 |       curObj = new Scene()
19 |     }
20 |     curObj.name = curObj.name || curObj.type
21 |     return { curObj }
22 |   },
23 | 
24 |   mounted () {
25 |     let scene = this.curObj
26 |     this.global.scene = scene
27 | 
28 |     // for threejs-inspector to work
29 |     // https://github.com/jeromeetienne/threejs-inspector
30 |     if (process.env.NODE_ENV === 'development') {
31 |       window.THREE = THREE
32 |       window.scene = scene
33 |     }
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/physics/MassObject.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import MovementObject from '@/physics/MovementObject'
 3 | import { $vec } from '@/util'
 4 | import Vue from 'vue'
 5 | 
 6 | export default {
 7 |   name: 'MassObject',
 8 |   mixins: [MovementObject],
 9 |   props: {
10 |     f: Object,
11 |     m: { type: Number, default: 1 }
12 |   },
13 | 
14 |   data () {
15 |     return {
16 |       innerF: []
17 |     }
18 |   },
19 | 
20 |   computed: {
21 |     a () {
22 |       return $vec.multiplyScalar(this.sumF, 1 / this.m)
23 |     },
24 |     sumF () {
25 |       let { f, innerF } = this
26 |       f = Array.isArray(f) ? f : [f]
27 |       let allF = [...f, ...innerF]
28 |       let sumF = null
29 |       allF.forEach(f => {
30 |         sumF = $vec.add(sumF, f)
31 |       })
32 |       return sumF
33 |     }
34 |   },
35 | 
36 |   // hack: remove prop from super class
37 |   // https://stackoverflow.com/questions/45680047/vuejs-extend-component-remove-parents-property
38 |   beforeCreate () {
39 |     Vue.delete(this.$options.props, 'a')
40 |   }
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/tests/unit/Object3D.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import Object3D from '@/components/Object3D'
 3 | 
 4 | describe('Object3D.vue', () => {
 5 |   ['position', 'rotation'].forEach(k => {
 6 |     describe(`#${k}`, () => {
 7 |       it('should init by default', () => {
 8 |         const wrapper = shallowMount(Object3D)
 9 |         expect(wrapper.vm.curObj[k])
10 |           .toMatchObject({ x: 0, y: 0, z: 0 })
11 |       })
12 | 
13 |       it('should init via props', () => {
14 |         const wrapper = shallowMount(Object3D, {
15 |           propsData: { [k]: { y: 3, z: -5 } }
16 |         })
17 |         expect(wrapper.vm.curObj[k])
18 |           .toMatchObject({ x: 0, y: 3, z: -5 })
19 |       })
20 | 
21 |       it('should watch props', () => {
22 |         const wrapper = shallowMount(Object3D)
23 |         wrapper.setProps({ [k]: { x: -7 } })
24 |         setTimeout(() => {
25 |           expect(wrapper.vm.curObj[k])
26 |             .toMatchObject({ x: -7, y: 0, z: 0 })
27 |         })
28 |       })
29 |     })
30 |   })
31 | })
32 | 


--------------------------------------------------------------------------------
/src/mesh/MObjMtl.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Base from '@/components/Base'
 3 | import MTLLoader from '@/threex/loaders/MTLLoader'
 4 | import OBJLoader from '@/threex/loaders/OBJLoader'
 5 | 
 6 | export default {
 7 |   name: 'MObjMtl',
 8 |   mixins: [Base],
 9 |   inject: ['meshVm'],
10 |   props: {
11 |     process: Function,
12 |     mtlUrl: String,
13 |     objUrl: String
14 |   },
15 | 
16 |   created () {
17 |     let { baseUrl, objUrl, mtlUrl } = this
18 |     let mtlLoader = new MTLLoader()
19 |     if (baseUrl) {
20 |       mtlLoader.setBaseUrl(baseUrl)
21 |       mtlLoader.setPath(baseUrl)
22 |     }
23 |     mtlLoader.load(mtlUrl, (materials) => {
24 |       materials.preload()
25 |       const objLoader = new OBJLoader()
26 |       objLoader.setMaterials(materials)
27 |       if (baseUrl) {
28 |         objLoader.setPath(baseUrl)
29 |       }
30 |       objLoader.load(objUrl, (group) => {
31 |         let body = group
32 |         if (this.process) {
33 |           body = this.process(group)
34 |         }
35 |         this.meshVm.curObj = body
36 |       })
37 |     })
38 |   }
39 | }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2018 Fritz Lin
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.


--------------------------------------------------------------------------------
/src/physics/MovementSystem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |     <animation :fn="animate"></animation>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Animation from '@/components/Animation'
10 | import Object3D from '@/components/Object3D'
11 | import { $vec } from '@/util'
12 | 
13 | export default {
14 |   name: 'MovementSystem',
15 |   mixins: [Object3D],
16 |   components: { Animation },
17 | 
18 |   provide () {
19 |     return {
20 |       movemVms: this.vms
21 |     }
22 |   },
23 | 
24 |   data () {
25 |     return { vms: [] }
26 |   },
27 | 
28 |   methods: {
29 |     animate (tt, dt) {
30 |       this.vms.forEach(vm => {
31 |         // position
32 |         let dv = $vec.multiplyScalar(vm.a, dt)
33 |         vm.v = $vec.add(vm.v, dv)
34 |         let dx = $vec.multiplyScalar(vm.v, dt)
35 |         vm.pos = $vec.add(vm.pos, dx)
36 |         // rotation
37 |         let drv = $vec.multiplyScalar(vm.ra, dt)
38 |         vm.rv = $vec.add(vm.rv, drv)
39 |         let drx = $vec.multiplyScalar(vm.rv, dt)
40 |         vm.rot = $vec.add(vm.rot, drx)
41 |       })
42 |     }
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | let isLib = process.env.TARGET === 'lib'
 2 | 
 3 | module.exports = {
 4 |   css: {
 5 |     extract: !isLib
 6 |   },
 7 |   chainWebpack: config => {
 8 |     if (isLib) {
 9 |       // https://github.com/vuejs/vue-cli/issues/2646
10 |       config.merge({
11 |         externals: {
12 |           vue: {
13 |             commonjs: 'vue',
14 |             commonjs2: 'vue',
15 |             root: 'Vue',
16 |           },
17 |           three: {
18 |             commonjs: 'three',
19 |             commonjs2: 'three',
20 |             root: 'THREE',
21 |           },
22 |           'dat.gui': {
23 |             commonjs: 'dat.gui',
24 |             commonjs2: 'dat.gui',
25 |             // https://github.com/dataarts/dat.gui/blob/1b18f7227e56c8b5071337732342101501b9fa95/rollup.config.js#L30
26 |             root: 'dat',
27 |           },
28 |           oimo: {
29 |             commonjs: 'oimo',
30 |             commonjs2: 'oimo',
31 |             // https://github.com/lo-th/Oimo.js/blob/0ce1c3d8ff3f857d9180035076a70d8d6976a3e6/rollup.config.js#L7
32 |             root: 'OIMO',
33 |           },
34 |         }
35 |       })
36 |     }
37 |   },
38 | }
39 | 


--------------------------------------------------------------------------------
/public/static/threex/spaceships/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Jerome Etienne
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/src/components/OrbitControls.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Object3D :rotation="{ y: Math.PI }">
 3 |     <slot></slot>
 4 |   </Object3D>
 5 | </template>
 6 | 
 7 | <script>
 8 | /* global requestAnimationFrame, cancelAnimationFrame */
 9 | import _OrbitControls from '../threex/controls/OrbitControls'
10 | import Object3D from './Object3D'
11 | import { Clock } from 'three'
12 | 
13 | export default {
14 |   name: 'OrbitControls',
15 |   mixins: [Object3D],
16 |   components: { Object3D },
17 |   inject: ['global'],
18 | 
19 |   data () {
20 |     return {
21 |       controls: null,
22 |       timer: null,
23 |       frame: null
24 |     }
25 |   },
26 | 
27 |   mounted () {
28 |     let domElement = this.global.rendererDom // fixme
29 |     this.controls = new _OrbitControls(this.curObj, domElement)
30 |     this.timer = new Clock()
31 |     this.frame = this.animate()
32 |   },
33 | 
34 |   beforeDestroy () {
35 |     if (this.frame) {
36 |       cancelAnimationFrame(this.frame)
37 |     }
38 |     if (this.controls) {
39 |       this.controls.dispose()
40 |     }
41 |   },
42 | 
43 |   methods: {
44 |     animate () {
45 |       this.frame = requestAnimationFrame(this.animate)
46 |       this.controls.update(this.timer.getDelta())
47 |     }
48 |   }
49 | }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/src/components/Animation.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /* global requestAnimationFrame */
 3 | /* global cancelAnimationFrame */
 4 | import Base from '@/components/Base'
 5 | import { Clock } from 'three'
 6 | 
 7 | export default {
 8 |   name: 'Animation',
 9 |   mixins: [Base],
10 | 
11 |   props: {
12 |     blocked: { type: Boolean },
13 |     paused: { type: Boolean },
14 |     speed: { type: Number, default: 1 },
15 |     fn: { type: Function, required: true }
16 |   },
17 | 
18 |   data () {
19 |     return {
20 |       clock: new Clock(!this.paused),
21 |       ht: 0,
22 |       tt: 0,
23 |       frame: null
24 |     }
25 |   },
26 | 
27 |   mounted () {
28 |     this.begin()
29 |   },
30 |   beforeDestroy () {
31 |     this.end()
32 |   },
33 | 
34 |   watch: {
35 |     paused (v) {
36 |       if (v) {
37 |         this.clock.stop()
38 |       } else {
39 |         this.clock.start()
40 |       }
41 |     }
42 |   },
43 | 
44 |   methods: {
45 |     begin () {
46 |       this.frame = requestAnimationFrame(this.begin)
47 |       let dt = this.clock.getDelta()
48 |       dt *= this.speed
49 |       this.tt += dt
50 |       this.ht += dt
51 |       if (!this.blocked) {
52 |         this.fn(this.tt, this.ht)
53 |         this.ht = 0
54 |       }
55 |     },
56 |     end () {
57 |       this.clock.stop()
58 |       if (this.frame) {
59 |         cancelAnimationFrame(this.frame)
60 |       }
61 |     }
62 |   }
63 | }
64 | </script>
65 | 


--------------------------------------------------------------------------------
/src/mesh/Texture.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Texture, CanvasTexture, TextureLoader } from 'three'
 3 | import Base from '@/components/Base'
 4 | 
 5 | export default {
 6 |   name: 'Texture',
 7 |   mixins: [Base],
 8 |   inject: ['material'],
 9 |   props: {
10 |     url: String,
11 |     image: [Image, ImageData],
12 |     canvas: HTMLCanvasElement,
13 |     options: { type: Object, default: () => ({}) }
14 |   },
15 | 
16 |   data () {
17 |     let { url, canvas, image, ...rest } = this.options
18 |     url = url || this.url
19 |     image = image || this.image
20 |     canvas = canvas || this.canvas
21 | 
22 |     let texture
23 |     if (url) {
24 |       if (this.baseUrl) {
25 |         url = this.baseUrl + url
26 |       }
27 |       texture = new TextureLoader().load(url)
28 |     } else if (canvas) {
29 |       texture = new CanvasTexture(canvas)
30 |     } else {
31 |       texture = new Texture(image)
32 |     }
33 | 
34 |     Object.keys(rest).forEach(k => {
35 |       if (k === 'repeat') {
36 |         texture.repeat.set(...rest[k])
37 |       } else {
38 |         texture[k] = rest[k]
39 |       }
40 |     })
41 | 
42 |     this.material.map = texture
43 |     return { texture }
44 |   },
45 | 
46 |   mounted () {
47 |     this.$emit('update:obj', this.texture)
48 |   },
49 |   beforeDestroy () {
50 |     this.$emit('update:obj', null)
51 |   },
52 |   destroyed () {
53 |     this.material.map = null
54 |   }
55 | }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/components/PositionalAudio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Object3D v-if="audio" :obj="audio"></Object3D>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { PositionalAudio, AudioLoader } from 'three'
 9 | import Object3D from './Object3D'
10 | 
11 | export default {
12 |   name: 'PositionalAudio',
13 |   mixins: [Object3D],
14 |   components: { Object3D },
15 |   inject: ['global'],
16 | 
17 |   props: {
18 |     refDistance: { type: Number, default: 10 },
19 |     volume: { type: Number, default: 1 },
20 |     paused: Boolean,
21 |     loop: Boolean,
22 |     url: String
23 |   },
24 | 
25 |   data () {
26 |     return { audio: null }
27 |   },
28 | 
29 |   watch: {
30 |     paused (v) {
31 |       if (this.audio) {
32 |         if (v) this.audio.pause()
33 |         else this.audio.play()
34 |       }
35 |     }
36 |   },
37 | 
38 |   // mounted to ensure audioListener
39 |   mounted () {
40 |     let listener = this.global.audioListener // fixme
41 |     let audio = new PositionalAudio(listener)
42 |     audio.name = 'PositionalAudio'
43 |     audio.setRefDistance(this.refDistance)
44 |     audio.setVolume(this.volume)
45 |     audio.setLoop(this.loop)
46 | 
47 |     new AudioLoader().load(this.url, buffer => {
48 |       audio.setBuffer(buffer)
49 |       if (!this.paused) audio.play()
50 |     })
51 |     this.audio = audio
52 |   },
53 | 
54 |   beforeDestroy () {
55 |     this.audio.stop()
56 |   }
57 | }
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/components/Renderer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |     <div ref="container"></div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | /* global requestAnimationFrame */
10 | import { WebGLRenderer } from 'three'
11 | 
12 | export default {
13 |   name: 'Renderer',
14 | 
15 |   provide () {
16 |     return {
17 |       parentObj: null, // avoid "injection not found" warning
18 |       _baseUrl: null,
19 |       global: this.global
20 |     }
21 |   },
22 | 
23 |   props: {
24 |     size: {
25 |       type: Object, // { w, h }
26 |       required: true
27 |     },
28 |     obj: { type: Object }
29 |   },
30 | 
31 |   data () {
32 |     let curObj = this.obj
33 | 
34 |     if (!curObj) {
35 |       curObj = new WebGLRenderer({ antialias: true })
36 |       curObj.setClearColor(0x000000)
37 |     }
38 |     curObj.name = curObj.name || curObj.type
39 |     curObj.setSize(this.size.w, this.size.h)
40 | 
41 |     // fixme: better solution for global vars
42 |     let global = {}
43 |     global.rendererSize = this.size
44 |     global.rendererDom = curObj.domElement
45 | 
46 |     return { curObj, global }
47 |   },
48 | 
49 |   mounted () {
50 |     this.$refs.container.appendChild(this.curObj.domElement)
51 |     this.animate()
52 |   },
53 | 
54 |   methods: {
55 |     animate () {
56 |       requestAnimationFrame(this.animate)
57 |       this.curObj.render(this.global.scene, this.global.camera)
58 |     }
59 |   }
60 | }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/examples/Ocean.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mesh name="Ocean" @update:obj="handleMesh">
 4 |       <geometry type="Plane" :args="[10000, 10000, 40, 40]"></geometry>
 5 |       <material type="MeshBasic" :color="0x0044ff">
 6 |         <texture :options="txtOpts"></texture>
 7 |       </material>
 8 |     </mesh>
 9 |     <animation v-if="geom" :fn="animate" :speed="5"></animation>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { RepeatWrapping } from 'three'
15 | import { Object3D } from '@'
16 | 
17 | // http://threejs.org/examples/#webgl_geometry_dynamic
18 | export default {
19 |   name: 'Ocean',
20 |   mixins: [Object3D],
21 | 
22 |   data () {
23 |     return {
24 |       txtOpts: {
25 |         url: require('./water.jpg'),
26 |         wrapS: RepeatWrapping,
27 |         wrapT: RepeatWrapping,
28 |         repeat: [5, 5]
29 |       },
30 |       geom: null
31 |     }
32 |   },
33 | 
34 |   methods: {
35 |     handleMesh (mesh) {
36 |       if (!mesh) return
37 |       let g = mesh.geometry
38 |       g.rotateX(-Math.PI / 2)
39 |       for (let i = 0, l = g.vertices.length; i < l; i++) {
40 |         g.vertices[ i ].y = 10 * Math.sin(i / 2)
41 |       }
42 |       this.geom = g
43 |     },
44 | 
45 |     animate (tt) {
46 |       let g = this.geom
47 |       for (let i = 0, l = g.vertices.length; i < l; i++) {
48 |         g.vertices[i].y = 10 * Math.sin(i / 5 + (tt + i) / 7)
49 |       }
50 |       g.verticesNeedUpdate = true
51 |     }
52 |   }
53 | }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/oimo/SpaceSystem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |     <animation :fn="uniGravity"></animation>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Animation from '@/components/Animation'
10 | 
11 | export default {
12 |   name: 'space-system',
13 |   components: { Animation },
14 |   props: {
15 |     mScale: { type: Number, default: 1 }
16 |   },
17 | 
18 |   provide () {
19 |     return { spaceVms: this.spaceVms }
20 |   },
21 | 
22 |   data () {
23 |     return { spaceVms: [] }
24 |   },
25 | 
26 |   methods: {
27 |     uniGravity () {
28 |       // apply universal gracity
29 |       // https://en.wikipedia.org/wiki/Gravitational_constant
30 |       let G = 6.67408 * (10 ** -11)
31 |       let arr = this.spaceVms
32 |       let len = arr.length
33 | 
34 |       for (let i = 0; i < len; i++) {
35 |         for (let j = i + 1; j < len - i; j++) {
36 |           let [vm1, vm2] = [i, j].map(k => arr[k])
37 |           let [b1, b2] = [vm1, vm2].map(vm => vm.body)
38 |           if (!b1 || !b2) continue
39 | 
40 |           let [m1, m2] = [b1, b2].map(b => b.mass)
41 |           let [p1, p2] = [b1, b2].map(b => b.getPosition())
42 |           let fv1 = p2.clone().sub(p1)
43 |           let fvn1 = fv1.normalize()
44 | 
45 |           let r = fv1.length()
46 |           let F = G * m1 * m2 / (r ** 2)
47 |           F = F * (this.mScale ** 2) // scale
48 | 
49 |           let F1 = fvn1.clone().multiplyScalar(F)
50 |           let F2 = F1.clone().negate()
51 |           b1.applyImpulse(p1, F1)
52 |           b2.applyImpulse(p2, F2)
53 |         }
54 |       }
55 |     }
56 |   }
57 | }
58 | </script>
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-threejs",
 3 |   "version": "0.2.0-alpha.1",
 4 |   "description": "Three.js bindings for Vue",
 5 |   "author": "Fritz Lin <uxfritz@163.com>",
 6 |   "repository": "https://github.com/fritx/vue-threejs",
 7 |   "license": "MIT",
 8 |   "main": "./lib/VueThreejs.common.js",
 9 |   "unpkg": "./lib/VueThreejs.umd.min.js",
10 |   "scripts": {
11 |     "demo:deploy": "gh-pages -d dist",
12 |     "demo:dev": "vue-cli-service serve ./examples/main.js",
13 |     "demo:build": "vue-cli-service build ./examples/main.js",
14 |     "build": "cross-env TARGET=lib vue-cli-service build ./src/index.js --target=lib --dest=lib --name=VueThreejs",
15 |     "test:unit": "vue-cli-service test:unit",
16 |     "test": "npm run test:unit",
17 |     "lint": "vue-cli-service lint"
18 |   },
19 |   "peerDependencies": {
20 |     "three": ">=0.81.2",
21 |     "vue": ">=2.0.3"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.3.0",
25 |     "@vue/cli-plugin-eslint": "^3.3.0",
26 |     "@vue/cli-plugin-unit-jest": "^3.4.0",
27 |     "@vue/cli-service": "^3.3.0",
28 |     "@vue/test-utils": "^1.0.0-beta.20",
29 |     "babel-core": "7.0.0-bridge.0",
30 |     "babel-eslint": "^10.0.1",
31 |     "babel-jest": "^23.6.0",
32 |     "cross-env": "^4.0.0",
33 |     "dat.gui": "^0.7.5",
34 |     "eslint": "^5.8.0",
35 |     "eslint-plugin-vue": "^5.0.0",
36 |     "gh-pages": "^3.1.0",
37 |     "oimo": "^1.0.9",
38 |     "three": "^0.86.0",
39 |     "vue": "^2.4.4",
40 |     "vue-template-compiler": "^2.4.4"
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended"
50 |     ],
51 |     "rules": {},
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     }
55 |   },
56 |   "postcss": {
57 |     "plugins": {
58 |       "autoprefixer": {}
59 |     }
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions",
64 |     "not ie <= 8"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <renderer :size="size">
 3 |     <dat-gui :setup="uiSetup" :model="ui"></dat-gui>
 4 |     <scene>
 5 |       <orbit-controls :position="ui.camera"
 6 |           :rotation="{ x: 2, y: 0, z: 3 }">
 7 |         <camera></camera>
 8 |         <audio-listener></audio-listener>
 9 |       </orbit-controls>
10 |       <light :hex="0xefefff" :intensity="2" :position="{ x: 50, y: 50, z: 50 }"></light>
11 |       <light :hex="0xefefff" :intensity="2" :position="{ x: -50, y: -50, z: -50 }"></light>
12 |       <ocean :position="ui.ocean"></ocean>
13 |       <sf03 :position="{ y: 10 }" :scale="ui.sf03.scale"></sf03>
14 |       <positional-audio loop url="static/Project_Utopia.ogg"
15 |           :volume="0.3" :position="{ y: 10 }"></positional-audio>
16 | 
17 |       <div :key="ui.sysKey">
18 |         <movement-system>
19 |           <mass-object :rv0="{ x: 2, y: 2 }" :v0="{ x: 10 }"
20 |               :f="{ x: -3, y: -2 }" :m="1">
21 |             <cube texture="cobblestone" :size="1"></cube>
22 |           </mass-object>
23 |           <mass-object :rv0="{ x: 2, z: 2 }" :v0="{ z: 20 }"
24 |               :f="{ y: -1, z: -8 }" :m="1.2">
25 |             <cube texture="diamond" :size="1.2"></cube>
26 |           </mass-object>
27 |           <movement-object :rv0="{ x: 2, z: 2 }" :v0="{ x: 15, z: -20 }"
28 |               :a="{ x: -6, y: .5, z: 6 }">
29 |             <cube texture="redwool" :size="1.1"></cube>
30 |           </movement-object>
31 |         </movement-system>
32 | 
33 |         <oimo-world :options="{ gravity: [0, 1, 0] }">
34 |           <space-system :m-scale="10 ** 4">
35 |             <space-object v-for="t in textures" :key="t">
36 |               <oimo-body :options="{ move: true, density: 1 }">
37 |                 <cube :texture="t" :size="1"></cube>
38 |               </oimo-body>
39 |             </space-object>
40 |           </space-system>
41 |         </oimo-world>
42 |       </div>
43 |     </scene>
44 |   </renderer>
45 | </template>
46 | 
47 | <script>
48 | import * as gui from './gui'
49 | import Ocean from './Ocean'
50 | import SF03 from './SF03'
51 | import Cube from './Cube'
52 | 
53 | export default {
54 |   name: 'App',
55 |   components: {
56 |     Cube,
57 |     Ocean,
58 |     sf03: SF03
59 |   },
60 | 
61 |   data () {
62 |     let uiSetup = gui.setupPanel
63 |     let ui = gui.getModel()
64 |     return {
65 |       textures: [
66 |         'cobblestone', 'diamond', 'redwool'
67 |       ],
68 |       ui,
69 |       uiSetup,
70 |       size: {
71 |         w: window.innerWidth,
72 |         h: window.innerHeight
73 |       }
74 |     }
75 |   },
76 | 
77 |   created () {
78 |     // hack: loop animation via vue key prop
79 |     setInterval(() => {
80 |       this.ui.sysKey += 1
81 |     }, 15000)
82 |   }
83 | }
84 | </script>
85 | 
86 | <style>
87 | body { margin: 0; overflow: hidden; }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/Object3D.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Base from '@/components/Base'
  3 | import * as THREE from 'three'
  4 | 
  5 | export default {
  6 |   name: 'Object3D',
  7 |   mixins: [Base],
  8 | 
  9 |   provide () {
 10 |     return {
 11 |       parentObj: this.curObj
 12 |     }
 13 |   },
 14 |   inject: {
 15 |     parentObj: { name: 'parentObj', default: null }
 16 |   },
 17 | 
 18 |   props: {
 19 |     name: { type: String },
 20 |     type: { type: String, default: 'Object3D' },
 21 |     obj: { type: Object },
 22 |     scale: { type: [Object, Number] }, // { x, y, z }
 23 |     position: { type: Object }, // { x, y, z }
 24 |     rotation: { type: Object } // { x, y, z }
 25 |   },
 26 | 
 27 |   watch: {
 28 |     scale: {
 29 |       deep: true,
 30 |       handler (v) {
 31 |         this.setScale(v)
 32 |       }
 33 |     },
 34 |     position: {
 35 |       deep: true,
 36 |       handler (v) {
 37 |         Object.assign(this.curObj.position, v)
 38 |       }
 39 |     },
 40 |     rotation: {
 41 |       deep: true,
 42 |       handler (v) {
 43 |         Object.assign(this.curObj.rotation, v)
 44 |       }
 45 |     },
 46 |     obj (obj) {
 47 |       this.curObj = obj
 48 |     },
 49 |     curObj (obj, oldObj) {
 50 |       this.unsetObj(oldObj)
 51 |       this.setObj(obj)
 52 |     }
 53 |   },
 54 | 
 55 |   data () {
 56 |     // fix vue 2.0 `Avoid mutating a prop directly since the value will be overwritten
 57 |     // whenever the parent component re-renders. Instead, use a data or computed
 58 |     // property based on the prop's value.`
 59 |     // https://dotdev.co/peeking-into-vue-js-2-part-1-b457e60c88c6#.918arzkow
 60 |     let curObj = this.obj
 61 | 
 62 |     // this.obj = new Object3D() // holder
 63 |     if (!curObj) {
 64 |       curObj = new THREE[this.type]()
 65 |     }
 66 | 
 67 |     return { curObj }
 68 |   },
 69 | 
 70 |   // ready => mounted + (nextTick?)
 71 |   // http://rc.vuejs.org/guide/migration.html#ready-deprecated
 72 |   mounted () {
 73 |     this.setObj(this.curObj)
 74 |   },
 75 | 
 76 |   // detached => destroyed + (nextTick?)
 77 |   // http://rc.vuejs.org/guide/migration.html#detached-deprecated
 78 |   // but we use beforeDestroy to clean up
 79 |   beforeDestroy () {
 80 |     this.unsetObj(this.curObj)
 81 |   },
 82 | 
 83 |   methods: {
 84 |     setObj (obj) {
 85 |       // fix vue 2.0 `this.constructor.name` becomes `VueComponent`
 86 |       // obj.name = obj.name || this.constructor.name
 87 |       obj.name = this.name || obj.name || obj.type
 88 | 
 89 |       this.setScale(this.scale)
 90 |       Object.assign(obj.position, this.position)
 91 |       Object.assign(obj.rotation, this.rotation)
 92 | 
 93 |       if (this.parentObj) {
 94 |         this.parentObj.add(obj)
 95 |       }
 96 |       this.$emit('update:obj', obj)
 97 |     },
 98 |     unsetObj (obj) {
 99 |       this.$emit('update:obj', null)
100 |       if (this.parentObj) {
101 |         this.parentObj.remove(obj)
102 |       }
103 |     },
104 |     setScale (v) {
105 |       if (v && typeof v === 'number') {
106 |         v = { x: v, y: v, z: v }
107 |       }
108 |       Object.assign(this.curObj.scale, v)
109 |     }
110 |   }
111 | }
112 | </script>
113 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-threejs
 2 | 
 3 | <a href="https://www.npmjs.com/package/vue-threejs"><img height="20" src="https://img.shields.io/npm/dm/vue-threejs.svg"></a>
 4 | 
 5 | > \[WIP\] [Three.js][threejs] bindings for [Vue][vue]
 6 | 
 7 | Migrated from [react-threejs][react-threejs]
 8 | 
 9 | Demos: [react-world][react-world], [vue-world][vue-world]
10 | 
11 | <img width="400" src="https://github.com/fritx/react-threejs/raw/dev/debugging.jpg">
12 | 
13 | ```js
14 | // import VueThreejs from 'vue-threejs' // below 0.2.0
15 | import * as VueThreejs from 'vue-threejs' // >= 0.2.0
16 | 
17 | Vue.use(VueThreejs)
18 | ```
19 | 
20 | ```vue
21 | <template>
22 |   <renderer :size="{ w: 600, h: 400 }">
23 |     <scene>
24 |       <camera :position="{ z: 15 }"></camera>
25 |       <mesh :obj="mesh" :position="{ y: -200 }"></mesh>
26 |       <animation :fn="animate" :speed="3"></animation>
27 |     </scene>
28 |   </renderer>
29 | </template>
30 | ```
31 | 
32 | **Physics**
33 | 
34 | ```vue
35 | <movement-system>
36 |   <mass-object :rv0="{ x: 2, y: 2 }" :v0="{ x: 10 }"
37 |       :f="{ x: -3, y: -2 }" :m="1">
38 |     <cube texture="cobblestone" :size="1"></cube>
39 |   </mass-object>
40 |   <mass-object :rv0="{ x: 2, z: 2 }" :v0="{ z: 20 }"
41 |       :f="{ y: -1, z: -8 }" :m="1.2">
42 |     <cube texture="diamond" :size="1.2"></cube>
43 |   </mass-object>
44 | </movement-system>
45 | ```
46 | 
47 | ```vue
48 | <oimo-world :options="{ gravity: [0, -9.8, 0] }">
49 |   <space-system :m-scale="10 ** 4">
50 |     <space-object v-for="t in textures" :key="t">
51 |       <oimo-body :options="{ move: true, density: 1 }">
52 |         <cube :texture="t" :size="1"></cube>
53 |       </oimo-body>
54 |     </space-object>
55 |   </space-system>
56 | </oimo-world>
57 | ```
58 | 
59 | **Roadmap**
60 | 
61 | - [x] Basic components
62 |   - [x] renderer/scene/camera/listener
63 |   - [x] object3d/light/audio/controls/animation
64 |   - [x] mesh/geometry/material/texture/obj-mtl
65 | - [ ] Watch for props change
66 |   - [x] position/rotation/obj
67 |   - [ ] more
68 | - [ ] Animation
69 |   - [x] component/animate/speed/paused/blocked
70 |   - [ ] global-control
71 | - [ ] Physical engine
72 |   - [x] movement(a/v/pos/ra/rv/rot)/mass(m/F)
73 |   - [x] gravity(G/r)/collision/oimo
74 |   - [ ] circular-motion/centripetal-force
75 | - [ ] Unit test
76 |   - [x] karma/mocha/phantom
77 |   - [ ] avoriaz/ava
78 | 
79 | **Study Notes**
80 | 
81 | - [VueJS extend component: remove parent's property](https://stackoverflow.com/questions/45680047/vuejs-extend-component-remove-parents-property)
82 | - [Vue2 migration commits of vue-threejs](https://github.com/fritx/vue-threejs/commits/vue2)
83 |   - `cannot use <slot> as root element`
84 |   - `lifecycle ready => mounted`
85 |   - `template or render function not defined`
86 |   - `avoid mutating a prop directly`
87 |   - `this.$dispatch is not a function`
88 | - [v-ref is not working with <template> element](https://github.com/vuejs/vue/issues/681#issuecomment-75802646)
89 | - [Can I use a compoent inherit other compoent?](https://github.com/vuejs/Discussion/issues/354#issuecomment-133019536)
90 | 
91 | [react-world]: http://fritx.github.io/react-threejs/example/
92 | [vue-world]: http://fritx.github.io/vue-threejs/
93 | [react-threejs]: https://github.com/fritx/react-threejs
94 | [threejs]: https://github.com/mrdoob/three.js
95 | [vue]: https://github.com/vuejs/vue
96 | 


--------------------------------------------------------------------------------
/examples/SF03.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <object3d :position="pos" base-url="static/threex/spaceships/">
  3 |     <mesh>
  4 |       <m-obj-mtl obj-url="SpaceFighter03.obj"
  5 |           mtl-url="SpaceFighter03.mtl"
  6 |           :process="getBody">
  7 |       </m-obj-mtl>
  8 |     </mesh>
  9 | 
 10 |     <mesh v-for="n in 2" :key="`1-${n}`" :scale="4"
 11 |         :position="{ x: 5 * Math.sign(n - 1.5), z: 0.8 }">
 12 |       <geometry type="Plane" :args="[1, 1]"></geometry>
 13 |       <material type="MeshBasic" :options="detonation.matOpts">
 14 |         <texture url="lensflare0_alpha.png"></texture>
 15 |       </material>
 16 |     </mesh>
 17 | 
 18 |     <object3d v-for="n in 2" :key="`2-${n}`"
 19 |         :rotation="{ y: Math.PI / 2 }" :scale="4"
 20 |         :position="{ x: 5 * Math.sign(n - 1.5), z: 2.6 }">
 21 |       <mesh v-for="n1 in 4" :key="n1"
 22 |           :rotation="{ x: (n1 - 1) * Math.PI / 4 }">
 23 |         <geometry type="Plane" :args="[1, 1]"></geometry>
 24 |         <material type="MeshBasic" :options="shoot.matOpts">
 25 |           <texture :canvas="shoot.txtCanvas"></texture>
 26 |         </material>
 27 |       </mesh>
 28 |     </object3d>
 29 | 
 30 |     <animation :fn="animate"></animation>
 31 |   </object3d>
 32 | </template>
 33 | 
 34 | <script>
 35 | import * as THREE from 'three'
 36 | import { Object3D } from '@'
 37 | 
 38 | export default {
 39 |   name: 'SF03',
 40 |   mixins: [Object3D],
 41 | 
 42 |   data () {
 43 |     return {
 44 |       detonation: {
 45 |         matOpts: {
 46 |           color: 0x00ffff,
 47 |           side: THREE.DoubleSide,
 48 |           blending: THREE.AdditiveBlending,
 49 |           opacity: 2,
 50 |           depthWrite: false,
 51 |           transparent: true
 52 |         }
 53 |       },
 54 |       shoot: {
 55 |         matOpts: {
 56 |           color: 0xffaacc,
 57 |           side: THREE.DoubleSide,
 58 |           blending: THREE.AdditiveBlending,
 59 |           depthWrite: false,
 60 |           transparent: true
 61 |         },
 62 |         txtCanvas: this.generateShootCanvas()
 63 |       },
 64 |       pos: null
 65 |     }
 66 |   },
 67 | 
 68 |   methods: {
 69 |     animate (tt) {
 70 |       this.pos = { y: Math.sin(tt) }
 71 |     },
 72 | 
 73 |     getBody (group) {
 74 |       let body = group.children[0]
 75 |       body.material.color.set(0xffffff)
 76 |       return body
 77 |     },
 78 | 
 79 |     /* eslint-disable semi, space-in-parens */
 80 |     generateShootCanvas () {
 81 |       // init canvas
 82 |       var canvas = document.createElement( 'canvas' );
 83 |       var context = canvas.getContext( '2d' );
 84 |       canvas.width = 16;
 85 |       canvas.height = 64;
 86 |       // set gradient
 87 |       var gradient = context.createRadialGradient(
 88 |         canvas.width / 2, canvas.height / 2, 0,
 89 |         canvas.width / 2, canvas.height / 2, canvas.width / 2
 90 |       );
 91 |       gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
 92 |       gradient.addColorStop( 0.5, 'rgba(192,192,192,1)' );
 93 |       gradient.addColorStop( 0.8, 'rgba(128,128,128,0.7)' );
 94 |       gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
 95 | 
 96 |       // fill the rectangle
 97 |       context.fillStyle = gradient;
 98 |       context.fillRect(0, 0, canvas.width, canvas.height);
 99 |       // return the just built canvas
100 |       return canvas;
101 |     }
102 |   }
103 | }
104 | </script>
105 | 


--------------------------------------------------------------------------------
/public/static/threex/spaceships/SpaceFighter03.obj:
--------------------------------------------------------------------------------
  1 | # Blender v2.63 (sub 0) OBJ File: ''
  2 | # www.blender.org
  3 | mtllib untitled.mtl
  4 | o SpaceFight_SpaceFight.001
  5 | v -1.034439 -1.038048 1.450947
  6 | v -0.996953 0.001000 0.479928
  7 | v -0.000408 -0.655139 0.462990
  8 | v -0.429947 -1.267683 2.631331
  9 | v -0.838125 0.216029 -2.071600
 10 | v 0.007928 -0.288612 -2.100200
 11 | v -1.158558 -0.105459 2.511654
 12 | v -0.429947 -0.094657 3.633727
 13 | v -0.649030 1.404632 0.357474
 14 | v -0.000408 1.566237 0.579334
 15 | v 0.007928 1.163335 -1.707850
 16 | v -0.544903 1.163335 -1.707850
 17 | v -1.355428 -0.757044 2.386146
 18 | v -0.383853 -0.621262 4.133536
 19 | v 0.007928 0.695179 -2.822147
 20 | v -0.412454 0.695179 -2.883235
 21 | v 0.007928 1.027830 -3.274753
 22 | v -4.861037 -0.339149 -3.080382
 23 | v -5.194243 -0.364417 -1.065594
 24 | v -4.999873 0.378078 -1.291619
 25 | v -1.171053 0.547181 1.076367
 26 | v -3.983593 -0.199257 -1.435731
 27 | v -3.758679 0.108958 -2.460340
 28 | v -0.996953 1.090030 0.410510
 29 | v -4.036351 0.236771 -2.494494
 30 | v -4.261265 0.229912 -1.469607
 31 | v -0.838125 0.909820 -1.645929
 32 | v -4.186294 0.200674 -0.575503
 33 | v -4.686103 -0.707897 -1.252745
 34 | v -4.458412 -0.707897 -3.052615
 35 | v -4.774959 0.378078 -3.091489
 36 | v -5.163699 -0.198868 0.767041
 37 | v -4.960999 -0.048675 0.792031
 38 | v -0.353587 0.000999 -2.618336
 39 | v 0.007928 0.000999 -2.679146
 40 | v -0.353587 1.027830 -3.213665
 41 | v -0.973629 0.587165 -2.414525
 42 | v -3.844757 0.322821 -3.058168
 43 | v -4.355674 -0.129729 -4.027243
 44 | v -4.094662 0.034875 -3.996700
 45 | v 0.429170 -0.094657 3.633727
 46 | v 0.383077 -0.621262 4.133535
 47 | v 0.429170 -1.267683 2.631331
 48 | v 1.050878 0.001000 0.479928
 49 | v 1.033662 -1.038048 1.450947
 50 | v 0.854008 0.216029 -2.071600
 51 | v 1.157782 -0.105459 2.511654
 52 | v 0.696013 1.404632 0.357474
 53 | v 0.560787 1.163335 -1.707850
 54 | v 1.354651 -0.757044 2.386146
 55 | v 0.428059 0.695179 -2.883235
 56 | v 5.193466 -0.283892 -1.067816
 57 | v 4.857483 -0.266038 -3.083158
 58 | v 4.957445 0.442221 -1.288843
 59 | v 1.225256 0.547181 1.076367
 60 | v 3.974486 -0.223026 -1.437119
 61 | v 3.749572 0.096241 -2.461729
 62 | v 3.980040 0.235965 -2.489774
 63 | v 1.050878 1.090030 0.410510
 64 | v 4.204954 0.228357 -1.465164
 65 | v 0.854008 0.909820 -1.645929
 66 | v 4.154973 0.187207 -0.574115
 67 | v 4.701987 -0.669023 -1.257466
 68 | v 4.477073 -0.669023 -3.058168
 69 | v 4.732531 0.442220 -3.088712
 70 | v 5.154593 -0.141057 0.766208
 71 | v 4.943562 -0.009002 0.791753
 72 | v 0.369471 0.000999 -2.618336
 73 | v 0.369471 1.027830 -3.213665
 74 | v 0.989512 0.587165 -2.414525
 75 | v 3.813437 0.187206 -3.058168
 76 | v 4.341013 -0.090771 -4.030020
 77 | v 4.071671 0.050425 -3.996700
 78 | v 0.429170 -1.267683 2.631331
 79 | v 0.429170 -0.094657 3.633727
 80 | v 0.429170 -0.094657 3.633727
 81 | v 0.383077 -0.621262 4.133535
 82 | v 0.429170 -0.094657 3.633727
 83 | v 0.383077 -0.621262 4.133535
 84 | v 0.429170 -1.267683 2.631331
 85 | v 0.383077 -0.621262 4.133535
 86 | v 0.429170 -0.094657 3.633727
 87 | vt 0.622800 0.226700
 88 | vt 0.614700 0.529600
 89 | vt 0.895000 0.555400
 90 | vt 0.825300 0.245800
 91 | vt 0.647400 0.846900
 92 | vt 0.895000 0.860600
 93 | vt 0.622800 0.241500
 94 | vt 0.793300 0.094580
 95 | vt 0.730100 0.573300
 96 | vt 0.895000 0.573300
 97 | vt 0.895000 0.826400
 98 | vt 0.757600 0.826400
 99 | vt 0.530400 0.161700
100 | vt 0.768300 0.000500
101 | vt 0.894500 0.998400
102 | vt 0.738700 0.999500
103 | vt 0.894900 0.916100
104 | vt 0.000500 0.746800
105 | vt 0.000500 0.491800
106 | vt 0.080050 0.522000
107 | vt 0.517600 0.437300
108 | vt 0.244600 0.522000
109 | vt 0.244600 0.749000
110 | vt 0.244600 0.749300
111 | vt 0.244600 0.522200
112 | vt 0.310100 0.437800
113 | vt 0.078160 0.522200
114 | vt 0.078160 0.749300
115 | vt 0.080050 0.749000
116 | vt 0.078420 0.269300
117 | vt 0.225100 0.269300
118 | vt 0.754300 0.911500
119 | vt 0.603500 0.924200
120 | vt 0.323300 0.856700
121 | vt 0.084510 0.929200
122 | vt 0.222600 0.929200
123 | vt 0.996800 0.094580
124 | vt 0.999500 0.002856
125 | vt 0.964800 0.245800
126 | usemtl VMtl01.002_F03_512.JPG
127 | s off
128 | f 1/1 2/2 3/3
129 | f 1/1 3/3 4/4
130 | f 2/2 5/5 6/6
131 | f 6/6 3/3 2/2
132 | f 7/7 8/8 9/9
133 | f 10/10 9/9 8/8
134 | f 9/9 10/10 11/11
135 | f 11/11 12/12 9/9
136 | f 13/13 14/14 8/8
137 | f 15/15 16/16 17/17
138 | f 18/18 19/19 20/20
139 | f 13/13 21/21 2/2
140 | f 5/5 2/2 22/22
141 | f 22/22 23/23 5/5
142 | f 24/2 25/24 26/25
143 | f 25/24 24/2 27/5
144 | f 26/25 28/26 24/2
145 | f 23/23 22/22 29/27
146 | f 29/27 30/28 23/23
147 | f 26/25 25/24 31/29
148 | f 31/29 20/20 26/25
149 | f 20/20 19/19 32/30
150 | f 22/22 28/26 33/31
151 | f 29/27 22/22 33/31
152 | f 26/25 20/20 33/31
153 | f 6/6 5/5 34/32
154 | f 34/32 35/17 6/6
155 | f 12/12 11/11 17/17
156 | f 17/17 36/32 12/12
157 | f 5/5 37/33 16/16
158 | f 27/5 37/33 38/34
159 | f 30/28 18/18 39/35
160 | f 23/23 30/28 40/36
161 | f 31/29 25/24 40/36
162 | f 25/24 38/34 40/36
163 | f 13/13 1/1 14/14
164 | f 1/1 4/4 14/14
165 | f 8/8 7/7 13/13
166 | f 36/32 17/17 16/16
167 | f 18/18 30/28 19/19
168 | f 30/28 29/27 19/19
169 | f 20/20 31/29 18/18
170 | f 2/2 1/1 13/13
171 | f 13/13 7/7 21/21
172 | f 7/7 24/2 21/21
173 | f 24/2 28/26 21/21
174 | f 28/26 2/2 21/21
175 | f 22/22 2/2 28/26
176 | f 19/19 29/27 32/30
177 | f 29/27 33/31 32/30
178 | f 33/31 20/20 32/30
179 | f 28/26 26/25 33/31
180 | f 37/33 27/5 16/16
181 | f 27/5 36/32 16/16
182 | f 34/32 5/5 16/16
183 | f 25/24 27/5 38/34
184 | f 37/33 5/5 38/34
185 | f 5/5 23/23 38/34
186 | f 18/18 31/29 39/35
187 | f 31/29 40/36 39/35
188 | f 40/36 30/28 39/35
189 | f 38/34 23/23 40/36
190 | f 7/7 9/9 24/2
191 | f 27/5 24/2 9/9
192 | f 9/9 12/12 27/5
193 | f 36/32 27/5 12/12
194 | f 34/32 16/16 35/17
195 | f 16/16 15/15 35/17
196 | f 41/37 10/10 8/8
197 | f 14/14 41/37 8/8
198 | f 42/38 41/37 14/14
199 | f 43/39 42/38 14/14
200 | f 4/4 43/39 14/14
201 | f 3/3 43/39 4/4
202 | f 44/2 45/1 3/3
203 | f 74/4 3/3 45/1
204 | f 46/5 44/2 6/6
205 | f 3/3 6/6 44/2
206 | f 75/8 47/7 48/9
207 | f 48/9 10/10 76/8
208 | f 10/10 48/9 11/11
209 | f 49/12 11/11 48/9
210 | f 77/14 50/13 78/8
211 | f 51/16 15/15 17/17
212 | f 52/19 53/18 54/20
213 | f 55/21 50/13 44/2
214 | f 44/2 46/5 56/22
215 | f 57/23 56/22 46/5
216 | f 58/24 59/2 60/25
217 | f 59/2 58/24 61/5
218 | f 62/26 60/25 59/2
219 | f 56/22 57/23 63/27
220 | f 64/28 63/27 57/23
221 | f 58/24 60/25 65/29
222 | f 54/20 65/29 60/25
223 | f 52/19 54/20 66/30
224 | f 62/26 56/22 67/31
225 | f 56/22 63/27 67/31
226 | f 54/20 60/25 67/31
227 | f 46/5 6/6 68/32
228 | f 35/17 68/32 6/6
229 | f 11/11 49/12 17/17
230 | f 69/32 17/17 49/12
231 | f 70/33 46/5 51/16
232 | f 70/33 61/5 71/34
233 | f 53/18 64/28 72/35
234 | f 64/28 57/23 73/36
235 | f 58/24 65/29 73/36
236 | f 71/34 58/24 73/36
237 | f 45/1 50/13 79/14
238 | f 80/4 45/1 81/14
239 | f 47/7 82/8 50/13
240 | f 17/17 69/32 51/16
241 | f 64/28 53/18 52/19
242 | f 63/27 64/28 52/19
243 | f 65/29 54/20 53/18
244 | f 45/1 44/2 50/13
245 | f 47/7 50/13 55/21
246 | f 59/2 47/7 55/21
247 | f 62/26 59/2 55/21
248 | f 44/2 62/26 55/21
249 | f 44/2 56/22 62/26
250 | f 63/27 52/19 66/30
251 | f 67/31 63/27 66/30
252 | f 54/20 67/31 66/30
253 | f 60/25 62/26 67/31
254 | f 61/5 70/33 51/16
255 | f 69/32 61/5 51/16
256 | f 46/5 68/32 51/16
257 | f 61/5 58/24 71/34
258 | f 46/5 70/33 71/34
259 | f 57/23 46/5 71/34
260 | f 65/29 53/18 72/35
261 | f 73/36 65/29 72/35
262 | f 64/28 73/36 72/35
263 | f 57/23 71/34 73/36
264 | f 48/9 47/7 59/2
265 | f 59/2 61/5 48/9
266 | f 49/12 48/9 61/5
267 | f 61/5 69/32 49/12
268 | f 51/16 68/32 35/17
269 | f 15/15 51/16 35/17
270 | 


--------------------------------------------------------------------------------
/src/threex/loaders/MTLLoader.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | import * as THREE from 'three'
  3 | 
  4 | /**
  5 |  * Loads a Wavefront .mtl file specifying materials
  6 |  *
  7 |  * @author angelxuanchang
  8 |  */
  9 | 
 10 | export default function MTLLoader( manager ) {
 11 | 
 12 |   this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
 13 | 
 14 | };
 15 | 
 16 | MTLLoader.prototype = {
 17 | 
 18 |   constructor: MTLLoader,
 19 | 
 20 |   load: function ( url, onLoad, onProgress, onError ) {
 21 | 
 22 |     var scope = this;
 23 | 
 24 |     var loader = new THREE.FileLoader( this.manager );
 25 |     loader.setPath( this.path );
 26 |     loader.load( url, function ( text ) {
 27 | 
 28 |       onLoad( scope.parse( text ) );
 29 | 
 30 |     }, onProgress, onError );
 31 | 
 32 |   },
 33 | 
 34 |   setPath: function ( value ) {
 35 | 
 36 |     this.path = value;
 37 | 
 38 |   },
 39 | 
 40 |   setBaseUrl: function( value ) {
 41 | 
 42 |     // TODO: Merge with setPath()? Or rename to setTexturePath?
 43 | 
 44 |     this.baseUrl = value;
 45 | 
 46 |   },
 47 | 
 48 |   setCrossOrigin: function ( value ) {
 49 | 
 50 |     this.crossOrigin = value;
 51 | 
 52 |   },
 53 | 
 54 |   setMaterialOptions: function ( value ) {
 55 | 
 56 |     this.materialOptions = value;
 57 | 
 58 |   },
 59 | 
 60 |   /**
 61 |    * Parses loaded MTL file
 62 |    * @param text - Content of MTL file
 63 |    * @return {THREE.MTLLoader.MaterialCreator}
 64 |    */
 65 |   parse: function ( text ) {
 66 | 
 67 |     var lines = text.split( "\n" );
 68 |     var info = {};
 69 |     var delimiter_pattern = /\s+/;
 70 |     var materialsInfo = {};
 71 | 
 72 |     for ( var i = 0; i < lines.length; i ++ ) {
 73 | 
 74 |       var line = lines[ i ];
 75 |       line = line.trim();
 76 | 
 77 |       if ( line.length === 0 || line.charAt( 0 ) === '#' ) {
 78 | 
 79 |         // Blank line or comment ignore
 80 |         continue;
 81 | 
 82 |       }
 83 | 
 84 |       var pos = line.indexOf( ' ' );
 85 | 
 86 |       var key = ( pos >= 0 ) ? line.substring( 0, pos ) : line;
 87 |       key = key.toLowerCase();
 88 | 
 89 |       var value = ( pos >= 0 ) ? line.substring( pos + 1 ) : "";
 90 |       value = value.trim();
 91 | 
 92 |       if ( key === "newmtl" ) {
 93 | 
 94 |         // New material
 95 | 
 96 |         info = { name: value };
 97 |         materialsInfo[ value ] = info;
 98 | 
 99 |       } else if ( info ) {
100 | 
101 |         if ( key === "ka" || key === "kd" || key === "ks" ) {
102 | 
103 |           var ss = value.split( delimiter_pattern, 3 );
104 |           info[ key ] = [ parseFloat( ss[ 0 ] ), parseFloat( ss[ 1 ] ), parseFloat( ss[ 2 ] ) ];
105 | 
106 |         } else {
107 | 
108 |           info[ key ] = value;
109 | 
110 |         }
111 | 
112 |       }
113 | 
114 |     }
115 | 
116 |     var materialCreator = new MTLLoader.MaterialCreator( this.baseUrl, this.materialOptions );
117 |     materialCreator.setCrossOrigin( this.crossOrigin );
118 |     materialCreator.setManager( this.manager );
119 |     materialCreator.setMaterials( materialsInfo );
120 |     return materialCreator;
121 | 
122 |   }
123 | 
124 | };
125 | 
126 | /**
127 |  * Create a new THREE-MTLLoader.MaterialCreator
128 |  * @param baseUrl - Url relative to which textures are loaded
129 |  * @param options - Set of options on how to construct the materials
130 |  *                  side: Which side to apply the material
131 |  *                        THREE.FrontSide (default), THREE.BackSide, THREE.DoubleSide
132 |  *                  wrap: What type of wrapping to apply for textures
133 |  *                        THREE.RepeatWrapping (default), THREE.ClampToEdgeWrapping, THREE.MirroredRepeatWrapping
134 |  *                  normalizeRGB: RGBs need to be normalized to 0-1 from 0-255
135 |  *                                Default: false, assumed to be already normalized
136 |  *                  ignoreZeroRGBs: Ignore values of RGBs (Ka,Kd,Ks) that are all 0's
137 |  *                                  Default: false
138 |  * @constructor
139 |  */
140 | 
141 | MTLLoader.MaterialCreator = function( baseUrl, options ) {
142 | 
143 |   this.baseUrl = baseUrl;
144 |   this.options = options;
145 |   this.materialsInfo = {};
146 |   this.materials = {};
147 |   this.materialsArray = [];
148 |   this.nameLookup = {};
149 | 
150 |   this.side = ( this.options && this.options.side ) ? this.options.side : THREE.FrontSide;
151 |   this.wrap = ( this.options && this.options.wrap ) ? this.options.wrap : THREE.RepeatWrapping;
152 | 
153 | };
154 | 
155 | MTLLoader.MaterialCreator.prototype = {
156 | 
157 |   constructor: MTLLoader.MaterialCreator,
158 | 
159 |   setCrossOrigin: function ( value ) {
160 | 
161 |     this.crossOrigin = value;
162 | 
163 |   },
164 | 
165 |   setManager: function ( value ) {
166 | 
167 |     this.manager = value;
168 | 
169 |   },
170 | 
171 |   setMaterials: function( materialsInfo ) {
172 | 
173 |     this.materialsInfo = this.convert( materialsInfo );
174 |     this.materials = {};
175 |     this.materialsArray = [];
176 |     this.nameLookup = {};
177 | 
178 |   },
179 | 
180 |   convert: function( materialsInfo ) {
181 | 
182 |     if ( ! this.options ) return materialsInfo;
183 | 
184 |     var converted = {};
185 | 
186 |     for ( var mn in materialsInfo ) {
187 | 
188 |       // Convert materials info into normalized form based on options
189 | 
190 |       var mat = materialsInfo[ mn ];
191 | 
192 |       var covmat = {};
193 | 
194 |       converted[ mn ] = covmat;
195 | 
196 |       for ( var prop in mat ) {
197 | 
198 |         var save = true;
199 |         var value = mat[ prop ];
200 |         var lprop = prop.toLowerCase();
201 | 
202 |         switch ( lprop ) {
203 | 
204 |           case 'kd':
205 |           case 'ka':
206 |           case 'ks':
207 | 
208 |             // Diffuse color (color under white light) using RGB values
209 | 
210 |             if ( this.options && this.options.normalizeRGB ) {
211 | 
212 |               value = [ value[ 0 ] / 255, value[ 1 ] / 255, value[ 2 ] / 255 ];
213 | 
214 |             }
215 | 
216 |             if ( this.options && this.options.ignoreZeroRGBs ) {
217 | 
218 |               if ( value[ 0 ] === 0 && value[ 1 ] === 0 && value[ 1 ] === 0 ) {
219 | 
220 |                 // ignore
221 | 
222 |                 save = false;
223 | 
224 |               }
225 | 
226 |             }
227 | 
228 |             break;
229 | 
230 |           default:
231 | 
232 |             break;
233 |         }
234 | 
235 |         if ( save ) {
236 | 
237 |           covmat[ lprop ] = value;
238 | 
239 |         }
240 | 
241 |       }
242 | 
243 |     }
244 | 
245 |     return converted;
246 | 
247 |   },
248 | 
249 |   preload: function () {
250 | 
251 |     for ( var mn in this.materialsInfo ) {
252 | 
253 |       this.create( mn );
254 | 
255 |     }
256 | 
257 |   },
258 | 
259 |   getIndex: function( materialName ) {
260 | 
261 |     return this.nameLookup[ materialName ];
262 | 
263 |   },
264 | 
265 |   getAsArray: function() {
266 | 
267 |     var index = 0;
268 | 
269 |     for ( var mn in this.materialsInfo ) {
270 | 
271 |       this.materialsArray[ index ] = this.create( mn );
272 |       this.nameLookup[ mn ] = index;
273 |       index ++;
274 | 
275 |     }
276 | 
277 |     return this.materialsArray;
278 | 
279 |   },
280 | 
281 |   create: function ( materialName ) {
282 | 
283 |     if ( this.materials[ materialName ] === undefined ) {
284 | 
285 |       this.createMaterial_( materialName );
286 | 
287 |     }
288 | 
289 |     return this.materials[ materialName ];
290 | 
291 |   },
292 | 
293 |   createMaterial_: function ( materialName ) {
294 | 
295 |     // Create material
296 | 
297 |     var mat = this.materialsInfo[ materialName ];
298 |     var params = {
299 | 
300 |       name: materialName,
301 |       side: this.side
302 | 
303 |     };
304 | 
305 |     for ( var prop in mat ) {
306 | 
307 |       var value = mat[ prop ];
308 | 
309 |       if ( value === '' ) continue;
310 | 
311 |       switch ( prop.toLowerCase() ) {
312 | 
313 |         // Ns is material specular exponent
314 | 
315 |         case 'kd':
316 | 
317 |           // Diffuse color (color under white light) using RGB values
318 | 
319 |           params[ 'color' ] = new THREE.Color().fromArray( value );
320 | 
321 |           break;
322 | 
323 |         case 'ks':
324 | 
325 |           // Specular color (color when light is reflected from shiny surface) using RGB values
326 |           params[ 'specular' ] = new THREE.Color().fromArray( value );
327 | 
328 |           break;
329 | 
330 |         case 'map_kd':
331 | 
332 |           // Diffuse texture map
333 | 
334 |           params[ 'map' ] = this.loadTexture( this.baseUrl + value );
335 |           params[ 'map' ].wrapS = this.wrap;
336 |           params[ 'map' ].wrapT = this.wrap;
337 | 
338 |           break;
339 | 
340 |         case 'ns':
341 | 
342 |           // The specular exponent (defines the focus of the specular highlight)
343 |           // A high exponent results in a tight, concentrated highlight. Ns values normally range from 0 to 1000.
344 | 
345 |           params[ 'shininess' ] = parseFloat( value );
346 | 
347 |           break;
348 | 
349 |         case 'd':
350 | 
351 |           if ( value < 1 ) {
352 | 
353 |             params[ 'opacity' ] = value;
354 |             params[ 'transparent' ] = true;
355 | 
356 |           }
357 | 
358 |           break;
359 | 
360 |         case 'Tr':
361 | 
362 |           if ( value > 0 ) {
363 | 
364 |             params[ 'opacity' ] = 1 - value;
365 |             params[ 'transparent' ] = true;
366 | 
367 |           }
368 | 
369 |           break;
370 | 
371 |         case 'map_bump':
372 |         case 'bump':
373 | 
374 |           // Bump texture map
375 | 
376 |           if ( params[ 'bumpMap' ] ) break; // Avoid loading twice.
377 | 
378 |           params[ 'bumpMap' ] = this.loadTexture( this.baseUrl + value );
379 |           params[ 'bumpMap' ].wrapS = this.wrap;
380 |           params[ 'bumpMap' ].wrapT = this.wrap;
381 | 
382 |           break;
383 | 
384 |         default:
385 |           break;
386 | 
387 |       }
388 | 
389 |     }
390 | 
391 |     this.materials[ materialName ] = new THREE.MeshPhongMaterial( params );
392 |     return this.materials[ materialName ];
393 | 
394 |   },
395 | 
396 | 
397 |   loadTexture: function ( url, mapping, onLoad, onProgress, onError ) {
398 | 
399 |     var texture;
400 |     var loader = THREE.Loader.Handlers.get( url );
401 |     var manager = ( this.manager !== undefined ) ? this.manager : THREE.DefaultLoadingManager;
402 | 
403 |     if ( loader === null ) {
404 | 
405 |       loader = new THREE.TextureLoader( manager );
406 | 
407 |     }
408 | 
409 |     if ( loader.setCrossOrigin ) loader.setCrossOrigin( this.crossOrigin );
410 |     texture = loader.load( url, onLoad, onProgress, onError );
411 | 
412 |     if ( mapping !== undefined ) texture.mapping = mapping;
413 | 
414 |     return texture;
415 | 
416 |   }
417 | 
418 | };
419 | 
420 | // warn: THREE.EventDispatcher: .apply is deprecated,
421 | // just inherit or Object.assign the prototype to mix-in.
422 | // THREE.EventDispatcher.prototype.apply( MTLLoader.prototype );
423 | for (let k in THREE.EventDispatcher.prototype) {
424 |   MTLLoader.prototype[k] = THREE.EventDispatcher.prototype[k]
425 | }
426 | 


--------------------------------------------------------------------------------
/src/threex/loaders/OBJLoader.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | import * as THREE from 'three'
  3 | 
  4 | /**
  5 |  * @author mrdoob / http://mrdoob.com/
  6 |  */
  7 | 
  8 | export default function OBJLoader ( manager ) {
  9 | 
 10 |   this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
 11 | 
 12 |   this.materials = null;
 13 | 
 14 | };
 15 | 
 16 | OBJLoader.prototype = {
 17 | 
 18 |   constructor: OBJLoader,
 19 | 
 20 |   load: function ( url, onLoad, onProgress, onError ) {
 21 | 
 22 |     var scope = this;
 23 | 
 24 |     var loader = new THREE.FileLoader( scope.manager );
 25 |     loader.setPath( this.path );
 26 |     loader.load( url, function ( text ) {
 27 | 
 28 |       onLoad( scope.parse( text ) );
 29 | 
 30 |     }, onProgress, onError );
 31 | 
 32 |   },
 33 | 
 34 |   setPath: function ( value ) {
 35 | 
 36 |     this.path = value;
 37 | 
 38 |   },
 39 | 
 40 |   setMaterials: function ( materials ) {
 41 | 
 42 |     this.materials = materials;
 43 | 
 44 |   },
 45 | 
 46 |   parse: function ( text ) {
 47 | 
 48 |     console.time( 'OBJLoader' );
 49 | 
 50 |     var objects = [];
 51 |     var object;
 52 |     var foundObjects = false;
 53 |     var vertices = [];
 54 |     var normals = [];
 55 |     var uvs = [];
 56 | 
 57 |     function addObject( name ) {
 58 | 
 59 |       var geometry = {
 60 |         vertices: [],
 61 |         normals: [],
 62 |         uvs: []
 63 |       };
 64 | 
 65 |       var material = {
 66 |         name: '',
 67 |         smooth: true
 68 |       };
 69 | 
 70 |       object = {
 71 |         name: name,
 72 |         geometry: geometry,
 73 |         material: material
 74 |       };
 75 | 
 76 |       objects.push( object );
 77 | 
 78 |     }
 79 | 
 80 |     function parseVertexIndex( value ) {
 81 | 
 82 |       var index = parseInt( value );
 83 | 
 84 |       return ( index >= 0 ? index - 1 : index + vertices.length / 3 ) * 3;
 85 | 
 86 |     }
 87 | 
 88 |     function parseNormalIndex( value ) {
 89 | 
 90 |       var index = parseInt( value );
 91 | 
 92 |       return ( index >= 0 ? index - 1 : index + normals.length / 3 ) * 3;
 93 | 
 94 |     }
 95 | 
 96 |     function parseUVIndex( value ) {
 97 | 
 98 |       var index = parseInt( value );
 99 | 
100 |       return ( index >= 0 ? index - 1 : index + uvs.length / 2 ) * 2;
101 | 
102 |     }
103 | 
104 |     function addVertex( a, b, c ) {
105 | 
106 |       object.geometry.vertices.push(
107 |         vertices[ a ], vertices[ a + 1 ], vertices[ a + 2 ],
108 |         vertices[ b ], vertices[ b + 1 ], vertices[ b + 2 ],
109 |         vertices[ c ], vertices[ c + 1 ], vertices[ c + 2 ]
110 |       );
111 | 
112 |     }
113 | 
114 |     function addNormal( a, b, c ) {
115 | 
116 |       object.geometry.normals.push(
117 |         normals[ a ], normals[ a + 1 ], normals[ a + 2 ],
118 |         normals[ b ], normals[ b + 1 ], normals[ b + 2 ],
119 |         normals[ c ], normals[ c + 1 ], normals[ c + 2 ]
120 |       );
121 | 
122 |     }
123 | 
124 |     function addUV( a, b, c ) {
125 | 
126 |       object.geometry.uvs.push(
127 |         uvs[ a ], uvs[ a + 1 ],
128 |         uvs[ b ], uvs[ b + 1 ],
129 |         uvs[ c ], uvs[ c + 1 ]
130 |       );
131 | 
132 |     }
133 | 
134 |     function addFace( a, b, c, d,  ua, ub, uc, ud, na, nb, nc, nd ) {
135 | 
136 |       var ia = parseVertexIndex( a );
137 |       var ib = parseVertexIndex( b );
138 |       var ic = parseVertexIndex( c );
139 |       var id;
140 | 
141 |       if ( d === undefined ) {
142 | 
143 |         addVertex( ia, ib, ic );
144 | 
145 |       } else {
146 | 
147 |         id = parseVertexIndex( d );
148 | 
149 |         addVertex( ia, ib, id );
150 |         addVertex( ib, ic, id );
151 | 
152 |       }
153 | 
154 |       if ( ua !== undefined ) {
155 | 
156 |         ia = parseUVIndex( ua );
157 |         ib = parseUVIndex( ub );
158 |         ic = parseUVIndex( uc );
159 | 
160 |         if ( d === undefined ) {
161 | 
162 |           addUV( ia, ib, ic );
163 | 
164 |         } else {
165 | 
166 |           id = parseUVIndex( ud );
167 | 
168 |           addUV( ia, ib, id );
169 |           addUV( ib, ic, id );
170 | 
171 |         }
172 | 
173 |       }
174 | 
175 |       if ( na !== undefined ) {
176 | 
177 |         ia = parseNormalIndex( na );
178 |         ib = parseNormalIndex( nb );
179 |         ic = parseNormalIndex( nc );
180 | 
181 |         if ( d === undefined ) {
182 | 
183 |           addNormal( ia, ib, ic );
184 | 
185 |         } else {
186 | 
187 |           id = parseNormalIndex( nd );
188 | 
189 |           addNormal( ia, ib, id );
190 |           addNormal( ib, ic, id );
191 | 
192 |         }
193 | 
194 |       }
195 | 
196 |     }
197 | 
198 |     addObject( '' );
199 | 
200 |     // v float float float
201 |     var vertex_pattern = /^v\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/;
202 | 
203 |     // vn float float float
204 |     var normal_pattern = /^vn\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/;
205 | 
206 |     // vt float float
207 |     var uv_pattern = /^vt\s+([\d|\.|\+|\-|e|E]+)\s+([\d|\.|\+|\-|e|E]+)/;
208 | 
209 |     // f vertex vertex vertex ...
210 |     var face_pattern1 = /^f\s+(-?\d+)\s+(-?\d+)\s+(-?\d+)(?:\s+(-?\d+))?/;
211 | 
212 |     // f vertex/uv vertex/uv vertex/uv ...
213 |     var face_pattern2 = /^f\s+((-?\d+)\/(-?\d+))\s+((-?\d+)\/(-?\d+))\s+((-?\d+)\/(-?\d+))(?:\s+((-?\d+)\/(-?\d+)))?/;
214 | 
215 |     // f vertex/uv/normal vertex/uv/normal vertex/uv/normal ...
216 |     var face_pattern3 = /^f\s+((-?\d+)\/(-?\d+)\/(-?\d+))\s+((-?\d+)\/(-?\d+)\/(-?\d+))\s+((-?\d+)\/(-?\d+)\/(-?\d+))(?:\s+((-?\d+)\/(-?\d+)\/(-?\d+)))?/;
217 | 
218 |     // f vertex//normal vertex//normal vertex//normal ...
219 |     var face_pattern4 = /^f\s+((-?\d+)\/\/(-?\d+))\s+((-?\d+)\/\/(-?\d+))\s+((-?\d+)\/\/(-?\d+))(?:\s+((-?\d+)\/\/(-?\d+)))?/;
220 | 
221 |     var object_pattern = /^[og]\s*(.+)?/;
222 | 
223 |     var smoothing_pattern = /^s\s+(\d+|on|off)/;
224 | 
225 |     //
226 | 
227 |     var lines = text.split( '\n' );
228 | 
229 |     for ( var i = 0; i < lines.length; i ++ ) {
230 | 
231 |       var line = lines[ i ];
232 |       line = line.trim();
233 | 
234 |       var result;
235 | 
236 |       if ( line.length === 0 || line.charAt( 0 ) === '#' ) {
237 | 
238 |         continue;
239 | 
240 |       } else if ( ( result = vertex_pattern.exec( line ) ) !== null ) {
241 | 
242 |         // ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
243 | 
244 |         vertices.push(
245 |           parseFloat( result[ 1 ] ),
246 |           parseFloat( result[ 2 ] ),
247 |           parseFloat( result[ 3 ] )
248 |         );
249 | 
250 |       } else if ( ( result = normal_pattern.exec( line ) ) !== null ) {
251 | 
252 |         // ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
253 | 
254 |         normals.push(
255 |           parseFloat( result[ 1 ] ),
256 |           parseFloat( result[ 2 ] ),
257 |           parseFloat( result[ 3 ] )
258 |         );
259 | 
260 |       } else if ( ( result = uv_pattern.exec( line ) ) !== null ) {
261 | 
262 |         // ["vt 0.1 0.2", "0.1", "0.2"]
263 | 
264 |         uvs.push(
265 |           parseFloat( result[ 1 ] ),
266 |           parseFloat( result[ 2 ] )
267 |         );
268 | 
269 |       } else if ( ( result = face_pattern1.exec( line ) ) !== null ) {
270 | 
271 |         // ["f 1 2 3", "1", "2", "3", undefined]
272 | 
273 |         addFace(
274 |           result[ 1 ], result[ 2 ], result[ 3 ], result[ 4 ]
275 |         );
276 | 
277 |       } else if ( ( result = face_pattern2.exec( line ) ) !== null ) {
278 | 
279 |         // ["f 1/1 2/2 3/3", " 1/1", "1", "1", " 2/2", "2", "2", " 3/3", "3", "3", undefined, undefined, undefined]
280 | 
281 |         addFace(
282 |           result[ 2 ], result[ 5 ], result[ 8 ], result[ 11 ],
283 |           result[ 3 ], result[ 6 ], result[ 9 ], result[ 12 ]
284 |         );
285 | 
286 |       } else if ( ( result = face_pattern3.exec( line ) ) !== null ) {
287 | 
288 |         // ["f 1/1/1 2/2/2 3/3/3", " 1/1/1", "1", "1", "1", " 2/2/2", "2", "2", "2", " 3/3/3", "3", "3", "3", undefined, undefined, undefined, undefined]
289 | 
290 |         addFace(
291 |           result[ 2 ], result[ 6 ], result[ 10 ], result[ 14 ],
292 |           result[ 3 ], result[ 7 ], result[ 11 ], result[ 15 ],
293 |           result[ 4 ], result[ 8 ], result[ 12 ], result[ 16 ]
294 |         );
295 | 
296 |       } else if ( ( result = face_pattern4.exec( line ) ) !== null ) {
297 | 
298 |         // ["f 1//1 2//2 3//3", " 1//1", "1", "1", " 2//2", "2", "2", " 3//3", "3", "3", undefined, undefined, undefined]
299 | 
300 |         addFace(
301 |           result[ 2 ], result[ 5 ], result[ 8 ], result[ 11 ],
302 |           undefined, undefined, undefined, undefined,
303 |           result[ 3 ], result[ 6 ], result[ 9 ], result[ 12 ]
304 |         );
305 | 
306 |       } else if ( ( result = object_pattern.exec( line ) ) !== null ) {
307 | 
308 |         // o object_name
309 |         // or
310 |         // g group_name
311 | 
312 |         var name = result[ 0 ].substr( 1 ).trim();
313 | 
314 |         if ( foundObjects === false ) {
315 | 
316 |           foundObjects = true;
317 |           object.name = name;
318 | 
319 |         } else {
320 | 
321 |           addObject( name );
322 | 
323 |         }
324 | 
325 |       } else if ( /^usemtl /.test( line ) ) {
326 | 
327 |         // material
328 | 
329 |         object.material.name = line.substring( 7 ).trim();
330 | 
331 |       } else if ( /^mtllib /.test( line ) ) {
332 | 
333 |         // mtl file
334 | 
335 |       } else if ( ( result = smoothing_pattern.exec( line ) ) !== null ) {
336 | 
337 |         // smooth shading
338 | 
339 |         object.material.smooth = result[ 1 ] === "1" || result[ 1 ] === "on";
340 | 
341 |       } else {
342 | 
343 |         throw new Error( "Unexpected line: " + line );
344 | 
345 |       }
346 | 
347 |     }
348 | 
349 |     var container = new THREE.Group();
350 | 
351 |     for ( var i = 0, l = objects.length; i < l; i ++ ) {
352 | 
353 |       object = objects[ i ];
354 |       var geometry = object.geometry;
355 | 
356 |       var buffergeometry = new THREE.BufferGeometry();
357 | 
358 |       buffergeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( geometry.vertices ), 3 ) );
359 | 
360 |       if ( geometry.normals.length > 0 ) {
361 | 
362 |         buffergeometry.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( geometry.normals ), 3 ) );
363 | 
364 |       } else {
365 | 
366 |         buffergeometry.computeVertexNormals();
367 | 
368 |       }
369 | 
370 |       if ( geometry.uvs.length > 0 ) {
371 | 
372 |         buffergeometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( geometry.uvs ), 2 ) );
373 | 
374 |       }
375 | 
376 |       var material;
377 | 
378 |       if ( this.materials !== null ) {
379 | 
380 |         material = this.materials.create( object.material.name );
381 | 
382 |       }
383 | 
384 |       if ( !material ) {
385 | 
386 |         material = new THREE.MeshPhongMaterial();
387 |         material.name = object.material.name;
388 | 
389 |       }
390 | 
391 |       material.shading = object.material.smooth ? THREE.SmoothShading : THREE.FlatShading;
392 | 
393 |       var mesh = new THREE.Mesh( buffergeometry, material );
394 |       mesh.name = object.name;
395 | 
396 |       container.add( mesh );
397 | 
398 |     }
399 | 
400 |     console.timeEnd( 'OBJLoader' );
401 | 
402 |     return container;
403 | 
404 |   }
405 | 
406 | };
407 | 


--------------------------------------------------------------------------------
/src/threex/controls/OrbitControls.js:
--------------------------------------------------------------------------------
   1 | /* eslint-disable */
   2 | import * as THREE from 'three'
   3 | 
   4 | /**
   5 |  * @author qiao / https://github.com/qiao
   6 |  * @author mrdoob / http://mrdoob.com
   7 |  * @author alteredq / http://alteredqualia.com/
   8 |  * @author WestLangley / http://github.com/WestLangley
   9 |  * @author erich666 / http://erichaines.com
  10 |  */
  11 | 
  12 | // This set of controls performs orbiting, dollying (zooming), and panning.
  13 | // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
  14 | //
  15 | //    Orbit - left mouse / touch: one finger move
  16 | //    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
  17 | //    Pan - right mouse, or arrow keys / touch: three finter swipe
  18 | 
  19 | export default function OrbitControls ( object, domElement ) {
  20 | 
  21 |   this.object = object;
  22 | 
  23 |   this.domElement = ( domElement !== undefined ) ? domElement : document;
  24 | 
  25 |   // Set to false to disable this control
  26 |   this.enabled = true;
  27 | 
  28 |   // "target" sets the location of focus, where the object orbits around
  29 |   this.target = new THREE.Vector3();
  30 | 
  31 |   // How far you can dolly in and out ( PerspectiveCamera only )
  32 |   this.minDistance = 0;
  33 |   this.maxDistance = Infinity;
  34 | 
  35 |   // How far you can zoom in and out ( OrthographicCamera only )
  36 |   this.minZoom = 0;
  37 |   this.maxZoom = Infinity;
  38 | 
  39 |   // How far you can orbit vertically, upper and lower limits.
  40 |   // Range is 0 to Math.PI radians.
  41 |   this.minPolarAngle = 0; // radians
  42 |   this.maxPolarAngle = Math.PI; // radians
  43 | 
  44 |   // How far you can orbit horizontally, upper and lower limits.
  45 |   // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
  46 |   this.minAzimuthAngle = - Infinity; // radians
  47 |   this.maxAzimuthAngle = Infinity; // radians
  48 | 
  49 |   // Set to true to enable damping (inertia)
  50 |   // If damping is enabled, you must call controls.update() in your animation loop
  51 |   this.enableDamping = false;
  52 |   this.dampingFactor = 0.25;
  53 | 
  54 |   // This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
  55 |   // Set to false to disable zooming
  56 |   this.enableZoom = true;
  57 |   this.zoomSpeed = 1.0;
  58 | 
  59 |   // Set to false to disable rotating
  60 |   this.enableRotate = true;
  61 |   this.rotateSpeed = 1.0;
  62 | 
  63 |   // Set to false to disable panning
  64 |   this.enablePan = true;
  65 |   this.keyPanSpeed = 7.0; // pixels moved per arrow key push
  66 | 
  67 |   // Set to true to automatically rotate around the target
  68 |   // If auto-rotate is enabled, you must call controls.update() in your animation loop
  69 |   this.autoRotate = false;
  70 |   this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
  71 | 
  72 |   // Set to false to disable use of the keys
  73 |   this.enableKeys = true;
  74 | 
  75 |   // The four arrow keys
  76 |   this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
  77 | 
  78 |   // Mouse buttons
  79 |   this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
  80 | 
  81 |   // for reset
  82 |   this.target0 = this.target.clone();
  83 |   this.position0 = this.object.position.clone();
  84 |   this.zoom0 = this.object.zoom;
  85 | 
  86 |   //
  87 |   // public methods
  88 |   //
  89 | 
  90 |   this.getPolarAngle = function () {
  91 | 
  92 |     return phi;
  93 | 
  94 |   };
  95 | 
  96 |   this.getAzimuthalAngle = function () {
  97 | 
  98 |     return theta;
  99 | 
 100 |   };
 101 | 
 102 |   this.reset = function () {
 103 | 
 104 |     scope.target.copy( scope.target0 );
 105 |     scope.object.position.copy( scope.position0 );
 106 |     scope.object.zoom = scope.zoom0;
 107 | 
 108 |     scope.object.updateProjectionMatrix();
 109 |     scope.dispatchEvent( changeEvent );
 110 | 
 111 |     scope.update();
 112 | 
 113 |     state = STATE.NONE;
 114 | 
 115 |   };
 116 | 
 117 |   // this method is exposed, but perhaps it would be better if we can make it private...
 118 |   this.update = function() {
 119 | 
 120 |     var offset = new THREE.Vector3();
 121 | 
 122 |     // so camera.up is the orbit axis
 123 |     var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
 124 |     var quatInverse = quat.clone().inverse();
 125 | 
 126 |     var lastPosition = new THREE.Vector3();
 127 |     var lastQuaternion = new THREE.Quaternion();
 128 | 
 129 |     return function () {
 130 | 
 131 |       var position = scope.object.position;
 132 | 
 133 |       offset.copy( position ).sub( scope.target );
 134 | 
 135 |       // rotate offset to "y-axis-is-up" space
 136 |       offset.applyQuaternion( quat );
 137 | 
 138 |       // angle from z-axis around y-axis
 139 |       spherical.setFromVector3( offset );
 140 | 
 141 |       if ( scope.autoRotate && state === STATE.NONE ) {
 142 | 
 143 |         rotateLeft( getAutoRotationAngle() );
 144 | 
 145 |       }
 146 | 
 147 |       spherical.theta += sphericalDelta.theta;
 148 |       spherical.phi += sphericalDelta.phi;
 149 | 
 150 |       // restrict theta to be between desired limits
 151 |       spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
 152 | 
 153 |       // restrict phi to be between desired limits
 154 |       spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
 155 | 
 156 |       spherical.makeSafe();
 157 | 
 158 | 
 159 |       spherical.radius *= scale;
 160 | 
 161 |       // restrict radius to be between desired limits
 162 |       spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
 163 | 
 164 |       // move target to panned location
 165 |       scope.target.add( panOffset );
 166 | 
 167 |       offset.setFromSpherical( spherical );
 168 | 
 169 |       // rotate offset back to "camera-up-vector-is-up" space
 170 |       offset.applyQuaternion( quatInverse );
 171 | 
 172 |       position.copy( scope.target ).add( offset );
 173 | 
 174 |       scope.object.lookAt( scope.target );
 175 | 
 176 |       if ( scope.enableDamping === true ) {
 177 | 
 178 |         sphericalDelta.theta *= ( 1 - scope.dampingFactor );
 179 |         sphericalDelta.phi *= ( 1 - scope.dampingFactor );
 180 | 
 181 |       } else {
 182 | 
 183 |         sphericalDelta.set( 0, 0, 0 );
 184 | 
 185 |       }
 186 | 
 187 |       scale = 1;
 188 |       panOffset.set( 0, 0, 0 );
 189 | 
 190 |       // update condition is:
 191 |       // min(camera displacement, camera rotation in radians)^2 > EPS
 192 |       // using small-angle approximation cos(x/2) = 1 - x^2 / 8
 193 | 
 194 |       if ( zoomChanged ||
 195 |         lastPosition.distanceToSquared( scope.object.position ) > EPS ||
 196 |         8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
 197 | 
 198 |         scope.dispatchEvent( changeEvent );
 199 | 
 200 |         lastPosition.copy( scope.object.position );
 201 |         lastQuaternion.copy( scope.object.quaternion );
 202 |         zoomChanged = false;
 203 | 
 204 |         return true;
 205 | 
 206 |       }
 207 | 
 208 |       return false;
 209 | 
 210 |     };
 211 | 
 212 |   }();
 213 | 
 214 |   this.dispose = function() {
 215 | 
 216 |     scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
 217 |     scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
 218 |     scope.domElement.removeEventListener( 'mousewheel', onMouseWheel, false );
 219 |     scope.domElement.removeEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox
 220 | 
 221 |     scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
 222 |     scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
 223 |     scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
 224 | 
 225 |     document.removeEventListener( 'mousemove', onMouseMove, false );
 226 |     document.removeEventListener( 'mouseup', onMouseUp, false );
 227 |     document.removeEventListener( 'mouseout', onMouseUp, false );
 228 | 
 229 |     // window.removeEventListener( 'keydown', onKeyDown, false );
 230 | 
 231 |     //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
 232 | 
 233 |   };
 234 | 
 235 |   //
 236 |   // internals
 237 |   //
 238 | 
 239 |   var scope = this;
 240 | 
 241 |   var changeEvent = { type: 'change' };
 242 |   var startEvent = { type: 'start' };
 243 |   var endEvent = { type: 'end' };
 244 | 
 245 |   var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 };
 246 | 
 247 |   var state = STATE.NONE;
 248 | 
 249 |   var EPS = 0.000001;
 250 | 
 251 |   // current position in spherical coordinates
 252 |   var spherical = new THREE.Spherical();
 253 |   var sphericalDelta = new THREE.Spherical();
 254 | 
 255 |   var scale = 1;
 256 |   var panOffset = new THREE.Vector3();
 257 |   var zoomChanged = false;
 258 | 
 259 |   var rotateStart = new THREE.Vector2();
 260 |   var rotateEnd = new THREE.Vector2();
 261 |   var rotateDelta = new THREE.Vector2();
 262 | 
 263 |   var panStart = new THREE.Vector2();
 264 |   var panEnd = new THREE.Vector2();
 265 |   var panDelta = new THREE.Vector2();
 266 | 
 267 |   var dollyStart = new THREE.Vector2();
 268 |   var dollyEnd = new THREE.Vector2();
 269 |   var dollyDelta = new THREE.Vector2();
 270 | 
 271 |   function getAutoRotationAngle() {
 272 | 
 273 |     return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
 274 | 
 275 |   }
 276 | 
 277 |   function getZoomScale() {
 278 | 
 279 |     return Math.pow( 0.95, scope.zoomSpeed );
 280 | 
 281 |   }
 282 | 
 283 |   function rotateLeft( angle ) {
 284 | 
 285 |     sphericalDelta.theta -= angle;
 286 | 
 287 |   }
 288 | 
 289 |   function rotateUp( angle ) {
 290 | 
 291 |     sphericalDelta.phi -= angle;
 292 | 
 293 |   }
 294 | 
 295 |   var panLeft = function() {
 296 | 
 297 |     var v = new THREE.Vector3();
 298 | 
 299 |     return function panLeft( distance, objectMatrix ) {
 300 | 
 301 |       v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
 302 |       v.multiplyScalar( - distance );
 303 | 
 304 |       panOffset.add( v );
 305 | 
 306 |     };
 307 | 
 308 |   }();
 309 | 
 310 |   var panUp = function() {
 311 | 
 312 |     var v = new THREE.Vector3();
 313 | 
 314 |     return function panUp( distance, objectMatrix ) {
 315 | 
 316 |       v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix
 317 |       v.multiplyScalar( distance );
 318 | 
 319 |       panOffset.add( v );
 320 | 
 321 |     };
 322 | 
 323 |   }();
 324 | 
 325 |   // deltaX and deltaY are in pixels; right and down are positive
 326 |   var pan = function() {
 327 | 
 328 |     var offset = new THREE.Vector3();
 329 | 
 330 |     return function( deltaX, deltaY ) {
 331 | 
 332 |       var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
 333 | 
 334 |       if ( scope.object instanceof THREE.PerspectiveCamera ) {
 335 | 
 336 |         // perspective
 337 |         var position = scope.object.position;
 338 |         offset.copy( position ).sub( scope.target );
 339 |         var targetDistance = offset.length();
 340 | 
 341 |         // half of the fov is center to top of screen
 342 |         targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
 343 | 
 344 |         // we actually don't use screenWidth, since perspective camera is fixed to screen height
 345 |         panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
 346 |         panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
 347 | 
 348 |       } else if ( scope.object instanceof THREE.OrthographicCamera ) {
 349 | 
 350 |         // orthographic
 351 |         panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
 352 |         panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
 353 | 
 354 |       } else {
 355 | 
 356 |         // camera neither orthographic nor perspective
 357 |         console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
 358 |         scope.enablePan = false;
 359 | 
 360 |       }
 361 | 
 362 |     };
 363 | 
 364 |   }();
 365 | 
 366 |   function dollyIn( dollyScale ) {
 367 | 
 368 |     if ( scope.object instanceof THREE.PerspectiveCamera ) {
 369 | 
 370 |       scale /= dollyScale;
 371 | 
 372 |     } else if ( scope.object instanceof THREE.OrthographicCamera ) {
 373 | 
 374 |       scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
 375 |       scope.object.updateProjectionMatrix();
 376 |       zoomChanged = true;
 377 | 
 378 |     } else {
 379 | 
 380 |       console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
 381 |       scope.enableZoom = false;
 382 | 
 383 |     }
 384 | 
 385 |   }
 386 | 
 387 |   function dollyOut( dollyScale ) {
 388 | 
 389 |     if ( scope.object instanceof THREE.PerspectiveCamera ) {
 390 | 
 391 |       scale *= dollyScale;
 392 | 
 393 |     } else if ( scope.object instanceof THREE.OrthographicCamera ) {
 394 | 
 395 |       scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
 396 |       scope.object.updateProjectionMatrix();
 397 |       zoomChanged = true;
 398 | 
 399 |     } else {
 400 | 
 401 |       console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
 402 |       scope.enableZoom = false;
 403 | 
 404 |     }
 405 | 
 406 |   }
 407 | 
 408 |   //
 409 |   // event callbacks - update the object state
 410 |   //
 411 | 
 412 |   function handleMouseDownRotate( event ) {
 413 | 
 414 |     //console.log( 'handleMouseDownRotate' );
 415 | 
 416 |     rotateStart.set( event.clientX, event.clientY );
 417 | 
 418 |   }
 419 | 
 420 |   function handleMouseDownDolly( event ) {
 421 | 
 422 |     //console.log( 'handleMouseDownDolly' );
 423 | 
 424 |     dollyStart.set( event.clientX, event.clientY );
 425 | 
 426 |   }
 427 | 
 428 |   function handleMouseDownPan( event ) {
 429 | 
 430 |     //console.log( 'handleMouseDownPan' );
 431 | 
 432 |     panStart.set( event.clientX, event.clientY );
 433 | 
 434 |   }
 435 | 
 436 |   function handleMouseMoveRotate( event ) {
 437 | 
 438 |     //console.log( 'handleMouseMoveRotate' );
 439 | 
 440 |     rotateEnd.set( event.clientX, event.clientY );
 441 |     rotateDelta.subVectors( rotateEnd, rotateStart );
 442 | 
 443 |     var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
 444 | 
 445 |     // rotating across whole screen goes 360 degrees around
 446 |     rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
 447 | 
 448 |     // rotating up and down along whole screen attempts to go 360, but limited to 180
 449 |     rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
 450 | 
 451 |     rotateStart.copy( rotateEnd );
 452 | 
 453 |     scope.update();
 454 | 
 455 |   }
 456 | 
 457 |   function handleMouseMoveDolly( event ) {
 458 | 
 459 |     //console.log( 'handleMouseMoveDolly' );
 460 | 
 461 |     dollyEnd.set( event.clientX, event.clientY );
 462 | 
 463 |     dollyDelta.subVectors( dollyEnd, dollyStart );
 464 | 
 465 |     if ( dollyDelta.y > 0 ) {
 466 | 
 467 |       dollyIn( getZoomScale() );
 468 | 
 469 |     } else if ( dollyDelta.y < 0 ) {
 470 | 
 471 |       dollyOut( getZoomScale() );
 472 | 
 473 |     }
 474 | 
 475 |     dollyStart.copy( dollyEnd );
 476 | 
 477 |     scope.update();
 478 | 
 479 |   }
 480 | 
 481 |   function handleMouseMovePan( event ) {
 482 | 
 483 |     //console.log( 'handleMouseMovePan' );
 484 | 
 485 |     panEnd.set( event.clientX, event.clientY );
 486 | 
 487 |     panDelta.subVectors( panEnd, panStart );
 488 | 
 489 |     pan( panDelta.x, panDelta.y );
 490 | 
 491 |     panStart.copy( panEnd );
 492 | 
 493 |     scope.update();
 494 | 
 495 |   }
 496 | 
 497 |   function handleMouseUp( event ) {
 498 | 
 499 |     //console.log( 'handleMouseUp' );
 500 | 
 501 |   }
 502 | 
 503 |   function handleMouseWheel( event ) {
 504 | 
 505 |     //console.log( 'handleMouseWheel' );
 506 | 
 507 |     var delta = 0;
 508 | 
 509 |     if ( event.wheelDelta !== undefined ) {
 510 | 
 511 |       // WebKit / Opera / Explorer 9
 512 | 
 513 |       delta = event.wheelDelta;
 514 | 
 515 |     } else if ( event.detail !== undefined ) {
 516 | 
 517 |       // Firefox
 518 | 
 519 |       delta = - event.detail;
 520 | 
 521 |     }
 522 | 
 523 |     if ( delta > 0 ) {
 524 | 
 525 |       dollyOut( getZoomScale() );
 526 | 
 527 |     } else if ( delta < 0 ) {
 528 | 
 529 |       dollyIn( getZoomScale() );
 530 | 
 531 |     }
 532 | 
 533 |     scope.update();
 534 | 
 535 |   }
 536 | 
 537 |   function handleKeyDown( event ) {
 538 | 
 539 |     //console.log( 'handleKeyDown' );
 540 | 
 541 |     switch ( event.keyCode ) {
 542 | 
 543 |       case scope.keys.UP:
 544 |         pan( 0, scope.keyPanSpeed );
 545 |         scope.update();
 546 |         break;
 547 | 
 548 |       case scope.keys.BOTTOM:
 549 |         pan( 0, - scope.keyPanSpeed );
 550 |         scope.update();
 551 |         break;
 552 | 
 553 |       case scope.keys.LEFT:
 554 |         pan( scope.keyPanSpeed, 0 );
 555 |         scope.update();
 556 |         break;
 557 | 
 558 |       case scope.keys.RIGHT:
 559 |         pan( - scope.keyPanSpeed, 0 );
 560 |         scope.update();
 561 |         break;
 562 | 
 563 |     }
 564 | 
 565 |   }
 566 | 
 567 |   function handleTouchStartRotate( event ) {
 568 | 
 569 |     //console.log( 'handleTouchStartRotate' );
 570 | 
 571 |     rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 572 | 
 573 |   }
 574 | 
 575 |   function handleTouchStartDolly( event ) {
 576 | 
 577 |     //console.log( 'handleTouchStartDolly' );
 578 | 
 579 |     var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
 580 |     var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
 581 | 
 582 |     var distance = Math.sqrt( dx * dx + dy * dy );
 583 | 
 584 |     dollyStart.set( 0, distance );
 585 | 
 586 |   }
 587 | 
 588 |   function handleTouchStartPan( event ) {
 589 | 
 590 |     //console.log( 'handleTouchStartPan' );
 591 | 
 592 |     panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 593 | 
 594 |   }
 595 | 
 596 |   function handleTouchMoveRotate( event ) {
 597 | 
 598 |     //console.log( 'handleTouchMoveRotate' );
 599 | 
 600 |     rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 601 |     rotateDelta.subVectors( rotateEnd, rotateStart );
 602 | 
 603 |     var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
 604 | 
 605 |     // rotating across whole screen goes 360 degrees around
 606 |     rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
 607 | 
 608 |     // rotating up and down along whole screen attempts to go 360, but limited to 180
 609 |     rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
 610 | 
 611 |     rotateStart.copy( rotateEnd );
 612 | 
 613 |     scope.update();
 614 | 
 615 |   }
 616 | 
 617 |   function handleTouchMoveDolly( event ) {
 618 | 
 619 |     //console.log( 'handleTouchMoveDolly' );
 620 | 
 621 |     var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
 622 |     var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
 623 | 
 624 |     var distance = Math.sqrt( dx * dx + dy * dy );
 625 | 
 626 |     dollyEnd.set( 0, distance );
 627 | 
 628 |     dollyDelta.subVectors( dollyEnd, dollyStart );
 629 | 
 630 |     if ( dollyDelta.y > 0 ) {
 631 | 
 632 |       dollyOut( getZoomScale() );
 633 | 
 634 |     } else if ( dollyDelta.y < 0 ) {
 635 | 
 636 |       dollyIn( getZoomScale() );
 637 | 
 638 |     }
 639 | 
 640 |     dollyStart.copy( dollyEnd );
 641 | 
 642 |     scope.update();
 643 | 
 644 |   }
 645 | 
 646 |   function handleTouchMovePan( event ) {
 647 | 
 648 |     //console.log( 'handleTouchMovePan' );
 649 | 
 650 |     panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
 651 | 
 652 |     panDelta.subVectors( panEnd, panStart );
 653 | 
 654 |     pan( panDelta.x, panDelta.y );
 655 | 
 656 |     panStart.copy( panEnd );
 657 | 
 658 |     scope.update();
 659 | 
 660 |   }
 661 | 
 662 |   function handleTouchEnd( event ) {
 663 | 
 664 |     //console.log( 'handleTouchEnd' );
 665 | 
 666 |   }
 667 | 
 668 |   //
 669 |   // event handlers - FSM: listen for events and reset state
 670 |   //
 671 | 
 672 |   function onMouseDown( event ) {
 673 | 
 674 |     if ( scope.enabled === false ) return;
 675 | 
 676 |     event.preventDefault();
 677 | 
 678 |     if ( event.button === scope.mouseButtons.ORBIT ) {
 679 | 
 680 |       if ( scope.enableRotate === false ) return;
 681 | 
 682 |       handleMouseDownRotate( event );
 683 | 
 684 |       state = STATE.ROTATE;
 685 | 
 686 |     } else if ( event.button === scope.mouseButtons.ZOOM ) {
 687 | 
 688 |       if ( scope.enableZoom === false ) return;
 689 | 
 690 |       handleMouseDownDolly( event );
 691 | 
 692 |       state = STATE.DOLLY;
 693 | 
 694 |     } else if ( event.button === scope.mouseButtons.PAN ) {
 695 | 
 696 |       if ( scope.enablePan === false ) return;
 697 | 
 698 |       handleMouseDownPan( event );
 699 | 
 700 |       state = STATE.PAN;
 701 | 
 702 |     }
 703 | 
 704 |     if ( state !== STATE.NONE ) {
 705 | 
 706 |       document.addEventListener( 'mousemove', onMouseMove, false );
 707 |       document.addEventListener( 'mouseup', onMouseUp, false );
 708 |       document.addEventListener( 'mouseout', onMouseUp, false );
 709 | 
 710 |       scope.dispatchEvent( startEvent );
 711 | 
 712 |     }
 713 | 
 714 |   }
 715 | 
 716 |   function onMouseMove( event ) {
 717 | 
 718 |     if ( scope.enabled === false ) return;
 719 | 
 720 |     event.preventDefault();
 721 | 
 722 |     if ( state === STATE.ROTATE ) {
 723 | 
 724 |       if ( scope.enableRotate === false ) return;
 725 | 
 726 |       handleMouseMoveRotate( event );
 727 | 
 728 |     } else if ( state === STATE.DOLLY ) {
 729 | 
 730 |       if ( scope.enableZoom === false ) return;
 731 | 
 732 |       handleMouseMoveDolly( event );
 733 | 
 734 |     } else if ( state === STATE.PAN ) {
 735 | 
 736 |       if ( scope.enablePan === false ) return;
 737 | 
 738 |       handleMouseMovePan( event );
 739 | 
 740 |     }
 741 | 
 742 |   }
 743 | 
 744 |   function onMouseUp( event ) {
 745 | 
 746 |     if ( scope.enabled === false ) return;
 747 | 
 748 |     handleMouseUp( event );
 749 | 
 750 |     document.removeEventListener( 'mousemove', onMouseMove, false );
 751 |     document.removeEventListener( 'mouseup', onMouseUp, false );
 752 |     document.removeEventListener( 'mouseout', onMouseUp, false );
 753 | 
 754 |     scope.dispatchEvent( endEvent );
 755 | 
 756 |     state = STATE.NONE;
 757 | 
 758 |   }
 759 | 
 760 |   function onMouseWheel( event ) {
 761 | 
 762 |     if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
 763 | 
 764 |     event.preventDefault();
 765 |     event.stopPropagation();
 766 | 
 767 |     handleMouseWheel( event );
 768 | 
 769 |     scope.dispatchEvent( startEvent ); // not sure why these are here...
 770 |     scope.dispatchEvent( endEvent );
 771 | 
 772 |   }
 773 | 
 774 |   function onKeyDown( event ) {
 775 | 
 776 |     if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
 777 | 
 778 |     handleKeyDown( event );
 779 | 
 780 |   }
 781 | 
 782 |   function onTouchStart( event ) {
 783 | 
 784 |     if ( scope.enabled === false ) return;
 785 | 
 786 |     switch ( event.touches.length ) {
 787 | 
 788 |       case 1: // one-fingered touch: rotate
 789 | 
 790 |         if ( scope.enableRotate === false ) return;
 791 | 
 792 |         handleTouchStartRotate( event );
 793 | 
 794 |         state = STATE.TOUCH_ROTATE;
 795 | 
 796 |         break;
 797 | 
 798 |       case 2: // two-fingered touch: dolly
 799 | 
 800 |         if ( scope.enableZoom === false ) return;
 801 | 
 802 |         handleTouchStartDolly( event );
 803 | 
 804 |         state = STATE.TOUCH_DOLLY;
 805 | 
 806 |         break;
 807 | 
 808 |       case 3: // three-fingered touch: pan
 809 | 
 810 |         if ( scope.enablePan === false ) return;
 811 | 
 812 |         handleTouchStartPan( event );
 813 | 
 814 |         state = STATE.TOUCH_PAN;
 815 | 
 816 |         break;
 817 | 
 818 |       default:
 819 | 
 820 |         state = STATE.NONE;
 821 | 
 822 |     }
 823 | 
 824 |     if ( state !== STATE.NONE ) {
 825 | 
 826 |       scope.dispatchEvent( startEvent );
 827 | 
 828 |     }
 829 | 
 830 |   }
 831 | 
 832 |   function onTouchMove( event ) {
 833 | 
 834 |     if ( scope.enabled === false ) return;
 835 | 
 836 |     event.preventDefault();
 837 |     event.stopPropagation();
 838 | 
 839 |     switch ( event.touches.length ) {
 840 | 
 841 |       case 1: // one-fingered touch: rotate
 842 | 
 843 |         if ( scope.enableRotate === false ) return;
 844 |         if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?...
 845 | 
 846 |         handleTouchMoveRotate( event );
 847 | 
 848 |         break;
 849 | 
 850 |       case 2: // two-fingered touch: dolly
 851 | 
 852 |         if ( scope.enableZoom === false ) return;
 853 |         if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
 854 | 
 855 |         handleTouchMoveDolly( event );
 856 | 
 857 |         break;
 858 | 
 859 |       case 3: // three-fingered touch: pan
 860 | 
 861 |         if ( scope.enablePan === false ) return;
 862 |         if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
 863 | 
 864 |         handleTouchMovePan( event );
 865 | 
 866 |         break;
 867 | 
 868 |       default:
 869 | 
 870 |         state = STATE.NONE;
 871 | 
 872 |     }
 873 | 
 874 |   }
 875 | 
 876 |   function onTouchEnd( event ) {
 877 | 
 878 |     if ( scope.enabled === false ) return;
 879 | 
 880 |     handleTouchEnd( event );
 881 | 
 882 |     scope.dispatchEvent( endEvent );
 883 | 
 884 |     state = STATE.NONE;
 885 | 
 886 |   }
 887 | 
 888 |   function onContextMenu( event ) {
 889 | 
 890 |     event.preventDefault();
 891 | 
 892 |   }
 893 | 
 894 |   //
 895 | 
 896 |   scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
 897 | 
 898 |   scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
 899 |   scope.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
 900 |   scope.domElement.addEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox
 901 | 
 902 |   scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
 903 |   scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
 904 |   scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
 905 | 
 906 |   // window.addEventListener( 'keydown', onKeyDown, false );
 907 | 
 908 |   // force an update at start
 909 | 
 910 |   this.update();
 911 | 
 912 | };
 913 | 
 914 | OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
 915 | OrbitControls.prototype.constructor = OrbitControls;
 916 | 
 917 | Object.defineProperties( OrbitControls.prototype, {
 918 | 
 919 |   center: {
 920 | 
 921 |     get: function () {
 922 | 
 923 |       console.warn( 'THREE.OrbitControls: .center has been renamed to .target' );
 924 |       return this.target;
 925 | 
 926 |     }
 927 | 
 928 |   },
 929 | 
 930 |   // backward compatibility
 931 | 
 932 |   noZoom: {
 933 | 
 934 |     get: function () {
 935 | 
 936 |       console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
 937 |       return ! this.enableZoom;
 938 | 
 939 |     },
 940 | 
 941 |     set: function ( value ) {
 942 | 
 943 |       console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
 944 |       this.enableZoom = ! value;
 945 | 
 946 |     }
 947 | 
 948 |   },
 949 | 
 950 |   noRotate: {
 951 | 
 952 |     get: function () {
 953 | 
 954 |       console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
 955 |       return ! this.enableRotate;
 956 | 
 957 |     },
 958 | 
 959 |     set: function ( value ) {
 960 | 
 961 |       console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
 962 |       this.enableRotate = ! value;
 963 | 
 964 |     }
 965 | 
 966 |   },
 967 | 
 968 |   noPan: {
 969 | 
 970 |     get: function () {
 971 | 
 972 |       console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
 973 |       return ! this.enablePan;
 974 | 
 975 |     },
 976 | 
 977 |     set: function ( value ) {
 978 | 
 979 |       console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
 980 |       this.enablePan = ! value;
 981 | 
 982 |     }
 983 | 
 984 |   },
 985 | 
 986 |   noKeys: {
 987 | 
 988 |     get: function () {
 989 | 
 990 |       console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
 991 |       return ! this.enableKeys;
 992 | 
 993 |     },
 994 | 
 995 |     set: function ( value ) {
 996 | 
 997 |       console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
 998 |       this.enableKeys = ! value;
 999 | 
1000 |     }
1001 | 
1002 |   },
1003 | 
1004 |   staticMoving : {
1005 | 
1006 |     get: function () {
1007 | 
1008 |       console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
1009 |       return ! this.constraint.enableDamping;
1010 | 
1011 |     },
1012 | 
1013 |     set: function ( value ) {
1014 | 
1015 |       console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
1016 |       this.constraint.enableDamping = ! value;
1017 | 
1018 |     }
1019 | 
1020 |   },
1021 | 
1022 |   dynamicDampingFactor : {
1023 | 
1024 |     get: function () {
1025 | 
1026 |       console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
1027 |       return this.constraint.dampingFactor;
1028 | 
1029 |     },
1030 | 
1031 |     set: function ( value ) {
1032 | 
1033 |       console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
1034 |       this.constraint.dampingFactor = value;
1035 | 
1036 |     }
1037 | 
1038 |   }
1039 | 
1040 | } );
1041 | 


--------------------------------------------------------------------------------