projects size random, better light

assets/css/app.scss

@@ -8,7 +8,7 @@
 
 
 body{
-  color: #ff00ff;
+  color: #1a1a1a;
 }
 
 #root{
@@ -20,6 +20,15 @@ body{
 
 }
 
+header[role="banner"]{
+  padding:1em;
+  pointer-events: none;
+  h1{
+    font-weight: 400;
+    font-size: 1em;
+  }
+}
+
 
 section[role="main-content"]{
 }

assets/css/base/_layout.scss

@@ -15,22 +15,10 @@ body{
 }
 
 #root{
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height:100vh;
-  %layout-element{
-    width:100vw;
-    box-sizing:border-box;
-  }
   header[role="banner"]{
-    flex: 0 0 auto;
-    @extend %layout-element;
-    padding:1em $side-padding 0 $side-padding;
+    position: absolute;
   }
   section[role="main-content"]{
-    flex:1 1 auto;
-    @extend %layout-element;
     overflow: hidden;
     >.wrapper{
       // padding:0 $side-padding 0 $side-padding;
@@ -40,11 +28,6 @@ body{
     }
   }
   footer[role="tools"]{
-    flex:0 0 auto;
-    @extend %layout-element;
-    // padding-bottom: 1em;
-    // >*{
-    //   padding:0.5em 1em;
-    // }
+    position: absolute;
   }
 }

src/App.vue

@@ -1,14 +1,15 @@
 <template>
   <div id="root">
-    <!-- <header role="banner">
+    <header role="banner">
       <div class="wrapper">
         <h1
           class="site-title"
           tabindex="0"
         >
+        Muntadas
         </h1>
       </div>
-    </header> -->
+    </header>
     <section role="main-content">
       <div class="wrapper">
         <renderer :obj="myRenderer" :size="size">
@@ -21,8 +22,8 @@
             </orbit-controls> -->
             <camera ref="camera" :position="init_cam_pos" :rotation="{x:0, y:0, z:0}" />
 
-            <light :hex="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
-            <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" :options="light_opts" />
+            <!-- <light :hex="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
+            <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" :options="light_opts" /> -->
 
             <animation :fn="animate" :speed="3" />
 
@@ -127,6 +128,16 @@ export default {
     ground.rotateZ(this.deg2rad(180))
     scene.add(ground)
 
+    // lights
+    var sun = new THREE.PointLight(0xffffff, 5)
+    var sunGeo = new THREE.SphereBufferGeometry(1, 16, 8)
+    var sunMat = new THREE.MeshBasicMaterial({ color: 0xffffff })
+    sun.add(new THREE.Mesh(sunGeo, sunMat))
+    sun.position.set(-150, 150, 50)
+    sun.castShadows = true
+    // sun.target.position.set(0, 0, 0)
+    scene.add(sun)
+    // scene.add(sun.target)
     return {
       debug: _debug,
       myRenderer: renderer,

src/components/objects/Project.vue

@@ -42,8 +42,8 @@ export default {
     // },
     block3d: null,
     block_opts: {
-      side: THREE.DoubleSide,
-      wireframe: false
+      side: THREE.DoubleSide
+      // wireframe: true,
       // transparent: true,
       // opacity: 0.6
       // renderOrder: 0
@@ -76,26 +76,30 @@ export default {
   },
   created () {
     // console.log('this.index', this.index)
-    // this.position = { x: 5, y: 5, z: 0 }
-    this.size.y = 30 + Math.random() * 90
-    this.position.y = -10 + Math.random() * this.size.y / 2
-    // this.label_position.y = this.position.y + this.size.y / 2 - 5
-    this.label_position.y = 5
+    // randomize size and positions
+    this.size.y = 100 + Math.random() * 90
+    this.size.z = 10 + Math.random() * 30
     this.position.x = this.label_position.x = (-this.len + 1) / 2 * (this.size.x + 5) + (this.size.x + 5) * this.index
-    this.label_position.z = this.size.z / 2 + 0.1
+    this.position.y = -1 * this.size.y / 2 + 10 + Math.random() * 30// -10 + Math.random() * this.size.y / 2
+    this.position.z = -10 + Math.random() * 10
+    this.label_position.y = 5
+    this.label_position.z = this.position.z + this.size.z / 2 + 0.1
     this.label_canvas = this.createLabelCanvas()
     // console.log('this.label_canvas', this.label_canvas)
-  },
-  mounted () {
-    // console.log('project mounted', this)
+    // mesh options
     this.block3d = this.$refs.block3d.curObj
     this.block3d.castShadow = true
     this.block3d.receiveShadow = true
+    // record self references
     this.block3d.userData = {
       vnode: this
     }
     this.label3d = this.$refs.label3d.curObj
   },
+  mounted () {
+    // console.log('project mounted', this)
+
+  },
   methods: {
     createLabelCanvas () {
       // console.log('createLabelCanvas', this.data.Titre)