sky and water domes using shaders
This commit is contained in:
+65
-37
@@ -14,6 +14,8 @@
|
||||
<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> -->
|
||||
@@ -30,7 +32,7 @@
|
||||
<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}" />
|
||||
<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
|
||||
@@ -56,12 +58,16 @@ import mixins from 'components/mixins'
|
||||
import * as THREE from 'three'
|
||||
import TWEEN from '@tweenjs/tween.js'
|
||||
|
||||
import Plan from './components/objects/Plan'
|
||||
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 = true
|
||||
const _debug = false
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
@@ -73,7 +79,7 @@ export default {
|
||||
components: {
|
||||
Cube,
|
||||
Project,
|
||||
Plan
|
||||
Ground
|
||||
},
|
||||
mixins: [mixins],
|
||||
data () {
|
||||
@@ -85,11 +91,41 @@ export default {
|
||||
// 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)
|
||||
// scene.fog = new THREE.Fog(new THREE.Color(0xffffff), 50, 200)
|
||||
// console.log('myScene', scene)
|
||||
|
||||
// let cameraHelper = new THREE.CameraHelper()
|
||||
// scene.add(cameraHelper)
|
||||
// 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)
|
||||
|
||||
return {
|
||||
debug: _debug,
|
||||
@@ -112,7 +148,7 @@ export default {
|
||||
cam_target: new THREE.Vector3(0, 0, 0)
|
||||
},
|
||||
// cam_controls: null,
|
||||
init_cam_pos: { x: 0, y: 10, z: 150 },
|
||||
init_cam_pos: { x: 0, y: 10, z: 100 },
|
||||
raycaster: new THREE.Raycaster(),
|
||||
interactive_objects: [],
|
||||
light_opts: {
|
||||
@@ -195,47 +231,39 @@ export default {
|
||||
// CONTROLS
|
||||
this.controls.user_interact = false
|
||||
|
||||
// INTERACT
|
||||
// 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)
|
||||
// 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)
|
||||
|
||||
let object, vnode//, toPos
|
||||
// let cam = this.camera
|
||||
// let camPos = { ...this.camera.position }
|
||||
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()
|
||||
// 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<mesh
|
||||
name="Plane"
|
||||
name="Ground"
|
||||
:position="position"
|
||||
:rotation="{
|
||||
x:deg2rad(rotation.x),
|
||||
@@ -19,7 +19,7 @@ import mixins from 'components/mixins'
|
||||
import * as THREE from 'three'
|
||||
|
||||
export default {
|
||||
name: 'Plan',
|
||||
name: 'Ground',
|
||||
mixins: [mixins],
|
||||
props: {
|
||||
size: Object,
|
||||
Reference in New Issue
Block a user