better top and floor, random buildings colors

src/App.vue

@@ -139,22 +139,22 @@ export default {
     // SEA
 
     // lights
-    var ambient = new THREE.AmbientLight(0xfcfcf9, 0.5)
+    var ambient = new THREE.AmbientLight(0xfcfcf9, 1)
     scene.add(ambient)
 
-    var sun = new THREE.PointLight(0xfcfcf9, 2)
-    // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
-    sun.position.set(-150, 150, 110)
-    // sun.castShadow = true
-    // sun.shadow.bias = -0.0001
-    // sun.shadow.mapSize.width = 1024 * 4
-    // sun.shadow.mapSize.height = 1024 * 4
-    // sun.target.position.set(0, 0, 0)
-    scene.add(sun)
-    // scene.add(sun.target)
-
-    // var sun2 = new THREE.PointLight(0xfcfcf9, 0.6)
-    // sun2.position.set(150, 150, 110)
+    // var sun = new THREE.PointLight(0xfcfcf9, 1)
+    // // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
+    // sun.position.set(-150, 200, 110)
+    // // sun.castShadow = true
+    // // sun.shadow.bias = -0.0001
+    // // sun.shadow.mapSize.width = 1024 * 4
+    // // sun.shadow.mapSize.height = 1024 * 4
+    // // sun.target.position.set(0, 0, 0)
+    // scene.add(sun)
+    // // scene.add(sun.target)
+
+    // var sun2 = new THREE.PointLight(0xfcfcf9, 1)
+    // sun2.position.set(150, -200, -110)
     // // sun2.castShadow = true
     // // sun2.target.position.set(0, 0, 0)
     // scene.add(sun2)
@@ -313,14 +313,14 @@ export default {
         var intersects = this.raycaster.intersectObjects(this.interactive_objects)
         // console.log('intersects', intersects)
 
-        let object, vnode, toPos
-        let cam = this.camera
-        let camPos = { ...this.camera.position }
         if (intersects.length) {
-          // console.log('onDocMouseUp intersects', intersects)
+          let cam = this.camera
+          let camPos = { ...this.camera.position }
+          console.log('onDocMouseUp intersects', intersects)
           // for (var i = 0; i < intersects.length; i++) {
-          object = intersects[0].object
-          vnode = object.userData.vnode
+          let object = intersects[0].object
+          console.log('object[0].name', object.name)
+          let vnode = object.userData.vnode
           if (object.name === 'Content' && vnode.isOpened) {
             this.content_data = vnode.data
           }
@@ -335,7 +335,7 @@ export default {
           // recorde vnode as precedent vnode
           this.opened_vnode = vnode
 
-          toPos = { ...object.position }
+          let toPos = { ...object.position }
           if (object.name === 'Content') {
             switch (vnode.face) {
               case 'left':

src/components/mixins.js

@@ -60,6 +60,53 @@ export default {
           reject(src)
         }
       })
+    },
+    createGradientCanvas (c1, c2) {
+      var ctx = document.createElement('canvas').getContext('2d')
+      ctx.canvas.width = 1024
+      ctx.canvas.height = 1024
+      var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
+      lingrad.addColorStop(0, c1)
+      lingrad.addColorStop(1, c2)
+      ctx.fillStyle = lingrad
+      ctx.fillRect(0, 0, 1024, 1024)
+      return ctx.canvas
     }
+    // ,
+    // /**
+    //  * Converts an HSL color value to RGB. Conversion formula
+    //  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+    //  * Assumes h, s, and l are contained in the set [0, 1] and
+    //  * returns r, g, and b in the set [0, 255].
+    //  *
+    //  * @param   {number}  h       The hue
+    //  * @param   {number}  s       The saturation
+    //  * @param   {number}  l       The lightness
+    //  * @return  {Array}           The RGB representation
+    //  */
+    // hslToRgb (h, s, l) {
+    //   var r, g, b
+    //
+    //   if (s === 0) {
+    //     r = g = b = l // achromatic
+    //   } else {
+    //     var hue2rgb = function hue2rgb (p, q, t) {
+    //       if (t < 0) t += 1
+    //       if (t > 1) t -= 1
+    //       if (t < 1 / 6) return p + (q - p) * 6 * t
+    //       if (t < 1 / 2) return q
+    //       if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+    //       return p
+    //     }
+    //
+    //     var q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    //     var p = 2 * l - q
+    //     r = hue2rgb(p, q, h + 1 / 3)
+    //     g = hue2rgb(p, q, h)
+    //     b = hue2rgb(p, q, h - 1 / 3)
+    //   }
+    //
+    //   return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
+    // }
   }
 }

src/components/objects/ContentBlock.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
+  <!-- <object3d ref="block3d" name="Content" :position="position"> -->
     <!-- <mesh ref="block3d" name="ContentBlock" :position="position">
       <geometry type="Box" :args="[size.x, size.y, size.z]" />
       <material type="MeshLambert" :color="color" :options="opts" />
     </mesh> -->
-    <mesh
+    <!-- <mesh
       ref="label3d"
       name="Content"
       :position="position"
@@ -18,7 +19,7 @@
       <material type="MeshLambert" :options="label_opts">
         <texture :options="label_texture_opts" />
       </material>
-    </mesh>
+    </mesh> -->
     <mesh
       v-if="img_canvas"
       ref="img3d"
@@ -35,6 +36,7 @@
         <texture :options="img_texture_opts" />
       </material>
     </mesh>
+  <!-- </object3d> -->
   </div>
 </template>
 
@@ -48,7 +50,7 @@ export default {
   props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
   data: () => ({
     // block3d: null,
-    size: { x: 2, y: 3, z: 0.1 },
+    size: { x: 4, y: 8 },
     position: { x: 0, y: 0, z: 0 },
     rotation: { x: 0, y: 0, z: 0 },
     // opts: {
@@ -58,14 +60,14 @@ export default {
     //   // opacity: 0.6
     // },
     isOpened: false,
-    label3d: null,
-    label_opts: {
-      side: THREE.DoubleSide,
-      // wireframe: false,
-      transparent: true
-      // opacity: 0.6
-      // renderOrder: 0
-    },
+    // label3d: null,
+    // label_opts: {
+    //   side: THREE.DoubleSide,
+    //   // wireframe: false,
+    //   transparent: true
+    //   // opacity: 0.6
+    //   // renderOrder: 0
+    // },
     img_opts: {
       // side: THREE.DoubleSide,
       // wireframe: false,
@@ -74,10 +76,10 @@ export default {
       // renderOrder: 0
     },
     // label_position: { x: 5, y: 5, z: 6 },
-    label_canvas: null,
-    label_size: null,
+    // label_canvas: null,
+    // label_size: null,
     img_canvas: null,
-    img_size: { x: 2, y: 3, z: 0.1 },
+    img_size: { x: 0, y: 0 },
     img_position: { x: 0, y: 0, z: 0 },
     face: null
   }),
@@ -99,14 +101,14 @@ export default {
       }
       return color
     },
-    label_texture_opts () {
-      return {
-        canvas: this.label_canvas,
-        minFilter: THREE.LinearFilter,
-        wrapS: THREE.ClampToEdgeWrapping,
-        wrapT: THREE.ClampToEdgeWrapping
-      }
-    },
+    // label_texture_opts () {
+    //   return {
+    //     canvas: this.label_canvas,
+    //     minFilter: THREE.LinearFilter,
+    //     wrapS: THREE.ClampToEdgeWrapping,
+    //     wrapT: THREE.ClampToEdgeWrapping
+    //   }
+    // },
     img_texture_opts () {
       return {
         canvas: this.img_canvas,
@@ -118,7 +120,7 @@ export default {
   },
   created () {
     // console.log('ContentBlock created', this.data)
-    let txtcolor = '#000000'
+    // let txtcolor = '#000000'
     // switch (this.type) {
     //   case 'visible':
     //     txtcolor = '#0000ff'
@@ -132,10 +134,10 @@ export default {
     //   default:
     // }
 
-    this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
-
-    this.size.x = this.label_size.x + 0.2
-    this.size.y = this.label_size.y + 0.2
+    // this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
+    //
+    // this.size.x = this.label_size.x + 0.2
+    // this.size.y = this.label_size.y + 0.2
 
     let y = 0
     let top = this.prtPosition.y + this.prtSize.y / 2
@@ -200,13 +202,15 @@ export default {
 
     // console.log()
     if (this.data.Media && this.data.Media.length) {
-      console.log(this.data.Media[0].url)
+      // console.log(this.data.Media[0].url)
+      // create image object with a promise (async img loading)
       this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`)
         .then(({ img, canvas }) => {
           // console.log('THEN img loaded ok', this, img, canvas)
-          let f = 3 / canvas.width
+          let f = this.size.x / canvas.width
           this.img_size.x = canvas.width * f
-          this.img_size.y = canvas.height * f
+          this.img_size.y = this.size.y = canvas.height * f
+          console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
           this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
           switch (this.face) {
             case 'left':
@@ -227,6 +231,12 @@ export default {
               break
           }
           this.img_canvas = canvas
+          this.curObj.needsUpdate()
+          // this.imgObj = this.$refs.img3d.curObj
+          // // record self references
+          // this.imgObj.userData = {
+          //   vnode: this
+          // }
         })
         .catch(function () {
           console.warn('CATCH img load ERROR')
@@ -240,11 +250,14 @@ export default {
     // this.block3d = this.$refs.block3d.curObj
     // this.block3d.castShadow = true
     // this.block3d.receiveShadow = true
-
-    this.label3d = this.$refs.label3d.curObj
-    // record self references
-    this.label3d.userData = {
-      vnode: this
+  },
+  updated () {
+    if (!this.curObj && this.$refs.img3d) {
+      this.curObj = this.$refs.img3d.curObj
+      // record self references
+      this.curObj.userData = {
+        vnode: this
+      }
     }
   }
 }

src/components/objects/Ground.vue

@@ -37,7 +37,7 @@ export default {
       side: THREE.DoubleSide,
       wireframe: false,
       transparent: true,
-      opacity: 0.4
+      opacity: 0.6
     }
   })
 }

src/components/objects/Project.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <object3d ref="block3d" name="Project" :obj="building" :position="building_position"/>
+    <object3d ref="top" :obj="top_mesh" :position="top_position"/>
+    <object3d ref="floor" :obj="floor_mesh" :position="floor_position"/>
+    <!-- <light :obj="light" :position="building_position" /> -->
     <mesh ref="label3d" name="Label" :position="label_position">
       <geometry type="Plane" :args="[label_size.x, label_size.y]" />
       <material type="MeshLambert" :options="label_opts">
@@ -52,8 +55,8 @@ import { ThreeBSP } from 'three-js-csg-es6'
 import mixins from 'components/mixins'
 import ContentBlock from 'components/objects/ContentBlock'
 
-import BgVertex from 'assets/glsl/BgVertex'
-import BuildingFragment from 'assets/glsl/BuildingFragment'
+// import BgVertex from 'assets/glsl/BgVertex'
+// import BuildingFragment from 'assets/glsl/BuildingFragment'
 
 export default {
   name: 'Project',
@@ -74,24 +77,14 @@ export default {
 
     let wallW = 0.001
 
-    let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
-    let topMesh = new THREE.Mesh(topGeom)
-    topMesh.position.y = -0.5 * size.y
-    let topBSP = new ThreeBSP(topMesh)
-
-    let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
-    let floorMesh = new THREE.Mesh(floorGeom)
-    floorMesh.position.y = 0.5 * size.y
-    let floorBSP = new ThreeBSP(floorMesh)
-
     let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
     let backMesh = new THREE.Mesh(backGeom)
     backMesh.position.z = -0.5 * size.z
     let backBSP = new ThreeBSP(backMesh)
 
     // dig windows on face and back
-    let winW = 4
-    let winH = 8
+    let winW = 2 + Math.random() * 2
+    let winH = 4 + Math.random() * 4
     let margin = 2
     let nbrWinX = 0
     let paddingX = 0
@@ -172,48 +165,72 @@ export default {
     leftMesh.position.x = -0.5 * size.x
     // leftMesh.position.z = 0.5 * size.z
     let leftBSP = new ThreeBSP(leftMesh)
+    //
+    // let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    // let topMesh = new THREE.Mesh(topGeom)
+    // // topMesh.position.y = -0.5 * size.y
+    // // let topBSP = new ThreeBSP(topMesh)
+    //
+    // let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    // let floorMesh = new THREE.Mesh(floorGeom)
+    // // floorMesh.position.y = 0.5 * size.y
+    // // let floorBSP = new ThreeBSP(floorMesh)
 
     let buildingBSP = backBSP.union(rightBSP)
     buildingBSP = buildingBSP.union(faceBSP)
     buildingBSP = buildingBSP.union(leftBSP)
-    buildingBSP = buildingBSP.union(topBSP)
-    buildingBSP = buildingBSP.union(floorBSP)
+    // buildingBSP = buildingBSP.union(topBSP)
+    // buildingBSP = buildingBSP.union(floorBSP)
 
     // convert back to three.js mesh
     let building = buildingBSP.toMesh()
+    console.log('building.faces', building)
 
     // create a custom shaderMaterial to had gradian colors
-    var uniforms = THREE.UniformsUtils.merge([
-      THREE.UniformsLib['lights'],
-      {
-        'topColor': { value: new THREE.Color(0xffffff) },
-        'groundColor': { value: new THREE.Color(0xbcd6e4) },
-        'bottomColor': { value: new THREE.Color(0x07223b) },
-        // 'bottomColor': { value: new THREE.Color(0x000000) },
-        // 'groundColor': { value: new THREE.Color(0xff0000) },
-        // 'bottomColor': { value: new THREE.Color(0x00ff00) },
-        lightIntensity: { type: 'f', value: 1.0 }
-      }
-    ])
-    var buildingMat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      vertexShader: BgVertex,
-      fragmentShader: BuildingFragment,
-      side: THREE.DoubleSide,
-      lights: true
-    })
-    building.material = buildingMat
+    // var uniforms = THREE.UniformsUtils.merge([
+    //   THREE.UniformsLib['lights'],
+    //   {
+    //     'topColor': { value: new THREE.Color(0xffffff) },
+    //     'groundColor': { value: new THREE.Color(0xbcd6e4) },
+    //     'bottomColor': { value: new THREE.Color(0x07223b) },
+    //     // 'bottomColor': { value: new THREE.Color(0x000000) },
+    //     // 'groundColor': { value: new THREE.Color(0xff0000) },
+    //     // 'bottomColor': { value: new THREE.Color(0x00ff00) },
+    //     lightIntensity: { type: 'f', value: 1.0 }
+    //   }
+    // ])
+    // var buildingMat = new THREE.ShaderMaterial({
+    //   uniforms: uniforms,
+    //   vertexShader: BgVertex,
+    //   fragmentShader: BuildingFragment,
+    //   side: THREE.DoubleSide,
+    //   lights: true
+    // })
+    // building.material = buildingMat
 
     // create a classical material for building
-    // let materialOpts = {
-    //   color: 0xffffff,
-    //   side: THREE.DoubleSide
-    //   // wireframe: true,
-    //   // transparent: true,
-    //   // opacity: 0.6
-    //   // renderOrder: 0
-    // }
-    // building.material = new THREE.MeshLambertMaterial(materialOpts)
+    // let topColor = `hsla(201, 100%, 95%, 1)`
+    let hTop = Math.round(195 + Math.random() * 10)
+    let sTop = Math.round(100)
+    let lTop = Math.round(95)
+    let hFloor = Math.round(205 + Math.random() * 10)
+    let sFloor = Math.round(40 + Math.random() * 20)
+    let lFloor = Math.round(5 + Math.random() * 15)
+
+    let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
+    let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
+    let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor))
+    let materialOpts = {
+      color: 0xffffff,
+      side: THREE.DoubleSide,
+      shininess: 30,
+      map: gradientTexture
+      // wireframe: true,
+      // transparent: true,
+      // opacity: 0.6
+      // renderOrder: 0
+    }
+    building.material = new THREE.MeshPhongMaterial(materialOpts)
 
     // building.castShadow = true
     // building.receiveShadow = true
@@ -228,6 +245,32 @@ export default {
     let buildingPos = { ...position }
     buildingPos.z -= 0.5 * size.z
 
+    // let light = new THREE.PointLight(0xfcfcf9, 1)
+    // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
+    // sun.position.set(-150, 200, 110)
+
+    let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let topOpts = {
+      color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
+      // side: THREE.DoubleSide,
+      shininess: 30
+    }
+    let topMat = new THREE.MeshPhongMaterial(topOpts)
+    let topMesh = new THREE.Mesh(topGeom, topMat)
+    let topPosition = { ...position }
+    topPosition.y += 0.5 * size.y
+
+    let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let floorOpts = {
+      color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
+      // side: THREE.DoubleSide,
+      shininess: 10
+    }
+    let floorMat = new THREE.MeshPhongMaterial(floorOpts)
+    let floorMesh = new THREE.Mesh(floorGeom, floorMat)
+    let floorPosition = { ...position }
+    floorPosition.y -= 0.5 * size.y
+
     return {
       block3d: null,
       // block_opts: materialOpts,
@@ -244,8 +287,13 @@ export default {
       position: position,
 
       // geometry: geometry,
+      // light: light,
       building: building,
       building_position: buildingPos,
+      top_mesh: topMesh,
+      top_position: topPosition,
+      floor_mesh: floorMesh,
+      floor_position: floorPosition,
       label_position: { x: 0, y: 0, z: 0 },
       color: 0xffffff,
       label_canvas: null,