displaying a cube with vue-threejs, WAOU!

This commit is contained in:
2020-07-06 20:47:38 +02:00
parent 15abfa3507
commit 88a9a31768
10 changed files with 4227 additions and 1906 deletions
-476
View File
@@ -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;
}
+2 -2
View File
@@ -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;
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

+1 -1
View File
@@ -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',
+4116 -1388
View File
File diff suppressed because it is too large Load Diff
+24 -20
View File
@@ -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"
}
}
+28 -19
View File
@@ -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>
+15
View File
@@ -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>
+3
View File
@@ -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
+38
View File
@@ -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',
},
}
})
}
},
}