123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- <template>
- <div id="root">
- <header role="banner">
- <div class="wrapper">
- <h1
- class="site-title"
- tabindex="0"
- >
- Muntadas
- </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="{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>
- <ground :size="{w:5000,h:5000}" :position="{x:0,y:0,z:0}" :color="0x000011" :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 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'
- // 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
- },
- 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(new THREE.Color(0xffffff), 50, 200)
- // console.log('myScene', scene)
- // 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(0x0000aa) },
- '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(900, 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 ground = new THREE.Mesh(bgGeo, waterMat)
- 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,
- 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: 100 },
- 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
- // INTERACTIONS
- // 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)
- let object, vnode//, toPos
- // let cam = this.camera
- // let camPos = { ...this.camera.position }
- if (intersects.length) {
- for (var i = 0; i < intersects.length; i++) {
- object = intersects[i].object
- vnode = object.userData.vnode
- vnode.isOpened = true
- // new TWEEN.Tween(this.controls.cam_target)
- // .to(object.position, 400)
- // .start()
- //
- // 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>
|