muntadas-app/src/App.vue

<template>
  <div id="root">
    <header
      role="banner"
      class="header-banner"
      @click.stop="onClickSiteTitle"
      @keyup.enter="onClickSiteTitle"
    >
      <div class="wrapper">
        <h2>Muntadas</h2>
        <h1
          class="site-title"
          tabindex="0"
        >
          Media Architecture Projects <sup>ALPHA</sup>
        </h1>
      </div>
    </header>
    <section role="main-content">
      <div class="wrapper">
        <renderer :obj="myRenderer" :size="size">
          <scene :obj="myScene" @update:obj="handleScene">

            <!-- <SkyBox :size="{x:500,y:500,z:500}" :position="{x:0,y:0,z:0}" :color="0x992222" /> -->

            <!-- <orbit-controls ref="cam_controls" :position="init_cam_pos" :rotation="{ x: 0, y: 0, z: 0 }">
              <camera />
            </orbit-controls> -->
            <camera ref="camera" :position="init_cam_pos" :rotation="init_cam_rot" />

            <!-- <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" />

            <template v-if="debug">
              <cube :size="{x:30,y:1,z:1}" :position="{x:15,y:0,z:0}" :color="0x992222" />
              <cube :size="{x:1,y:30,z:1}" :position="{x:0,y:15,z:0}" :color="0x00BBFF" />
              <cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
            </template>

            <ground :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x133f52" :rotation="{x:90,y:0,z:0}" />

            <template v-if="projects.length">
              <project
                v-for="(project) in projects"
                :id="project.id"
                :key="project.id"
                @lift="onLift"
              />
            </template>

          </scene>
        </renderer>
        <Content v-if="content_data" :data="content_data" @onClose="onCloseContent" />
        <div
          v-if="modale_title && !content_data"
          class="modale-title"
          :style="{ bottom: modale_title_pos.y+'px', right: modale_title_pos.x+'px' }"
        >
          <span class="title">{{ modale_title }}</span>
        </div>
      </div>
    </section>
    <footer />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import mixins from 'components/mixins'
import * as THREE from 'three'
import TWEEN from '@tweenjs/tween.js'

import BgVertex from 'assets/glsl/BgVertex'
import SkyFragment from 'assets/glsl/SkyFragment'
import WaterFragment from 'assets/glsl/WaterFragment'

import Ground from './components/objects/Ground'
import Cube from './components/objects/Cube'
import Project from './components/objects/Project'
import Content from './components/Content'

// const TWEEN = require('@tweenjs/tween.js')
const _debug = false

export default {
  metaInfo: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'Home',
    // all titles will be injected into this template
    titleTemplate: '%s | Muntadas'
  },
  components: {
    Cube,
    Project,
    Ground,
    Content
  },
  mixins: [mixins],
  data () {
    // const envcolor = 0xffffff
    let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
    renderer.setClearColor(0x000000, 0)
    // renderer.shadowMap.enabled = true
    // // to antialias the shadow
    // renderer.shadowMap.type = THREE.PCFSoftShadowMap

    // scene obj is well overwrited but background color not visible
    let scene = new THREE.Scene()
    scene.background = new THREE.Color(0x1a1a1a)
    // scene.fog = new THREE.Fog(new THREE.Color(0xffffff), 50, 200)
    // console.log('myScene', scene)

    // scene.add(new THREE.AxesHelper(500))

    // SKYDOME
    // https://github.com/mrdoob/three.js/blob/master/examples/webgl_lights_hemisphere.html
    // https://gamedevelopment.tutsplus.com/tutorials/a-beginners-guide-to-coding-graphics-shaders--cms-23313
    var uniforms = {
      'topColor': { value: new THREE.Color(0x0077ff) },
      'horizontColor': { value: new THREE.Color(0xffffff) },
      'waterColor': { value: new THREE.Color(0x13719a) },
      'bottomColor': { value: new THREE.Color(0x000000) },
      'offset': { value: 33 },
      'wateroffset': { value: 33 },
      'exponent': { value: 0.6 },
      'waterexponent': { value: 0.6 }
    }
    // SphereBufferGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
    var bgGeo = new THREE.SphereBufferGeometry(700, 32, 15, 0, 2 * Math.PI, 0, 0.5 * Math.PI)
    var skyMat = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: BgVertex,
      fragmentShader: SkyFragment,
      side: THREE.BackSide
    })
    var sky = new THREE.Mesh(bgGeo, skyMat)
    scene.add(sky)
    var waterMat = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: BgVertex,
      fragmentShader: WaterFragment,
      side: THREE.BackSide
    })
    var water = new THREE.Mesh(bgGeo, waterMat)
    water.rotateZ(this.deg2rad(180))
    scene.add(water)

    // SEA

    // lights
    var ambient = new THREE.AmbientLight(0xfcfcf9, 1)
    scene.add(ambient)

    // 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)
    // // scene.add(sun2.target)
    //
    // var sun3 = new THREE.PointLight(0xfcfcf9, 0.6)
    // sun3.position.set(0, 150, -110)
    // // sun3.castShadow = true
    // // sun3.target.position.set(0, 0, 0)
    // scene.add(sun3)
    // // scene.add(sun2.target)
    //
    // var sun4 = new THREE.PointLight(0xfcfcf9, 0.6)
    // sun4.position.set(0, -150, -110)
    // // sun4.castShadow = true
    // // sun4.target.position.set(0, 0, 0)
    // scene.add(sun4)
    // // scene.add(sun2.target)

    // RETURN DATA
    return {
      debug: _debug,
      myRenderer: renderer,
      myScene: scene,
      // mouse_start: new THREE.Vector2(),
      // mouse: new THREE.Vector2(),
      camera: null,
      modale_title_pos: { x: 0, y: 0 },
      mouse: new THREE.Vector2(),
      controls: {
        user_interact: false,
        is_dragging: false,
        mouse: new THREE.Vector2(),
        mouse_start: new THREE.Vector2(),
        lon: -90,
        lat: -5.73,
        lon_start: 0,
        lat_start: 0,
        phi: 0,
        theta: 0,
        cam_target: new THREE.Vector3(0, 0, 0)
      },
      // cam_controls: null,
      init_cam_pos: { x: 0, y: 10, z: 100 },
      // init_cam_pos: { x: 0, y: 150, z: 0 },
      init_cam_rot: { x: this.deg2rad(180), y: 0, z: 0 },
      raycaster: new THREE.Raycaster(),
      interactive_objects_names: ['Project', 'Content'],
      interactive_objects: [],
      // light_opts: {
      //   castShadow: true
      // },
      opened_vnode: null,
      content_data: null,
      modale_title: null
    }
  },
  computed: {
    ...mapState({
      projects: state => state.Projects.projects
    }),
    size () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
  },
  // watch: {
  //   projects (n, o) {
  //     console.log(`watch projects new, old`, n, o)
  //   }
  // },
  created () {
    if (!this.projects.length) {
      this.loadProjects()
    }
    this.$env3d.scene = this.myScene
    this.$env3d.renderer = this.myRenderer
  },
  mounted () {
    console.log('App mounted', this)
    console.log('App mounted $env3d', this.$env3d)

    this.camera = this.$env3d.camera = this.$refs.camera.curObj
    // this.cam_controls = this.$refs.cam_controls.controls
    // console.log('cam_controls', this.cam_controls)

    // this.cam_controls = new THREE.PointerLockControls(this.camera)
    // console.log('this.cam_controls', this.cam_controls)

    this.updatedInteractiveObjects()
    // CONTROLS
    // https://blogs.perficient.com/2020/05/21/3d-camera-movement-in-three-js-i-learned-the-hard-way-so-you-dont-have-to/

    this.myRenderer.domElement.addEventListener('mousedown', this.onDocMouseDown)
    this.myRenderer.domElement.addEventListener('mousemove', this.onDocMouseMove)
    this.myRenderer.domElement.addEventListener('mouseup', this.onDocMouseup)
  },
  updated () {
    this.updatedInteractiveObjects()
  },
  methods: {
    ...mapActions({
      loadProjects: 'Projects/loadProjects'
    }),
    handleScene (scene) {
      console.log('handlescene', scene)
    },
    updatedInteractiveObjects () {
      console.log('updatedInteractiveObjects', this.myScene.children)
      this.interactive_objects = []
      for (var i = 0; i < this.myScene.children.length; i++) {
        if (this.interactive_objects_names.indexOf(this.myScene.children[i].name) !== -1) {
          this.interactive_objects.push(this.myScene.children[i])
        }
      }
      // console.log('this.interactive_objects', this.interactive_objects)
    },
    onDocMouseDown (e) {
      // CONTROLS
      this.controls.mouse_start.x = e.clientX
      this.controls.mouse_start.y = e.clientY
      this.controls.lon_start = this.controls.lon
      this.controls.lat_start = this.controls.lat
      this.controls.user_interact = true
    },
    onDocMouseMove (e) {
      this.modale_title_pos = {
        x: window.innerWidth - e.clientX,
        y: window.innerHeight - e.clientY
      }
      // RAY CASTING : update the mouse variable
      this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
      this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1

      // CONTROLS
      if (this.controls.user_interact) {
        this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
        this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
        // console.log(`lon: ${this.controls.lon}, lat: ${this.controls.lat}`)
      }

      // update the picking ray with the camera and mouse position
      this.raycaster.setFromCamera(this.mouse, this.camera)
      // calculate objects intersecting the picking ray
      var intersects = this.raycaster.intersectObjects(this.interactive_objects)
      if (intersects.length) {
        let object = intersects[0].object
        if (object.name === 'Content') {
          let vnode = object.userData.vnode
          console.log('Name', vnode.data.Name)
          this.modale_title = vnode.data.Name
        } else {
          this.modale_title = null
        }
      } else {
        this.modale_title = null
      }
    },
    onDocMouseup (e) {
      console.log('onDocumentMouseup', e)
      // CONTROLS
      this.controls.user_interact = false

      // // check if event is not a classic html link
      // // TODO: stopPropagation instead of that (but it does not work)
      // if (e.target.className === 'close-btn' ||
      //   e.target.className === 'btn-level' ||
      //   e.target.className === 'header-banner') {
      //   // console.log('close-btn: vnode', this.opened_vnode)
      //   // this.opened_vnode.isOpened = false
      //   return
      // }

      // INTERACTIONS
      this.updatedInteractiveObjects()

      // check if not draging
      if (Math.hypot(e.clientX - this.controls.mouse_start.x, e.clientY - this.controls.mouse_start.y) < 5) {
        // update the picking ray with the camera and mouse position
        this.raycaster.setFromCamera(this.mouse, this.camera)
        // calculate objects intersecting the picking ray
        var intersects = this.raycaster.intersectObjects(this.interactive_objects)
        // console.log('intersects', intersects)

        // if we clicked on 3Dobject
        if (intersects.length) {
          let cam = this.camera
          // console.log('onDocMouseUp intersects', intersects)
          let object = intersects[0].object
          console.log('object[0]', object)
          let vnode = object.userData.vnode
          if (object.name === 'Content' && vnode.isOpened) {
            this.content_data = vnode.data
          }

          // close precedent vnode
          if (this.opened_vnode && this.opened_vnode.$options._componentTag === 'ContentBlock') {
            // console.log('opened_vnode', this.opened_vnode)
            this.opened_vnode.isOpened = false
          }
          // open current vnode
          // vnode.isOpened = true
          vnode.open()
          // recorde vnode as precedent vnode
          this.opened_vnode = vnode

          // get new camera target pos
          let toPos, tweenTime
          if (object.name === 'Content') {
            toPos = { ...object.position }
            tweenTime = 3000
            this.controls.lat = 0
            switch (vnode.face) {
              case 'left':
                toPos.x += 2.5
                this.controls.lon = 180
                break
              case 'back':
                toPos.z += 2.5
                this.controls.lon = -90
                break
              case 'right':
                toPos.x -= 2.5
                this.controls.lon = 0
                break
              case 'front':
                toPos.z -= 2.5
                this.controls.lon = 90
                break
            }
            // let controls = this.controls
            // let rad2deg = this.rad2deg
            // let camTarget = { ...this.controls.cam_target }
            new TWEEN.Tween(this.controls.cam_target)
              .easing(TWEEN.Easing.Quadratic.InOut)
              .to(object.position, 2000)
              .start()
          } else if (object.name === 'Project') {
            toPos = { ...object.userData.position }
            toPos.y = 2
            tweenTime = 7000
          }
          // toPos.y = 5
          let camPos = { ...this.camera.position }
          new TWEEN.Tween(camPos)
            .easing(TWEEN.Easing.Quadratic.InOut)
            .to(toPos, tweenTime)
            .onUpdate(function () {
              // console.log('tween update', this._object)
              cam.position.set(this._object.x, this._object.y, this._object.z)
            })
            .start()

          // console.log('tween', tween)
          //   break
          // }
        } else {
          // new TWEEN.Tween(this.camera.position)
          //   .to(this.init_cam_pos, 1000)
          //   .start()
        }
      } // end if dragging
    },
    onClickSiteTitle (e) {
      e.preventDefault()
      let cam = this.camera
      let camPos = { ...this.camera.position }
      new TWEEN.Tween(camPos)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .to(this.init_cam_pos, 5000)
        .onUpdate(function () {
          // console.log('tween update', this._object)
          cam.position.set(this._object.x, this._object.y, this._object.z)
        })
        .start()
      this.controls.lon = -90
      this.controls.lat = -5.75
      new TWEEN.Tween(this.controls.cam_target)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .to({ x: 0, y: 0, z: 0 }, 5000)
        .start()
      // let camRot = { ...this.camera.rotation }
      // console.log('camRot', camRot)
      // new TWEEN.Tween(camRot)
      //   .easing(TWEEN.Easing.Quadratic.InOut)
      //   .to(this.init_cam_rot, 5000)
      //   .onUpdate(function () {
      //     // console.log('tween update', this._object)
      //     cam.rotation.x = this._object.x
      //     cam.rotation.y = this._object.y
      //     cam.rotation.z = this._object.z
      //   })
      //   .start()
    },
    onLift (toPos) {
      console.log('onLift', toPos)
      let cam = this.camera
      let camPos = { ...cam.position }
      new TWEEN.Tween(camPos)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .to(toPos, 3000)
        .onUpdate(function () {
          // console.log('tween update', this._object)
          cam.position.set(this._object.x, this._object.y, this._object.z)
        })
        .start()
    },
    animate (tt) {
      // CONTROLS
      if (this.controls.user_interact) {
        this.controls.lat = Math.max(-25, Math.min(45, this.controls.lat))
        this.controls.phi = this.deg2rad(90 - this.controls.lat)
        this.controls.theta = this.deg2rad(this.controls.lon)
        // if (this.controls.user_interact === false) {
        //   this.controls.lon += 0.1
        // }
        this.controls.cam_target.x = 500 * Math.sin(this.controls.phi) * Math.cos(this.controls.theta)
        this.controls.cam_target.y = 500 * Math.cos(this.controls.phi)
        this.controls.cam_target.z = 500 * Math.sin(this.controls.phi) * Math.sin(this.controls.theta)
      }

      if (this.camera) {
        this.camera.lookAt(this.controls.cam_target)
      }

      // TWEENS
      TWEEN.update()
    },
    onCloseContent () {
      this.content_data = null
    }
  }
}
</script>

<style lang="scss" scoped>

.container{
  // font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  max-width: 1200px;

}

</style>