displaying a cube with vue-threejs, WAOU!

assets/css/app.scss

@@ -20,482 +20,6 @@ body{
 
 }
 
-header[role="banner"]{
-  div.wrapper{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-  h1.site-title{
-    grid-column: 1;
-    margin:0;
-    font-size: 1em;
-  }
-  nav#header-menu{
-    grid-column: 2;
-    text-align: right;
-    >ul>li{
-      display: inline-block;
-      margin-right: 1em;
-      position: relative;
-      >ul{
-        position: absolute;
-        top:1em; right:0;
-        overflow: hidden;
-        >li{
-          transition: height 0.3s ease-in-out;
-          height:0.2px;
-        }
-      }
-      &:hover{
-        >ul>li{
-          height:1em;
-        }
-      }
 
-    }
-    li>span,li>a{
-      font-size: 0.9em;
-      color: $bleuroi;
-      text-transform: uppercase;
-
-    }
-  }
-}
 section[role="main-content"]{
-  #home{
-    header{
-      text-align: center;
-      h1{
-        color: $bleuroi;
-        font-size: 8em;
-        font-weight: 300;
-        margin:15vh 0 0;
-      }
-      h2{
-        color: $or;
-        font-size: 2em;
-        font-weight: 300;
-        margin:1em 0 0;
-        text-transform: uppercase;
-        letter-spacing: 0.2em;
-        sup{
-          // line-height: 5em;
-          vertical-align:text-top;
-          font-size: 0.7em
-        }
-      }
-    }
-    $filet_space:8em;
-    $decallage: 0.5em;
-    section{
-      padding-top: $filet_space;
-    }
-    div.teasers{
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      position: relative;
-      padding-right: 0;
-      article{
-        box-sizing: border-box;
-        flex-basis: percentage(2 / ( $default_sum - 6) );
-        padding-right: $default_gap;
-        @include fontsans;
-
-        h1{
-          color: $bleuroi;
-        }
-        p{
-          font-size: 0.882em;
-          line-height: 1.2;
-        }
-        span{
-          color:$rouge;
-          font-size:0.693em;
-        }
-      }
-      // filets decoratif
-      &:before, &:after{
-        z-index: 0;
-        content: "";
-        position: absolute;
-        opacity: 0.4;
-      }
-      &:before{
-        border:1px solid $or;
-        width:calc(100% + #{$filet_space*2 + $decallage*2});
-        left:- $filet_space - $default_gap/2 -$decallage;
-        height:calc(100% + #{$filet_space});
-        top:- $filet_space / 2;
-      }
-      &:after{
-        border:1px solid $rouge;
-        width:calc(100% + #{$filet_space*2});
-        left:- $filet_space - $default_gap/2;
-        height:calc(100% + #{$filet_space + $decallage*2});
-        top:- $filet_space / 2 - $decallage;
-      }
-    }
-  }
-
-  #list-corpus, .index{
-    >header>h1{
-      font-family: "noto_sans";
-      color: $rouge;
-      font-weight: 400;
-    }
-
-    article.item{
-      margin: 2em 0 0;
-      header h1{
-        font-size: 1.512em;
-        color: $bleuroi;
-        font-weight: 400;
-        margin:0;
-      }
-    }
-    ul.item-list{
-      li{
-        margin: 0 0 2em 0;
-        header{
-          h2{
-            margin:0.4em 0;
-            font-size: 1.512em;
-            color: $bleuroi;
-            font-weight: 400;
-          }
-          h3{
-            margin:0.2em 0;
-            @include fontsans;
-            font-size: 0.753em;
-            font-weight: 500;
-          }
-          h4{
-            margin:0.1em 0;
-            font-weight: 300;
-            @include fontsans;
-            font-size: 0.753em;
-            &.editions-quantity{
-              color: $rouge;
-              &:after{
-                content: ">>";
-                margin:0 0 0 0.5em;
-              }
-            }
-          }
-          section.editions{
-            div.editions{
-              ol{
-                padding:0;
-                li{
-                  margin:0.7em 1em;
-                }
-              }
-            }
-          }
-        }
-        ul {
-          li{
-            margin:0;
-            h3{
-              margin: 0.5em 0;
-              font-weight: 400;
-              font-size: 1em;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  #corpus{
-  }
-
-  .index{
-  }
-
-  #edition-toc{
-    ul{
-      li{
-        ul{
-          // padding-left: 1em;
-          border-left: 1px dotted $or;
-          // min-height: 1em;
-          margin-bottom: 0.5em;
-          li{
-            // min-height: 1em;
-            // border-left: 1px solid red;
-            padding:0 0 0.2em 1em;
-          }
-        }
-      }
-    }
-    .toc-title{
-      color: $bleuroi;
-      font-weight: 400;
-      margin:0;
-    }
-    h2.toc-title{font-size: 1.3em;}
-    h3.toc-title{font-size: 1.2em;}
-    h4.toc-title{font-size: 1.1em;}
-    h5.toc-title{font-size: 1.0em;}
-    h6.toc-title{font-size: 0.9em;}
-
-    span.placeName,
-    span.objectName,
-    span.persName{
-      font-weight: 600;
-    }
-  }
-
-  #text{
-    .content{
-      color: $bleuroi;
-      h1{
-        font-size: 1.512em;
-      }
-      p{
-        font-size: 1.134em;
-        line-height: 1.5;
-        span.persName,
-        span.placeName,
-        span.objectName{
-          font-weight: 600;
-        }
-      }
-    }
-  }
-}
-footer[role="tools"]{
-  $list-item-h: 5.3em;
-  #history{
-    z-index: 8;
-    background-color: $or;
-    padding:1.2em $side-padding;
-    max-height: $list-item-h;
-    @include accordeon-transition($list-item-h);
-    >header{
-
-    }
-    .history-list{
-      overflow-x: hidden;
-      .wrapper{
-        height:100%;
-        // hidding the scrollbar
-        overflow-y: auto;
-        width:calc(100% + 1em);
-        padding-right: 1em;
-        >ul{
-          padding:0;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-      }
-      li.item{
-        box-sizing: border-box;
-        // we are only on 10 colls as 2 are occupied by sides
-        flex-basis: percentage(2/($default_sum - 2));
-        height: $list-item-h;
-        overflow: hidden;
-        padding-bottom: 1em;
-        padding-right: $default_gap;
-        article{
-          max-height: 100%;
-          overflow: hidden;
-        }
-      }
-      article.history.item{
-        header{
-          h1{
-            font-size: 0.882em;
-            font-weight: normal;
-            margin:0 0 0.5em 0;
-          }
-        }
-        .extract{
-          p{
-            font-size: 0.882em;
-            margin:0;
-          }
-          code{
-            background-color: lighten(desaturate($rouge,20%), 20%);
-          }
-        }
-      }
-    }
-  }
-  #results{
-    z-index: 9;
-    background-color: $gris;
-    padding:1.2em $side-padding;
-    max-height: $list-item-h * 3;
-    @include accordeon-transition($list-item-h * 3);
-    >header{
-      .search-keys{
-        font-size: 0.756em;
-        font-weight: 500;
-      }
-      .results-count{
-        font-size: 0.756em;
-      }
-    }
-    .results-list{
-      overflow-x: hidden;
-      .wrapper{
-        height:100%;
-        // hidding the scrollbar
-        overflow-y: auto;
-        width:calc(100% + 1em);
-        padding-right: 1em;
-        >ul{
-          padding:0;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-      }
-      li.result{
-        box-sizing: border-box;
-        // we are only on 10 colls as 2 are occupied by sides
-        flex-basis: percentage(2/($default_sum - 2));
-        height: $list-item-h;
-        overflow: hidden;
-        padding-bottom: 1em;
-        padding-right: $default_gap;
-        article{
-          max-height: 100%;
-          overflow: hidden;
-        }
-      }
-      article.result.item{
-        header{
-          h1{
-            font-size: 0.882em;
-            font-weight: normal;
-            margin:0 0 0.5em 0;
-          }
-        }
-        .extract{
-          p{
-            font-size: 0.882em;
-            margin:0;
-          }
-          code{
-            background-color: lighten(desaturate($rouge,20%), 20%);
-          }
-        }
-      }
-    }
-  }
-  #footer-bottom{
-    z-index: 10;
-    padding:0 $side-padding;
-    background-color: $bleuroi;
-    &>*{
-      // disable grid gap
-      padding-right: 0;
-    }
-    #footer-tabs{
-      ul{
-        padding:0; margin:0;
-        display: flex;
-        flex-direction: column;
-        li{
-          flex: 1 1 auto;
-          .wrapper{
-            box-sizing: border-box;
-            line-height: 0.6em;
-            height:2em;
-            width: calc(100% + $side-padding);
-            margin-left:-$side-padding;
-            padding:0.3em 0.5em 0.3em $side-padding;
-          }
-          &.history .wrapper{
-            background-color: $or;
-          }
-          &.results .wrapper{
-            background-color: $gris;
-          }
-          span{
-            font-size: 0.693em;
-            font-weight: 400;
-            text-transform: uppercase;
-            cursor: pointer;
-            @include fade-transition;
-          }
-        }
-      }
-    }
-    #search{
-      color: #fff;
-      background-color: $bleuroi;
-      form{
-        padding: 0.7em;
-        label[for="keys"]{
-          display: none;
-        }
-        input[type="text"]{
-          padding:0.3em;
-          font-size: 0.756em;
-          line-height: 1;
-          height:1em;
-          border:none;
-          border-radius: 2px;
-        }
-        // input[type="submit"]{
-        //   #submit-search{
-        //     border:none;
-        //
-        //   }
-        // }
-        span.mdi{
-          display: inline-block;
-          font-size: 1.2em;
-          line-height:1.1;
-          vertical-align:middle;
-          width:1.2em; height:1.2em;
-          border-radius: 0.6em;
-          background-color: #fff;
-          color: $bleuroi;
-          text-align: center;
-          font-weight: 700;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  h2{
-    margin:0;
-    font-size: 0.756em;
-    font-weight: 400;
-    text-transform: uppercase;
-    padding:0;
-  }
-}
-
-
-//  ___
-// |_ _|__ ___ _ _  ___
-//  | |/ _/ _ \ ' \(_-<
-// |___\__\___/_||_/__/
-
-span.mdi-close{
-  cursor: pointer;
-}
-
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
-}
-
-span.mdi-loading{
-  animation-name: spin;
-  animation-duration: 2000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
 }

assets/css/base/_layout.scss

@@ -33,9 +33,9 @@ body{
     @extend %layout-element;
     overflow: hidden;
     >.wrapper{
-      padding:0 $side-padding 0 $side-padding;
+      // padding:0 $side-padding 0 $side-padding;
       height:100%;
-      overflow-y: auto;
+      overflow-y: hidden;
       overflow-x: hidden;
     }
   }

build/webpack.config.dev.js

@@ -5,7 +5,7 @@ const merge = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const PORT = 8988
+const PORT = 8788
 
 module.exports = merge(baseConfig, {
   mode: 'development',

package.json

@@ -19,52 +19,56 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.18.1",
-    "vue": "^2.6.10",
+    "dat.gui": "^0.7.7",
+    "oimo": "^1.0.9",
+    "three.js": "^0.77.1",
+    "vue": "^2.6.11",
     "vue-meta": "^1.6.0",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.1",
+    "vue-router": "^3.3.4",
+    "vue-threejs": "^0.2.0-alpha.1",
+    "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@vue/test-utils": "^1.0.3",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.4",
+    "babel-loader": "^8.1.0",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-loader": "^2.2.1",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^5.2.3",
     "eslint-plugin-vue-a11y": "0.0.28",
-    "file-loader": "^4.2.0",
-    "html-webpack-harddisk-plugin": "^1.0.1",
+    "file-loader": "^4.3.0",
+    "html-webpack-harddisk-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
     "jest-serializer-vue": "^2.0.2",
     "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "uglify-es": "^3.3.9",
     "url-loader": "^1.1.2",
-    "vue-jest": "^3.0.5",
-    "vue-loader": "^15.7.1",
-    "vue-server-renderer": "^2.6.10",
+    "vue-jest": "^3.0.6",
+    "vue-loader": "^15.9.3",
+    "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2"
   }
 }

src/App.vue

@@ -1,34 +1,37 @@
 <template>
   <div id="root">
-    <header role="banner">
+    <!-- <header role="banner">
       <div class="wrapper">
         <h1
           class="site-title"
           tabindex="0"
         >
-          <router-link :to="{ name:'home' }">Muntadas</router-link>
         </h1>
-        <HeaderMenu />
       </div>
-    </header>
+    </header> -->
     <section role="main-content">
       <div class="wrapper">
-        <RouterView />
+        <renderer :size="size">
+          <scene>
+            <orbit-controls :position="{x:0,y:50,z:0}" :rotation="{ x: 2, y: 0, z: 3 }">
+              <camera />
+            </orbit-controls>
+            <!-- <camera :position="{x:0,y:50,z:0}" :lookat="{x:0,y:0,z:0}" /> -->
+            <!-- <light :hex="0xff0000" :intensity="10" :position="{x:-100}" /> -->
+            <!-- <mesh :obj="mesh" :position="{ y: -200 }" /> -->
+            <!-- <animation :fn="animate" :speed="3" /> -->
+            <cube :size="10" :position="{x:0,y:0,z:0}" :color="0xFFFF00" />
+          </scene>
+        </renderer>
       </div>
     </section>
-    <footer role="tools">
-      <History />
-      <Results v-if="resultsOpened" />
-      <div id="footer-bottom" class="row">
-        <FooterTabs />
-        <Search />
-      </div>
-    </footer>
+    <footer />
   </div>
 </template>
 
 <script>
 // import { mapState } from 'vuex'
+import Cube from './components/objects/Cube'
 
 export default {
   metaInfo: {
@@ -36,19 +39,25 @@ export default {
     title: 'Home',
     // all titles will be injected into this template
     titleTemplate: '%s | Muntadas'
-  }
-  // components: {
-  //   HeaderMenu,
+  },
+  components: {
+    Cube
   //   History,
   //   Results,
   //   Search,
   //   FooterTabs
-  // },
-  // computed: {
+  },
+  computed: {
+    size () {
+      return {
+        w: window.innerWidth,
+        h: window.innerHeight
+      }
+    }
   //   ...mapState({
   //     resultsOpened: state => state.Search.opened
   //   })
-  // }
+  }
 }
 </script>
 

src/components/objects/Cube.vue

@@ -0,0 +1,15 @@
+<template>
+  <mesh name="Cube" :position="position">
+    <geometry type="Box" :args="[size, size, size]" />
+    <material type="MeshBasic" :color="color" />
+  </mesh>
+</template>
+
+<script>
+// import { Object3D } from '@'
+export default {
+  name: 'Cube',
+  // mixins: [Object3D],
+  props: { size: Number, texture: String, position: Object, color: Number }
+}
+</script>

src/index.js

@@ -3,6 +3,8 @@ import Vue from 'vue'
 // import store from './store'
 // import { sync } from 'vuex-router-sync'
 import Meta from 'vue-meta'
+import * as VueThreejs from 'vue-threejs'
+
 import App from './App'
 
 import 'assets/css/mdi/css/materialdesignicons.css'
@@ -10,6 +12,7 @@ import 'assets/css/mdi/css/materialdesignicons.css'
 import 'assets/css/app.scss'
 
 Vue.use(Meta)
+Vue.use(VueThreejs)
 
 // sync(store, router) // done. Returns an unsync callback fn
 

vue.config.js

@@ -0,0 +1,38 @@
+let isLib = process.env.TARGET === 'lib'
+
+module.exports = {
+  css: {
+    extract: !isLib
+  },
+  chainWebpack: config => {
+    if (isLib) {
+      // https://github.com/vuejs/vue-cli/issues/2646
+      config.merge({
+        externals: {
+          vue: {
+            commonjs: 'vue',
+            commonjs2: 'vue',
+            root: 'Vue',
+          },
+          three: {
+            commonjs: 'three',
+            commonjs2: 'three',
+            root: 'THREE',
+          },
+          'dat.gui': {
+            commonjs: 'dat.gui',
+            commonjs2: 'dat.gui',
+            // https://github.com/dataarts/dat.gui/blob/1b18f7227e56c8b5071337732342101501b9fa95/rollup.config.js#L30
+            root: 'dat',
+          },
+          oimo: {
+            commonjs: 'oimo',
+            commonjs2: 'oimo',
+            // https://github.com/lo-th/Oimo.js/blob/0ce1c3d8ff3f857d9180035076a70d8d6976a3e6/rollup.config.js#L7
+            root: 'OIMO',
+          },
+        }
+      })
+    }
+  },
+}