muntadas-app/src/App.vue

<template>
  <div id="root">
    <!-- <header role="banner">
      <div class="wrapper">
        <h1
          class="site-title"
          tabindex="0"
        >
        </h1>
      </div>
    </header> -->
    <section role="main-content">
      <div class="wrapper">
        <renderer :obj="myRenderer" :size="size">
          <scene :obj="myScene" @update:obj="handleScene">

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

            <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>

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

            <template v-if="projects.length">
              <project
                v-for="(project, index) in projects"
                :key="project.id"
                :data="project"
                :len="projects.length"
                :index="index"
              />
            </template>

          </scene>
        </renderer>
      </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 Plan from './components/objects/Plan'
import Cube from './components/objects/Cube'
import Project from './components/objects/Project'

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

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,
    Plan
  },
  mixins: [mixins],
  data () {
    // const envcolor = 0xffffff
    let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
    renderer.setClearColor(0x000000, 0)
    renderer.shadowMap.enabled = true

    // 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(scene.background, 50, 400)
    // console.log('myScene', scene)

    // let cameraHelper = new THREE.CameraHelper()
    // scene.add(cameraHelper)

    return {
      debug: _debug,
      myRenderer: renderer,
      myScene: scene,
      // mouse_start: new THREE.Vector2(),
      // mouse: new THREE.Vector2(),
      camera: null,
      mouse: new THREE.Vector2(),
      controls: {
        user_interact: false,
        mouse: new THREE.Vector2(),
        mouse_start: new THREE.Vector2(),
        lon: 0,
        lat: 0,
        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: 150 },
      raycaster: new THREE.Raycaster(),
      interactive_objects: [],
      light_opts: {
        castShadow: true
      }
    }
  },
  computed: {
    ...mapState({
      projects: state => state.Projects.projects
    }),
    size () {
      return {
        w: window.innerWidth,
        h: window.innerHeight
      }
    }
  },
  created () {
    if (!this.projects.length) {
      this.getProjects()
    }
  },
  mounted () {
    console.log('mounted', this)
    this.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()
    document.addEventListener('mousedown', this.onDocMouseDown, false)
    document.addEventListener('mousemove', this.onDocMouseMove, false)
    document.addEventListener('mouseup', this.onDocMouseup, false)
  },
  updated () {
    this.updatedInteractiveObjects()
  },
  methods: {
    ...mapActions({
      getProjects: 'Projects/getProjects'
    }),
    handleScene (scene) {
      console.log('handlescene', scene)
    },
    updatedInteractiveObjects () {
      this.interactive_objects = []
      for (var i = 0; i < this.myScene.children.length; i++) {
        if (this.myScene.children[i].name === 'Project') {
          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) {
      // 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) {
        // lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
        this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
        // lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
        this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
      }
    },
    onDocMouseup (e) {
      // console.log('onDocumentMouseup', e)
      // CONTROLS
      this.controls.user_interact = false

      // INTERACT
      // TODO: check if draging
      // 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)
      // console.log('camera', this.camera)
      // console.log('TWEEN', TWEEN)
      let object, vnode, topos
      let cam = this.camera
      // let camControls = this.cam_controls
      let camPos = { ...this.camera.position }
      // console.log('camPos', camPos)
      if (intersects.length) {
        for (var i = 0; i < intersects.length; i++) {
          // intersects[i].object.material.color.set(0xff0000)
          object = intersects[i].object
          vnode = object.userData.vnode
          vnode.isOpened = true
          // this.cam_controls.target = object.position

          new TWEEN.Tween(this.controls.cam_target)
            .to(object.position, 400)
            .start()

          // cam.position.set({ x: camPos.x, y: camPos.y, z: camPos.z })
          // camControls.update()
          topos = { ...object.position }
          topos.z += 20
          topos.y = 5
          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)
              // camControls.update()
            })
            .start()

          // console.log('tween', tween)
          break
        }
      } else {
        // new TWEEN.Tween(this.camera.position)
        //   .to(this.init_cam_pos, 1000)
        //   .start()
      }
    },
    animate (tt) {
      this.controls.lat = Math.max(-85, Math.min(85, 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.controls.user_interact) {
        this.camera.lookAt(this.controls.cam_target)
      }

      TWEEN.update()
    }
  }
}
</script>

<style lang="scss" scoped>

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

}

</style>