├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── assets
    └── README.md
├── components
    ├── BackgroundCube.vue
    ├── Logo.vue
    ├── README.md
    ├── threeComponents.js
    └── threejs
    │   ├── Cameras
    │       ├── Camera.vue
    │       └── PerspectiveCamera.vue
    │   ├── Core
    │       ├── Geometry.vue
    │       └── Object3D.vue
    │   ├── Geometries
    │       └── BoxGeometry.vue
    │   ├── Lights
    │       ├── AmbientLight.vue
    │       ├── DirectionalLight.vue
    │       └── Light.vue
    │   ├── Materials
    │       ├── Material.vue
    │       ├── MeshBasicMaterial.vue
    │       └── MeshPhongMaterial.vue
    │   ├── Objects
    │       └── Mesh.vue
    │   ├── Renderers
    │       └── WebGLRenderer.vue
    │   └── Scenes
    │       └── Scene.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    └── favicon.ico
├── store
    └── README.md
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     browser: true,
 6 |     node: true
 7 |   },
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'html'
12 |   ],
13 |   // add your custom rules here
14 |   rules: {},
15 |   globals: {}
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 
13 | # IDE
14 | .vscode


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-threejs
 2 | 
 3 | [Three.js](https://threejs.org/)をコンポーネント化したBackgroundでCubeが動作するサンプル。  
 4 | どうしてもコンポーネントにしたい人向け。  
 5 | Vue(Nuxt)の練習用なので、実用化レベルではありません。  
 6 | 
 7 | ## Build Setup
 8 | 
 9 | ``` bash
10 | # install dependencies
11 | $ yarn install # Or npm install
12 | 
13 | # serve with hot reload at localhost:3000
14 | $ yarn run dev
15 | 
16 | # build for production and launch server
17 | $ yarn run build
18 | $ yarn start
19 | 
20 | # generate static project
21 | $ yarn run generate
22 | ```
23 | 
24 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
25 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/components/BackgroundCube.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <webgl-renderer ref="renderer" :width="width" :height="height" :alpha="alpha" :styleCanvas="styleCanvas" @update="update">
 3 |     <perspective-camera slot="camera" :aspect="aspect" :fov="50" :near="0.1" :far="10000" :position="position" :rotation="rotation"></perspective-camera>
 4 |     <scene slot="scene">
 5 |       <mesh ref="cube" slot="object">
 6 |         <box-geometry slot="geometry" :width="0.5" :height="0.5" :depth="0.5"></box-geometry>
 7 |         <mesh-phong-material slot="material" :color="color"></mesh-phong-material>
 8 |       </mesh>
 9 |       <directional-light slot="object" :color="lightColor" :position="lightPosition"></directional-light>
10 |     </scene>
11 |   </webgl-renderer>
12 | </template>
13 | 
14 | <script>
15 | import Three from './threeComponents'
16 | import { Color, Vector3, Euler } from 'three'
17 | 
18 | export default {
19 |   components: Three,
20 |   data () {
21 |     return {
22 |       width: 0,
23 |       height: 0,
24 |       alpha: true,
25 |       styleCanvas: {
26 |         position: 'absolute',
27 |         'z-index': -1
28 |       },
29 |       position: new Vector3(0, 0, 5),
30 |       rotation: new Euler(0, 0, 0, 'XYZ'),
31 |       color: new Color(0x0000FF),
32 |       lightColor: new Color(0xFFFFFF),
33 |       lightPosition: new Vector3(10, 0, 25),
34 |       sign: { x: 1, y: 1, z: 1 },
35 |       interval: { x: 0.005, y: 0.005, z: 0.005 }
36 |     }
37 |   },
38 |   computed: {
39 |     aspect () {
40 |       return this.height ? this.width / this.height : 0
41 |     }
42 |   },
43 |   methods: {
44 |     animate () {
45 |       requestAnimationFrame(this.animate)
46 |       this.$refs.renderer.render()
47 |     },
48 |     update () {
49 |       this.$refs.cube.object.rotation.x += 0.01
50 |       this.$refs.cube.object.rotation.y += 0.01
51 |       if (this.$refs.cube.object.position.x >= 2 || this.$refs.cube.object.position.x <= -2) {
52 |         this.sign.x *= -1
53 |         this.interval.x = Math.random() * 0.01
54 |       }
55 |       if (this.$refs.cube.object.position.y >= 2 || this.$refs.cube.object.position.y <= -2) {
56 |         this.sign.y *= -1
57 |         this.interval.y = Math.random() * 0.01
58 |       }
59 |       this.$refs.cube.object.position.x += this.sign.x * this.interval.x
60 |       this.$refs.cube.object.position.y += this.sign.y * this.interval.y
61 |     },
62 |     setSize () {
63 |       this.width = window.innerWidth
64 |       this.height = window.innerHeight
65 |       this.sign = { x: 1, y: 1, z: 1 }
66 |       this.interval = { x: 0.005, y: 0.005, z: 0.005 }
67 |     }
68 |   },
69 |   mounted () {
70 |     window.addEventListener('resize', this.setSize, true)
71 |     this.setSize()
72 |     this.animate()
73 |   }
74 | }
75 | </script>
76 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"></div>
 4 |     <div class="Triangle Triangle--one"></div>
 5 |     <div class="Triangle Triangle--three"></div>
 6 |     <div class="Triangle Triangle--four"></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 
6 | **This directory is not required, you can delete it if you don't want to use it.**
7 | 


--------------------------------------------------------------------------------
/components/threeComponents.js:
--------------------------------------------------------------------------------
 1 | import WebGLRenderer from './threejs/Renderers/WebGLRenderer'
 2 | import PerspectiveCamera from './threejs/Cameras/PerspectiveCamera'
 3 | import Scene from './threejs/Scenes/Scene'
 4 | import BoxGeometry from './threejs/Geometries/BoxGeometry'
 5 | import Mesh from './threejs/Objects/Mesh'
 6 | import MeshBasicMaterial from './threejs/Materials/MeshBasicMaterial'
 7 | import MeshPhongMaterial from './threejs/Materials/MeshPhongMaterial'
 8 | import AmbientLight from './threejs/Lights/AmbientLight'
 9 | import DirectionalLight from './threejs/Lights/DirectionalLight'
10 | 
11 | export default {
12 |   WebglRenderer: WebGLRenderer,
13 |   PerspectiveCamera,
14 |   Scene,
15 |   BoxGeometry,
16 |   Mesh,
17 |   MeshBasicMaterial,
18 |   MeshPhongMaterial,
19 |   AmbientLight,
20 |   DirectionalLight
21 | }
22 | 


--------------------------------------------------------------------------------
/components/threejs/Cameras/Camera.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import Object3D from '../Core/Object3D'
 7 | 
 8 | export default {
 9 |   extends: Object3D
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/components/threejs/Cameras/PerspectiveCamera.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import { PerspectiveCamera } from 'three'
 7 | import Camera from './Camera'
 8 | 
 9 | export default {
10 |   extends: Camera,
11 |   props: {
12 |     fov: {
13 |       type: Number,
14 |       default: 75
15 |     },
16 |     aspect: {
17 |       type: Number,
18 |       default: 0
19 |     },
20 |     near: {
21 |       type: Number,
22 |       default: 0.1
23 |     },
24 |     far: {
25 |       type: Number,
26 |       default: 1000
27 |     }
28 |   },
29 |   watch: {
30 |     aspect (val) {
31 |       this.object.aspect = val
32 |       this.object.updateProjectionMatrix()
33 |     }
34 |   },
35 |   methods: {
36 |     instantiate () {
37 |       this.object = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far)
38 |     }
39 |   }
40 | }
41 | </script>


--------------------------------------------------------------------------------
/components/threejs/Core/Geometry.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   data () {
 8 |     return {
 9 |       geometry: null
10 |     }
11 |   },
12 |   methods: {
13 |     instantiate () {
14 |     }
15 |   },
16 |   mounted () {
17 |     this.instantiate()
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/threejs/Core/Object3D.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import { Vector3, Euler, Layers } from 'three'
 7 | 
 8 | export default {
 9 |   props: {
10 |     position: {
11 |       type: Vector3,
12 |       default: () => new Vector3(0, 0, 0)
13 |     },
14 |     rotation: {
15 |       type: Euler,
16 |       default: () => new Euler(0, 0, 0, 'XYZ')
17 |     },
18 |     scale: {
19 |       type: Vector3,
20 |       default: () => new Vector3(1, 1, 1)
21 |     },
22 |     castShadow: {
23 |       type: Boolean,
24 |       default: false
25 |     },
26 |     frustumCulled: {
27 |       type: Boolean,
28 |       default: true
29 |     },
30 |     layers: {
31 |       type: Layers,
32 |       default: () => new Layers()
33 |     },
34 |     receiveShadow: {
35 |       type: Boolean,
36 |       default: false
37 |     },
38 |     renderOrder: {
39 |       type: Number,
40 |       default: 0
41 |     },
42 |     userData: {
43 |       type: Object,
44 |       default: null
45 |     },
46 |     visible: {
47 |       type: Boolean,
48 |       default: true
49 |     }
50 |   },
51 |   data () {
52 |     return {
53 |       object: null
54 |     }
55 |   },
56 |   watch: {
57 |     position (val) {
58 |       this.object.position.copy(val)
59 |     },
60 |     rotation (val) {
61 |       this.object.rotation.copy(val)
62 |     },
63 |     scale (val) {
64 |       this.object.scale.copy(val)
65 |     }
66 |   },
67 |   methods: {
68 |     instantiate () {
69 |     }
70 |   },
71 |   mounted () {
72 |     this.instantiate()
73 |     this.object.position.copy(this.position)
74 |     this.object.rotation.copy(this.rotation)
75 |     this.object.scale.copy(this.scale)
76 |   }
77 | }
78 | </script>
79 | 


--------------------------------------------------------------------------------
/components/threejs/Geometries/BoxGeometry.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import { BoxGeometry } from 'three'
 7 | import Geometry from '../Core/Geometry'
 8 | 
 9 | export default {
10 |   extends: Geometry,
11 |   props: {
12 |     width: {
13 |       type: Number,
14 |       default: 1
15 |     },
16 |     height: {
17 |       type: Number,
18 |       default: 1
19 |     },
20 |     depth: {
21 |       type: Number,
22 |       default: 1
23 |     },
24 |     widthSegments: {
25 |       type: Number,
26 |       default: 1
27 |     },
28 |     heightSegments: {
29 |       type: Number,
30 |       default: 1
31 |     },
32 |     depthSegments: {
33 |       type: Number,
34 |       default: 1
35 |     }
36 |   },
37 |   methods: {
38 |     instantiate () {
39 |       this.geometry = new BoxGeometry(this.width, this.height, this.depth, this.widthSegments, this.heightSegments, this.depthSegments)
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/components/threejs/Lights/AmbientLight.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import { AmbientLight, Color } from 'three'
 7 | import Light from './Light'
 8 | 
 9 | export default {
10 |   extends: Light,
11 |   props: {
12 |     color: {
13 |       type: Color,
14 |       default: () => new Color(0xFFFFFF)
15 |     },
16 |     intensity: {
17 |       type: Number,
18 |       default: 1.0
19 |     }
20 |   },
21 |   methods: {
22 |     instantiate () {
23 |       this.object = new AmbientLight(this.color, this.intensity)
24 |     }
25 |   }
26 | }
27 | </script>


--------------------------------------------------------------------------------
/components/threejs/Lights/DirectionalLight.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import { DirectionalLight, Color } from 'three'
 7 | import Light from './Light'
 8 | 
 9 | export default {
10 |   extends: Light,
11 |   props: {
12 |     color: {
13 |       type: Color,
14 |       default: () => new Color(0xFFFFFF)
15 |     },
16 |     intensity: {
17 |       type: Number,
18 |       default: 1.0
19 |     }
20 |   },
21 |   methods: {
22 |     instantiate () {
23 |       this.object = new DirectionalLight(this.color, this.intensity)
24 |     }
25 |   }
26 | }
27 | </script>


--------------------------------------------------------------------------------
/components/threejs/Lights/Light.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | import { Light, Color } from 'three'
 7 | import Object3D from '../Core/Object3D'
 8 | 
 9 | export default {
10 |   extends: Object3D,
11 |   props: {
12 |     color: {
13 |       type: Color,
14 |       default: () => new Color(0xFFFFFF)
15 |     },
16 |     intensity: {
17 |       type: Number,
18 |       default: 1.0
19 |     }
20 |   },
21 |   methods: {
22 |     instantiate () {
23 |       this.object = new Light(this.color, this.intensity)
24 |     }
25 |   }
26 | }
27 | </script>


--------------------------------------------------------------------------------
/components/threejs/Materials/Material.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   data () {
 8 |     return {
 9 |       material: null
10 |     }
11 |   },
12 |   methods: {
13 |     instantiate () {
14 |     }
15 |   },
16 |   mounted () {
17 |     this.instantiate()
18 |   },
19 |   beforeDestroy () {
20 |     this.material.dispose()
21 |   }
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/components/threejs/Materials/MeshBasicMaterial.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot name="alphaMap"></slot>
 4 |     <slot name="aoMap"></slot>
 5 |     <slot name="envMap"></slot>
 6 |     <slot name="lightMap"></slot>
 7 |     <slot name="map"></slot>
 8 |     <slot name="specularMap"></slot>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { MeshBasicMaterial, Color, MultiplyOperation } from 'three'
14 | import Material from './Material'
15 | 
16 | export default {
17 |   extends: Material,
18 |   props: {
19 |     aoMapIntensity: {
20 |       type: Number,
21 |       default: 1
22 |     },
23 |     color: {
24 |       type: Color,
25 |       default: () => new Color(0xffffff)
26 |     },
27 |     combine: {
28 |       type: Number,
29 |       default: MultiplyOperation
30 |     },
31 |     isMeshBasicMaterial: {
32 |       type: Boolean,
33 |       default: true
34 |     },
35 |     lightMapIntensity: {
36 |       type: Number,
37 |       default: 1
38 |     },
39 |     lights: {
40 |       type: Boolean,
41 |       default: false
42 |     },
43 |     morphTargets: {
44 |       type: Boolean,
45 |       default: false
46 |     },
47 |     reflectivity: {
48 |       type: Number,
49 |       default: 1
50 |     },
51 |     refractionRatio: {
52 |       type: Number,
53 |       default: 0.98
54 |     },
55 |     skinning: {
56 |       type: Boolean,
57 |       default: false
58 |     },
59 |     wireframe: {
60 |       type: Boolean,
61 |       default: false
62 |     },
63 |     wireframeLinecap: {
64 |       type: String,
65 |       default: 'round'
66 |     },
67 |     wireframeLinejoin: {
68 |       type: String,
69 |       default: 'round'
70 |     },
71 |     wireframeLinewidth: {
72 |       type: Number,
73 |       default: 1
74 |     }
75 |   },
76 |   methods: {
77 |     instantiate () {
78 |       this.material = new MeshBasicMaterial({
79 |         color: this.color
80 |       })
81 |     }
82 |   }
83 | }
84 | </script>
85 | 


--------------------------------------------------------------------------------
/components/threejs/Materials/MeshPhongMaterial.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <slot name="alphaMap"></slot>
  4 |     <slot name="aoMap"></slot>
  5 |     <slot name="bumpMap"></slot>
  6 |     <slot name="displacementMap"></slot>
  7 |     <slot name="emissiveMap"></slot>
  8 |     <slot name="envMap"></slot>
  9 |     <slot name="lightMap"></slot>
 10 |     <slot name="map"></slot>
 11 |     <slot name="normalMap"></slot>
 12 |     <slot name="specularMap"></slot>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | import { MeshPhongMaterial, Color, MultiplyOperation } from 'three'
 18 | import Material from './Material'
 19 | 
 20 | export default {
 21 |   extends: Material,
 22 |   props: {
 23 |     aoMapIntensity: {
 24 |       type: Number,
 25 |       default: 1
 26 |     },
 27 |     bumpScale: {
 28 |       type: Number,
 29 |       default: 1
 30 |     },
 31 |     color: {
 32 |       type: Color,
 33 |       default: () => new Color(0xFFFFFF)
 34 |     },
 35 |     combine: {
 36 |       type: Number,
 37 |       default: MultiplyOperation
 38 |     },
 39 |     displacementScale: {
 40 |       type: Number,
 41 |       default: 1
 42 |     },
 43 |     displacementBias: {
 44 |       type: Number,
 45 |       default: 0
 46 |     },
 47 |     emissive: {
 48 |       type: Color,
 49 |       default: () => new Color(0xFFFFFF)
 50 |     },
 51 |     emissiveIntensity: {
 52 |       type: Number,
 53 |       default: 1
 54 |     },
 55 |     isMeshPhongMaterial: {
 56 |       type: Boolean,
 57 |       default: true
 58 |     },
 59 |     lightMapIntensity: {
 60 |       type: Number,
 61 |       default: 1
 62 |     },
 63 |     morphNormals: {
 64 |       type: Boolean,
 65 |       default: false
 66 |     },
 67 |     morphTargets: {
 68 |       type: Boolean,
 69 |       default: false
 70 |     },
 71 |     normalScale: {
 72 |       type: Number,
 73 |       default: 1
 74 |     },
 75 |     reflectivity: {
 76 |       type: Number,
 77 |       default: 1
 78 |     },
 79 |     refractionRatio: {
 80 |       type: Number,
 81 |       default: 0.98
 82 |     },
 83 |     shininess: {
 84 |       type: Number,
 85 |       default: 30
 86 |     },
 87 |     skinning: {
 88 |       type: Boolean,
 89 |       default: false
 90 |     },
 91 |     specular: {
 92 |       type: Color,
 93 |       default: () => new Color(0x111111)
 94 |     },
 95 |     wireframe: {
 96 |       type: Boolean,
 97 |       default: false
 98 |     },
 99 |     wireframeLinecap: {
100 |       type: String,
101 |       default: 'round'
102 |     },
103 |     wireframeLinejoin: {
104 |       type: String,
105 |       default: 'round'
106 |     },
107 |     wireframeLinewidth: {
108 |       type: Number,
109 |       default: 1
110 |     }
111 |   },
112 |   methods: {
113 |     instantiate () {
114 |       this.material = new MeshPhongMaterial({
115 |         color: this.color
116 |       })
117 |     }
118 |   }
119 | }
120 | </script>
121 | 


--------------------------------------------------------------------------------
/components/threejs/Objects/Mesh.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot name="geometry"></slot>
 4 |     <slot name="material"></slot>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { Mesh } from 'three'
10 | import Object3D from '../Core/Object3D'
11 | 
12 | export default {
13 |   extends: Object3D,
14 |   data () {
15 |     return {
16 |       geometry: null,
17 |       material: null
18 |     }
19 |   },
20 |   methods: {
21 |     instantiate () {
22 |       this.geometry = this.$slots.geometry[0].componentInstance.geometry
23 |       this.material = this.$slots.material[0].componentInstance.material
24 |       this.object = new Mesh(this.geometry, this.material)
25 |     }
26 |   }
27 | }
28 | </script>


--------------------------------------------------------------------------------
/components/threejs/Renderers/WebGLRenderer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <canvas :style="styleCanvas">
  3 |     <slot name="camera"></slot>
  4 |     <slot name="scene"></slot>
  5 |   </canvas>
  6 | </template>
  7 | 
  8 | <script>
  9 | import { WebGLRenderer } from 'three'
 10 | 
 11 | export default {
 12 |   props: {
 13 |     canvas: HTMLElement,
 14 |     context: WebGLRenderingContext,
 15 |     percision: {
 16 |       type: String,
 17 |       default: 'highp'
 18 |     },
 19 |     alpha: {
 20 |       type: Boolean,
 21 |       default: false
 22 |     },
 23 |     premultipliedAlpha: {
 24 |       type: Boolean,
 25 |       default: true
 26 |     },
 27 |     antialias: {
 28 |       type: Boolean,
 29 |       default: false
 30 |     },
 31 |     stencil: {
 32 |       type: Boolean,
 33 |       default: true
 34 |     },
 35 |     preserveDrawingBuffer: {
 36 |       type: Boolean,
 37 |       default: false
 38 |     },
 39 |     depth: {
 40 |       type: Boolean,
 41 |       default: true
 42 |     },
 43 |     logarithmicDepthBuffer: {
 44 |       type: Boolean,
 45 |       default: false
 46 |     },
 47 |     width: Number,
 48 |     height: Number,
 49 |     styleCanvas: {}
 50 |   },
 51 |   data () {
 52 |     return {
 53 |       camera: null,
 54 |       scene: null,
 55 |       renderer: null
 56 |     }
 57 |   },
 58 |   watch: {
 59 |     width (val) {
 60 |       this.resize()
 61 |     },
 62 |     height (val) {
 63 |       this.resize()
 64 |     }
 65 |   },
 66 |   methods: {
 67 |     render () {
 68 |       this.$emit('update')
 69 |       this.renderer.render(this.scene, this.camera)
 70 |     },
 71 |     resize () {
 72 |       this.renderer.setSize(this.width, this.height)
 73 |     }
 74 |   },
 75 |   mounted () {
 76 |     this.camera = this.$slots.camera[0].componentInstance.object
 77 |     this.scene = this.$slots.scene[0].componentInstance.object
 78 |     this.renderer = new WebGLRenderer({
 79 |       canvas: this.canvas || this.$el,
 80 |       context: this.context,
 81 |       percision: this.percision,
 82 |       alpha: this.alpha,
 83 |       premultipliedAlpha: this.premultipliedAlpha,
 84 |       antialias: this.antialias,
 85 |       stencil: this.stencil,
 86 |       preserveDrawingBuffer: this.premultipliedAlpha,
 87 |       depth: this.depth,
 88 |       logarithmicDepthBuffer: this.logarithmicDepthBuffer
 89 |     })
 90 |     this.resize()
 91 |     this.render()
 92 |   }
 93 | }
 94 | </script>
 95 | 
 96 | <style>
 97 | #webgl-bg {
 98 |   z-index: -1;
 99 |   position: absolute;
100 | }
101 | </style>


--------------------------------------------------------------------------------
/components/threejs/Scenes/Scene.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot name="light"></slot>
 4 |     <slot name="object"></slot>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import { Scene } from 'three'
10 | import Object3D from '../Core/Object3D'
11 | 
12 | export default {
13 |   extends: Object3D,
14 |   methods: {
15 |     instantiate () {
16 |       this.object = new Scene()
17 |       if (this.$slots.object && this.$slots.object.length) {
18 |         for (let i = 0; i < this.$slots.object.length; i++) {
19 |           this.object.add(this.$slots.object[i].componentInstance.object)
20 |         }
21 |       }
22 |     }
23 |   }
24 | }
25 | </script>


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10 |   font-size: 16px;
11 |   word-spacing: 1px;
12 |   -ms-text-size-adjust: 100%;
13 |   -webkit-text-size-adjust: 100%;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-font-smoothing: antialiased;
16 |   box-sizing: border-box;
17 | }
18 | 
19 | *, *:before, *:after {
20 |   box-sizing: border-box;
21 |   margin: 0;
22 | }
23 | 
24 | .button--green {
25 |   display: inline-block;
26 |   border-radius: 4px;
27 |   border: 1px solid #3b8070;
28 |   color: #3b8070;
29 |   text-decoration: none;
30 |   padding: 10px 30px;
31 | }
32 | 
33 | .button--green:hover {
34 |   color: #fff;
35 |   background-color: #3b8070;
36 | }
37 | 
38 | .button--grey {
39 |   display: inline-block;
40 |   border-radius: 4px;
41 |   border: 1px solid #35495e;
42 |   color: #35495e;
43 |   text-decoration: none;
44 |   padding: 10px 30px;
45 |   margin-left: 15px;
46 | }
47 | 
48 | .button--grey:hover {
49 |   color: #fff;
50 |   background-color: #35495e;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: 'spa', // 本当はSSRで実装したい。
 3 |   /*
 4 |   ** Headers of the page
 5 |   */
 6 |   head: {
 7 |     title: 'nuxt-threejs',
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
12 |     ],
13 |     link: [
14 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
15 |     ]
16 |   },
17 |   /*
18 |   ** Customize the progress bar color
19 |   */
20 |   loading: { color: '#3B8070' },
21 |   /*
22 |   ** Build configuration
23 |   */
24 |   build: {
25 |     vendor: ['three', 'vue-three'],
26 |     /*
27 |     ** Run ESLint on save
28 |     */
29 |     extend (config, ctx) {
30 |       if (ctx.dev && ctx.isClient) {
31 |         config.module.rules.push({
32 |           enforce: 'pre',
33 |           test: /\.(js|vue)$/,
34 |           loader: 'eslint-loader',
35 |           exclude: /(node_modules)/
36 |         })
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-threejs",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "s-fuku <s-fuku@kuru.jp>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "nuxt": "^1.0.0-rc11",
17 |     "three": "^0.87.1",
18 |     "vue-three": "^0.1.20"
19 |   },
20 |   "devDependencies": {
21 |     "babel-eslint": "^7.2.3",
22 |     "eslint": "^4.3.0",
23 |     "eslint-config-standard": "^10.2.1",
24 |     "eslint-loader": "^1.9.0",
25 |     "eslint-plugin-html": "^3.1.1",
26 |     "eslint-plugin-import": "^2.7.0",
27 |     "eslint-plugin-node": "^5.1.1",
28 |     "eslint-plugin-promise": "^3.5.0",
29 |     "eslint-plugin-standard": "^3.0.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and create the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="container">
 3 |     <background-cube/>
 4 |     <div>
 5 |       <logo/>
 6 |       <h1 class="title">
 7 |         nuxt-threejs
 8 |       </h1>
 9 |       <h2 class="subtitle">
10 |         Nuxt.js project
11 |       </h2>
12 |       <div class="links">
13 |         <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
14 |         <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
15 |       </div>
16 |     </div>
17 |   </section>
18 | </template>
19 | 
20 | <script>
21 | import Logo from '~/components/Logo.vue'
22 | import BackgroundCube from '~/components/BackgroundCube.vue'
23 | 
24 | export default {
25 |   components: {
26 |     Logo,
27 |     BackgroundCube
28 |   }
29 | }
30 | </script>
31 | 
32 | <style>
33 | .container {
34 |   min-height: 100vh;
35 |   display: flex;
36 |   justify-content: center;
37 |   align-items: center;
38 |   text-align: center;
39 | }
40 | 
41 | .title {
42 |   font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
43 |   display: block;
44 |   font-weight: 300;
45 |   font-size: 100px;
46 |   color: #35495e;
47 |   letter-spacing: 1px;
48 | }
49 | 
50 | .subtitle {
51 |   font-weight: 300;
52 |   font-size: 42px;
53 |   color: #526488;
54 |   word-spacing: 5px;
55 |   padding-bottom: 15px;
56 | }
57 | 
58 | .links {
59 |   padding-top: 15px;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/s-fukumoto/nuxt-threejs/2e05497b077c7b17d33ae7debb0bd62996c4b327/static/favicon.ico


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | This directory contains your Vuex Store files.
 4 | Vuex Store option is implemented in the Nuxt.js framework.
 5 | Creating a index.js file in this directory activate the option in the framework automatically.
 6 | 
 7 | More information about the usage of this directory in the documentation:
 8 | https://nuxtjs.org/guide/vuex-store
 9 | 
10 | **This directory is not required, you can delete it if you don't want to use it.**
11 | 


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