App.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. <template>
  2. <div id="root">
  3. <header role="banner">
  4. <div class="wrapper">
  5. <h1
  6. class="site-title"
  7. tabindex="0"
  8. >
  9. Media Architecture Projects <sup>ALPHA</sup>
  10. </h1>
  11. <h2>Antoni Muntadas</h2>
  12. </div>
  13. </header>
  14. <section role="main-content">
  15. <div class="wrapper">
  16. <renderer :obj="myRenderer" :size="size">
  17. <scene :obj="myScene" @update:obj="handleScene">
  18. <!-- <SkyBox :size="{x:500,y:500,z:500}" :position="{x:0,y:0,z:0}" :color="0x992222" /> -->
  19. <!-- <orbit-controls ref="cam_controls" :position="init_cam_pos" :rotation="{ x: 0, y: 0, z: 0 }">
  20. <camera />
  21. </orbit-controls> -->
  22. <camera ref="camera" :position="init_cam_pos" :rotation="init_cam_rot" />
  23. <!-- <light :hex="0xffffff" :intensity="5" :position="{x:-100,y:150,z:50}" />
  24. <light :hex="0xffffff" :intensity="2" :position="{x:100,y:-150,z:-50}" :options="light_opts" /> -->
  25. <animation :fn="animate" :speed="3" />
  26. <template v-if="debug">
  27. <cube :size="{x:30,y:1,z:1}" :position="{x:15,y:0,z:0}" :color="0x992222" />
  28. <cube :size="{x:1,y:30,z:1}" :position="{x:0,y:15,z:0}" :color="0x00BBFF" />
  29. <cube :size="{x:1,y:1,z:30}" :position="{x:0,y:0,z:15}" :color="0x17d100" />
  30. </template>
  31. <ground :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x133f52" :rotation="{x:90,y:0,z:0}" />
  32. <template v-if="projects.length">
  33. <project
  34. v-for="(project) in projects"
  35. :key="project.id"
  36. :id="project.id"
  37. />
  38. </template>
  39. </scene>
  40. </renderer>
  41. <Content v-if="content_data" :data="content_data" @onClose="onCloseContent" />
  42. </div>
  43. </section>
  44. <footer />
  45. </div>
  46. </template>
  47. <script>
  48. import { mapState, mapActions } from 'vuex'
  49. import mixins from 'components/mixins'
  50. import * as THREE from 'three'
  51. import TWEEN from '@tweenjs/tween.js'
  52. import BgVertex from 'assets/glsl/BgVertex'
  53. import SkyFragment from 'assets/glsl/SkyFragment'
  54. import WaterFragment from 'assets/glsl/WaterFragment'
  55. import Ground from './components/objects/Ground'
  56. import Cube from './components/objects/Cube'
  57. import Project from './components/objects/Project'
  58. import Content from './components/Content'
  59. // const TWEEN = require('@tweenjs/tween.js')
  60. const _debug = false
  61. export default {
  62. metaInfo: {
  63. // if no subcomponents specify a metaInfo.title, this title will be used
  64. title: 'Home',
  65. // all titles will be injected into this template
  66. titleTemplate: '%s | Muntadas'
  67. },
  68. components: {
  69. Cube,
  70. Project,
  71. Ground,
  72. Content
  73. },
  74. mixins: [mixins],
  75. data () {
  76. // const envcolor = 0xffffff
  77. let renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true })
  78. renderer.setClearColor(0x000000, 0)
  79. // renderer.shadowMap.enabled = true
  80. // // to antialias the shadow
  81. // renderer.shadowMap.type = THREE.PCFSoftShadowMap
  82. // scene obj is well overwrited but background color not visible
  83. let scene = new THREE.Scene()
  84. scene.background = new THREE.Color(0x1a1a1a)
  85. // scene.fog = new THREE.Fog(new THREE.Color(0xffffff), 50, 200)
  86. // console.log('myScene', scene)
  87. // scene.add(new THREE.AxesHelper(500))
  88. // SKYDOME
  89. // https://github.com/mrdoob/three.js/blob/master/examples/webgl_lights_hemisphere.html
  90. // https://gamedevelopment.tutsplus.com/tutorials/a-beginners-guide-to-coding-graphics-shaders--cms-23313
  91. var uniforms = {
  92. 'topColor': { value: new THREE.Color(0x0077ff) },
  93. 'horizontColor': { value: new THREE.Color(0xffffff) },
  94. 'waterColor': { value: new THREE.Color(0x13719a) },
  95. 'bottomColor': { value: new THREE.Color(0x000000) },
  96. 'offset': { value: 33 },
  97. 'wateroffset': { value: 33 },
  98. 'exponent': { value: 0.6 },
  99. 'waterexponent': { value: 0.6 }
  100. }
  101. // SphereBufferGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
  102. var bgGeo = new THREE.SphereBufferGeometry(700, 32, 15, 0, 2 * Math.PI, 0, 0.5 * Math.PI)
  103. var skyMat = new THREE.ShaderMaterial({
  104. uniforms: uniforms,
  105. vertexShader: BgVertex,
  106. fragmentShader: SkyFragment,
  107. side: THREE.BackSide
  108. })
  109. var sky = new THREE.Mesh(bgGeo, skyMat)
  110. scene.add(sky)
  111. var waterMat = new THREE.ShaderMaterial({
  112. uniforms: uniforms,
  113. vertexShader: BgVertex,
  114. fragmentShader: WaterFragment,
  115. side: THREE.BackSide
  116. })
  117. var water = new THREE.Mesh(bgGeo, waterMat)
  118. water.rotateZ(this.deg2rad(180))
  119. scene.add(water)
  120. // SEA
  121. // lights
  122. var ambient = new THREE.AmbientLight(0xfcfcf9, 1)
  123. scene.add(ambient)
  124. // var sun = new THREE.PointLight(0xfcfcf9, 1)
  125. // // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
  126. // sun.position.set(-150, 200, 110)
  127. // // sun.castShadow = true
  128. // // sun.shadow.bias = -0.0001
  129. // // sun.shadow.mapSize.width = 1024 * 4
  130. // // sun.shadow.mapSize.height = 1024 * 4
  131. // // sun.target.position.set(0, 0, 0)
  132. // scene.add(sun)
  133. // // scene.add(sun.target)
  134. // var sun2 = new THREE.PointLight(0xfcfcf9, 1)
  135. // sun2.position.set(150, -200, -110)
  136. // // sun2.castShadow = true
  137. // // sun2.target.position.set(0, 0, 0)
  138. // scene.add(sun2)
  139. // // scene.add(sun2.target)
  140. //
  141. // var sun3 = new THREE.PointLight(0xfcfcf9, 0.6)
  142. // sun3.position.set(0, 150, -110)
  143. // // sun3.castShadow = true
  144. // // sun3.target.position.set(0, 0, 0)
  145. // scene.add(sun3)
  146. // // scene.add(sun2.target)
  147. //
  148. // var sun4 = new THREE.PointLight(0xfcfcf9, 0.6)
  149. // sun4.position.set(0, -150, -110)
  150. // // sun4.castShadow = true
  151. // // sun4.target.position.set(0, 0, 0)
  152. // scene.add(sun4)
  153. // // scene.add(sun2.target)
  154. // RETURN DATA
  155. return {
  156. debug: _debug,
  157. myRenderer: renderer,
  158. myScene: scene,
  159. // mouse_start: new THREE.Vector2(),
  160. // mouse: new THREE.Vector2(),
  161. camera: null,
  162. mouse: new THREE.Vector2(),
  163. controls: {
  164. user_interact: false,
  165. is_dragging: false,
  166. mouse: new THREE.Vector2(),
  167. mouse_start: new THREE.Vector2(),
  168. lon: -90,
  169. lat: -5.73,
  170. lon_start: 0,
  171. lat_start: 0,
  172. phi: 0,
  173. theta: 0,
  174. cam_target: new THREE.Vector3(0, 0, 0)
  175. },
  176. // cam_controls: null,
  177. init_cam_pos: { x: 0, y: 10, z: 100 },
  178. // init_cam_pos: { x: 0, y: 150, z: 0 },
  179. init_cam_rot: { x: this.deg2rad(180), y: 0, z: 0 },
  180. raycaster: new THREE.Raycaster(),
  181. interactive_objects_names: ['Project', 'Content'],
  182. interactive_objects: [],
  183. // light_opts: {
  184. // castShadow: true
  185. // },
  186. opened_vnode: null,
  187. content_data: null
  188. }
  189. },
  190. computed: {
  191. ...mapState({
  192. projects: state => state.Projects.projects
  193. }),
  194. size () {
  195. return {
  196. w: window.innerWidth,
  197. h: window.innerHeight
  198. }
  199. }
  200. },
  201. // watch: {
  202. // projects (n, o) {
  203. // console.log(`watch projects new, old`, n, o)
  204. // }
  205. // },
  206. created () {
  207. if (!this.projects.length) {
  208. this.loadProjects()
  209. }
  210. this.$env3d.scene = this.myScene
  211. this.$env3d.renderer = this.myRenderer
  212. },
  213. mounted () {
  214. console.log('App mounted', this)
  215. console.log('App mounted $env3d', this.$env3d)
  216. this.camera = this.$env3d.camera = this.$refs.camera.curObj
  217. // this.cam_controls = this.$refs.cam_controls.controls
  218. // console.log('cam_controls', this.cam_controls)
  219. // this.cam_controls = new THREE.PointerLockControls(this.camera)
  220. // console.log('this.cam_controls', this.cam_controls)
  221. this.updatedInteractiveObjects()
  222. // CONTROLS
  223. // https://blogs.perficient.com/2020/05/21/3d-camera-movement-in-three-js-i-learned-the-hard-way-so-you-dont-have-to/
  224. document.addEventListener('mousedown', this.onDocMouseDown, false)
  225. document.addEventListener('mousemove', this.onDocMouseMove, false)
  226. document.addEventListener('mouseup', this.onDocMouseup, false)
  227. },
  228. updated () {
  229. this.updatedInteractiveObjects()
  230. },
  231. methods: {
  232. ...mapActions({
  233. loadProjects: 'Projects/loadProjects'
  234. }),
  235. handleScene (scene) {
  236. console.log('handlescene', scene)
  237. },
  238. updatedInteractiveObjects () {
  239. console.log('updatedInteractiveObjects', this.myScene.children)
  240. this.interactive_objects = []
  241. for (var i = 0; i < this.myScene.children.length; i++) {
  242. if (this.interactive_objects_names.indexOf(this.myScene.children[i].name) !== -1) {
  243. this.interactive_objects.push(this.myScene.children[i])
  244. }
  245. }
  246. // console.log('this.interactive_objects', this.interactive_objects)
  247. },
  248. onDocMouseDown (e) {
  249. // CONTROLS
  250. this.controls.mouse_start.x = e.clientX
  251. this.controls.mouse_start.y = e.clientY
  252. this.controls.lon_start = this.controls.lon
  253. this.controls.lat_start = this.controls.lat
  254. this.controls.user_interact = true
  255. },
  256. onDocMouseMove (e) {
  257. // RAY CASTING : update the mouse variable
  258. this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
  259. this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
  260. // CONTROLS
  261. if (this.controls.user_interact) {
  262. this.controls.lon = (this.controls.mouse_start.x - e.clientX) * 0.1 + this.controls.lon_start
  263. this.controls.lat = (e.clientY - this.controls.mouse_start.y) * 0.1 + this.controls.lat_start
  264. // console.log(`lon: ${this.controls.lon}, lat: ${this.controls.lat}`)
  265. }
  266. },
  267. onDocMouseup (e) {
  268. console.log('onDocumentMouseup', e)
  269. // CONTROLS
  270. this.controls.user_interact = false
  271. // check if event is not a classic html link
  272. if (e.target.className === 'close-btn') {
  273. // console.log('close-btn: vnode', this.opened_vnode)
  274. // this.opened_vnode.isOpened = false
  275. return
  276. }
  277. // INTERACTIONS
  278. this.updatedInteractiveObjects()
  279. // check if not draging
  280. if (Math.hypot(e.clientX - this.controls.mouse_start.x, e.clientY - this.controls.mouse_start.y) < 5) {
  281. // update the picking ray with the camera and mouse position
  282. this.raycaster.setFromCamera(this.mouse, this.camera)
  283. // calculate objects intersecting the picking ray
  284. var intersects = this.raycaster.intersectObjects(this.interactive_objects)
  285. // console.log('intersects', intersects)
  286. // if we clicked on 3Dobject
  287. if (intersects.length) {
  288. let cam = this.camera
  289. console.log('onDocMouseUp intersects', intersects)
  290. let object = intersects[0].object
  291. console.log('object[0].name', object.name)
  292. let vnode = object.userData.vnode
  293. if (object.name === 'Content' && vnode.isOpened) {
  294. this.content_data = vnode.data
  295. }
  296. // close precedent vnode
  297. if (this.opened_vnode && this.opened_vnode.$options._componentTag === 'ContentBlock') {
  298. // console.log('opened_vnode', this.opened_vnode)
  299. this.opened_vnode.isOpened = false
  300. }
  301. // open current vnode
  302. // vnode.isOpened = true
  303. vnode.open()
  304. // recorde vnode as precedent vnode
  305. this.opened_vnode = vnode
  306. // get new camera target pos
  307. let toPos = { ...object.position }
  308. if (object.name === 'Content') {
  309. this.controls.lat = 0
  310. switch (vnode.face) {
  311. case 'left':
  312. toPos.x += 4
  313. this.controls.lon = 180
  314. break
  315. // case 'back':
  316. // toPos.z += 4
  317. // break
  318. case 'right':
  319. toPos.x -= 4
  320. this.controls.lon = 0
  321. break
  322. // case 'front':
  323. // toPos.z -= 4
  324. // break
  325. }
  326. // TODO: we need to update lon and lat accordingly when chaging camera orientation
  327. // let controls = this.controls
  328. // let rad2deg = this.rad2deg
  329. // let camTarget = { ...this.controls.cam_target }
  330. new TWEEN.Tween(this.controls.cam_target)
  331. .easing(TWEEN.Easing.Quadratic.InOut)
  332. .to(object.position, 2000)
  333. .start()
  334. } else if (object.name === 'Project') {
  335. toPos.z *= 0.5
  336. toPos.y = 2
  337. }
  338. // toPos.y = 5
  339. let camPos = { ...this.camera.position }
  340. new TWEEN.Tween(camPos)
  341. .easing(TWEEN.Easing.Quadratic.InOut)
  342. .to(toPos, 3000)
  343. .onUpdate(function () {
  344. // console.log('tween update', this._object)
  345. cam.position.set(this._object.x, this._object.y, this._object.z)
  346. })
  347. .start()
  348. // console.log('tween', tween)
  349. // break
  350. // }
  351. } else {
  352. // new TWEEN.Tween(this.camera.position)
  353. // .to(this.init_cam_pos, 1000)
  354. // .start()
  355. }
  356. } // end if dragging
  357. },
  358. animate (tt) {
  359. // CONTROLS
  360. if (this.controls.user_interact) {
  361. this.controls.lat = Math.max(-85, Math.min(85, this.controls.lat))
  362. this.controls.phi = this.deg2rad(90 - this.controls.lat)
  363. this.controls.theta = this.deg2rad(this.controls.lon)
  364. // if (this.controls.user_interact === false) {
  365. // this.controls.lon += 0.1
  366. // }
  367. this.controls.cam_target.x = 500 * Math.sin(this.controls.phi) * Math.cos(this.controls.theta)
  368. this.controls.cam_target.y = 500 * Math.cos(this.controls.phi)
  369. this.controls.cam_target.z = 500 * Math.sin(this.controls.phi) * Math.sin(this.controls.theta)
  370. }
  371. if (this.camera) {
  372. this.camera.lookAt(this.controls.cam_target)
  373. }
  374. // TWEENS
  375. TWEEN.update()
  376. },
  377. onCloseContent () {
  378. this.content_data = null
  379. }
  380. }
  381. }
  382. </script>
  383. <style lang="scss" scoped>
  384. .container{
  385. // font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  386. max-width: 1200px;
  387. }
  388. </style>