better top and floor, random buildings colors
This commit is contained in:
+20
-20
@@ -139,22 +139,22 @@ export default {
|
||||
// SEA
|
||||
|
||||
// lights
|
||||
var ambient = new THREE.AmbientLight(0xfcfcf9, 0.5)
|
||||
var ambient = new THREE.AmbientLight(0xfcfcf9, 1)
|
||||
scene.add(ambient)
|
||||
|
||||
var sun = new THREE.PointLight(0xfcfcf9, 2)
|
||||
// var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
|
||||
sun.position.set(-150, 150, 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 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, 0.6)
|
||||
// sun2.position.set(150, 150, 110)
|
||||
// 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)
|
||||
@@ -313,14 +313,14 @@ export default {
|
||||
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) {
|
||||
// console.log('onDocMouseUp intersects', intersects)
|
||||
let cam = this.camera
|
||||
let camPos = { ...this.camera.position }
|
||||
console.log('onDocMouseUp intersects', intersects)
|
||||
// for (var i = 0; i < intersects.length; i++) {
|
||||
object = intersects[0].object
|
||||
vnode = object.userData.vnode
|
||||
let object = intersects[0].object
|
||||
console.log('object[0].name', object.name)
|
||||
let vnode = object.userData.vnode
|
||||
if (object.name === 'Content' && vnode.isOpened) {
|
||||
this.content_data = vnode.data
|
||||
}
|
||||
@@ -335,7 +335,7 @@ export default {
|
||||
// recorde vnode as precedent vnode
|
||||
this.opened_vnode = vnode
|
||||
|
||||
toPos = { ...object.position }
|
||||
let toPos = { ...object.position }
|
||||
if (object.name === 'Content') {
|
||||
switch (vnode.face) {
|
||||
case 'left':
|
||||
|
||||
@@ -60,6 +60,53 @@ export default {
|
||||
reject(src)
|
||||
}
|
||||
})
|
||||
},
|
||||
createGradientCanvas (c1, c2) {
|
||||
var ctx = document.createElement('canvas').getContext('2d')
|
||||
ctx.canvas.width = 1024
|
||||
ctx.canvas.height = 1024
|
||||
var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
|
||||
lingrad.addColorStop(0, c1)
|
||||
lingrad.addColorStop(1, c2)
|
||||
ctx.fillStyle = lingrad
|
||||
ctx.fillRect(0, 0, 1024, 1024)
|
||||
return ctx.canvas
|
||||
}
|
||||
// ,
|
||||
// /**
|
||||
// * Converts an HSL color value to RGB. Conversion formula
|
||||
// * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
||||
// * Assumes h, s, and l are contained in the set [0, 1] and
|
||||
// * returns r, g, and b in the set [0, 255].
|
||||
// *
|
||||
// * @param {number} h The hue
|
||||
// * @param {number} s The saturation
|
||||
// * @param {number} l The lightness
|
||||
// * @return {Array} The RGB representation
|
||||
// */
|
||||
// hslToRgb (h, s, l) {
|
||||
// var r, g, b
|
||||
//
|
||||
// if (s === 0) {
|
||||
// r = g = b = l // achromatic
|
||||
// } else {
|
||||
// var hue2rgb = function hue2rgb (p, q, t) {
|
||||
// if (t < 0) t += 1
|
||||
// if (t > 1) t -= 1
|
||||
// if (t < 1 / 6) return p + (q - p) * 6 * t
|
||||
// if (t < 1 / 2) return q
|
||||
// if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
|
||||
// return p
|
||||
// }
|
||||
//
|
||||
// var q = l < 0.5 ? l * (1 + s) : l + s - l * s
|
||||
// var p = 2 * l - q
|
||||
// r = hue2rgb(p, q, h + 1 / 3)
|
||||
// g = hue2rgb(p, q, h)
|
||||
// b = hue2rgb(p, q, h - 1 / 3)
|
||||
// }
|
||||
//
|
||||
// return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <object3d ref="block3d" name="Content" :position="position"> -->
|
||||
<!-- <mesh ref="block3d" name="ContentBlock" :position="position">
|
||||
<geometry type="Box" :args="[size.x, size.y, size.z]" />
|
||||
<material type="MeshLambert" :color="color" :options="opts" />
|
||||
</mesh> -->
|
||||
<mesh
|
||||
<!-- <mesh
|
||||
ref="label3d"
|
||||
name="Content"
|
||||
:position="position"
|
||||
@@ -18,7 +19,7 @@
|
||||
<material type="MeshLambert" :options="label_opts">
|
||||
<texture :options="label_texture_opts" />
|
||||
</material>
|
||||
</mesh>
|
||||
</mesh> -->
|
||||
<mesh
|
||||
v-if="img_canvas"
|
||||
ref="img3d"
|
||||
@@ -35,6 +36,7 @@
|
||||
<texture :options="img_texture_opts" />
|
||||
</material>
|
||||
</mesh>
|
||||
<!-- </object3d> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -48,7 +50,7 @@ export default {
|
||||
props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
|
||||
data: () => ({
|
||||
// block3d: null,
|
||||
size: { x: 2, y: 3, z: 0.1 },
|
||||
size: { x: 4, y: 8 },
|
||||
position: { x: 0, y: 0, z: 0 },
|
||||
rotation: { x: 0, y: 0, z: 0 },
|
||||
// opts: {
|
||||
@@ -58,14 +60,14 @@ export default {
|
||||
// // opacity: 0.6
|
||||
// },
|
||||
isOpened: false,
|
||||
label3d: null,
|
||||
label_opts: {
|
||||
side: THREE.DoubleSide,
|
||||
// wireframe: false,
|
||||
transparent: true
|
||||
// opacity: 0.6
|
||||
// renderOrder: 0
|
||||
},
|
||||
// label3d: null,
|
||||
// label_opts: {
|
||||
// side: THREE.DoubleSide,
|
||||
// // wireframe: false,
|
||||
// transparent: true
|
||||
// // opacity: 0.6
|
||||
// // renderOrder: 0
|
||||
// },
|
||||
img_opts: {
|
||||
// side: THREE.DoubleSide,
|
||||
// wireframe: false,
|
||||
@@ -74,10 +76,10 @@ export default {
|
||||
// renderOrder: 0
|
||||
},
|
||||
// label_position: { x: 5, y: 5, z: 6 },
|
||||
label_canvas: null,
|
||||
label_size: null,
|
||||
// label_canvas: null,
|
||||
// label_size: null,
|
||||
img_canvas: null,
|
||||
img_size: { x: 2, y: 3, z: 0.1 },
|
||||
img_size: { x: 0, y: 0 },
|
||||
img_position: { x: 0, y: 0, z: 0 },
|
||||
face: null
|
||||
}),
|
||||
@@ -99,14 +101,14 @@ export default {
|
||||
}
|
||||
return color
|
||||
},
|
||||
label_texture_opts () {
|
||||
return {
|
||||
canvas: this.label_canvas,
|
||||
minFilter: THREE.LinearFilter,
|
||||
wrapS: THREE.ClampToEdgeWrapping,
|
||||
wrapT: THREE.ClampToEdgeWrapping
|
||||
}
|
||||
},
|
||||
// label_texture_opts () {
|
||||
// return {
|
||||
// canvas: this.label_canvas,
|
||||
// minFilter: THREE.LinearFilter,
|
||||
// wrapS: THREE.ClampToEdgeWrapping,
|
||||
// wrapT: THREE.ClampToEdgeWrapping
|
||||
// }
|
||||
// },
|
||||
img_texture_opts () {
|
||||
return {
|
||||
canvas: this.img_canvas,
|
||||
@@ -118,7 +120,7 @@ export default {
|
||||
},
|
||||
created () {
|
||||
// console.log('ContentBlock created', this.data)
|
||||
let txtcolor = '#000000'
|
||||
// let txtcolor = '#000000'
|
||||
// switch (this.type) {
|
||||
// case 'visible':
|
||||
// txtcolor = '#0000ff'
|
||||
@@ -132,10 +134,10 @@ export default {
|
||||
// default:
|
||||
// }
|
||||
|
||||
this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
|
||||
|
||||
this.size.x = this.label_size.x + 0.2
|
||||
this.size.y = this.label_size.y + 0.2
|
||||
// this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
|
||||
//
|
||||
// this.size.x = this.label_size.x + 0.2
|
||||
// this.size.y = this.label_size.y + 0.2
|
||||
|
||||
let y = 0
|
||||
let top = this.prtPosition.y + this.prtSize.y / 2
|
||||
@@ -200,13 +202,15 @@ export default {
|
||||
|
||||
// console.log()
|
||||
if (this.data.Media && this.data.Media.length) {
|
||||
console.log(this.data.Media[0].url)
|
||||
// console.log(this.data.Media[0].url)
|
||||
// create image object with a promise (async img loading)
|
||||
this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`)
|
||||
.then(({ img, canvas }) => {
|
||||
// console.log('THEN img loaded ok', this, img, canvas)
|
||||
let f = 3 / canvas.width
|
||||
let f = this.size.x / canvas.width
|
||||
this.img_size.x = canvas.width * f
|
||||
this.img_size.y = canvas.height * f
|
||||
this.img_size.y = this.size.y = canvas.height * f
|
||||
console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
|
||||
this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
|
||||
switch (this.face) {
|
||||
case 'left':
|
||||
@@ -227,6 +231,12 @@ export default {
|
||||
break
|
||||
}
|
||||
this.img_canvas = canvas
|
||||
this.curObj.needsUpdate()
|
||||
// this.imgObj = this.$refs.img3d.curObj
|
||||
// // record self references
|
||||
// this.imgObj.userData = {
|
||||
// vnode: this
|
||||
// }
|
||||
})
|
||||
.catch(function () {
|
||||
console.warn('CATCH img load ERROR')
|
||||
@@ -240,11 +250,14 @@ export default {
|
||||
// this.block3d = this.$refs.block3d.curObj
|
||||
// this.block3d.castShadow = true
|
||||
// this.block3d.receiveShadow = true
|
||||
|
||||
this.label3d = this.$refs.label3d.curObj
|
||||
// record self references
|
||||
this.label3d.userData = {
|
||||
vnode: this
|
||||
},
|
||||
updated () {
|
||||
if (!this.curObj && this.$refs.img3d) {
|
||||
this.curObj = this.$refs.img3d.curObj
|
||||
// record self references
|
||||
this.curObj.userData = {
|
||||
vnode: this
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
side: THREE.DoubleSide,
|
||||
wireframe: false,
|
||||
transparent: true,
|
||||
opacity: 0.4
|
||||
opacity: 0.6
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<object3d ref="block3d" name="Project" :obj="building" :position="building_position"/>
|
||||
<object3d ref="top" :obj="top_mesh" :position="top_position"/>
|
||||
<object3d ref="floor" :obj="floor_mesh" :position="floor_position"/>
|
||||
<!-- <light :obj="light" :position="building_position" /> -->
|
||||
<mesh ref="label3d" name="Label" :position="label_position">
|
||||
<geometry type="Plane" :args="[label_size.x, label_size.y]" />
|
||||
<material type="MeshLambert" :options="label_opts">
|
||||
@@ -52,8 +55,8 @@ import { ThreeBSP } from 'three-js-csg-es6'
|
||||
import mixins from 'components/mixins'
|
||||
import ContentBlock from 'components/objects/ContentBlock'
|
||||
|
||||
import BgVertex from 'assets/glsl/BgVertex'
|
||||
import BuildingFragment from 'assets/glsl/BuildingFragment'
|
||||
// import BgVertex from 'assets/glsl/BgVertex'
|
||||
// import BuildingFragment from 'assets/glsl/BuildingFragment'
|
||||
|
||||
export default {
|
||||
name: 'Project',
|
||||
@@ -74,24 +77,14 @@ export default {
|
||||
|
||||
let wallW = 0.001
|
||||
|
||||
let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
let topMesh = new THREE.Mesh(topGeom)
|
||||
topMesh.position.y = -0.5 * size.y
|
||||
let topBSP = new ThreeBSP(topMesh)
|
||||
|
||||
let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
let floorMesh = new THREE.Mesh(floorGeom)
|
||||
floorMesh.position.y = 0.5 * size.y
|
||||
let floorBSP = new ThreeBSP(floorMesh)
|
||||
|
||||
let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
|
||||
let backMesh = new THREE.Mesh(backGeom)
|
||||
backMesh.position.z = -0.5 * size.z
|
||||
let backBSP = new ThreeBSP(backMesh)
|
||||
|
||||
// dig windows on face and back
|
||||
let winW = 4
|
||||
let winH = 8
|
||||
let winW = 2 + Math.random() * 2
|
||||
let winH = 4 + Math.random() * 4
|
||||
let margin = 2
|
||||
let nbrWinX = 0
|
||||
let paddingX = 0
|
||||
@@ -172,48 +165,72 @@ export default {
|
||||
leftMesh.position.x = -0.5 * size.x
|
||||
// leftMesh.position.z = 0.5 * size.z
|
||||
let leftBSP = new ThreeBSP(leftMesh)
|
||||
//
|
||||
// let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
// let topMesh = new THREE.Mesh(topGeom)
|
||||
// // topMesh.position.y = -0.5 * size.y
|
||||
// // let topBSP = new ThreeBSP(topMesh)
|
||||
//
|
||||
// let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
// let floorMesh = new THREE.Mesh(floorGeom)
|
||||
// // floorMesh.position.y = 0.5 * size.y
|
||||
// // let floorBSP = new ThreeBSP(floorMesh)
|
||||
|
||||
let buildingBSP = backBSP.union(rightBSP)
|
||||
buildingBSP = buildingBSP.union(faceBSP)
|
||||
buildingBSP = buildingBSP.union(leftBSP)
|
||||
buildingBSP = buildingBSP.union(topBSP)
|
||||
buildingBSP = buildingBSP.union(floorBSP)
|
||||
// buildingBSP = buildingBSP.union(topBSP)
|
||||
// buildingBSP = buildingBSP.union(floorBSP)
|
||||
|
||||
// convert back to three.js mesh
|
||||
let building = buildingBSP.toMesh()
|
||||
console.log('building.faces', building)
|
||||
|
||||
// create a custom shaderMaterial to had gradian colors
|
||||
var uniforms = THREE.UniformsUtils.merge([
|
||||
THREE.UniformsLib['lights'],
|
||||
{
|
||||
'topColor': { value: new THREE.Color(0xffffff) },
|
||||
'groundColor': { value: new THREE.Color(0xbcd6e4) },
|
||||
'bottomColor': { value: new THREE.Color(0x07223b) },
|
||||
// 'bottomColor': { value: new THREE.Color(0x000000) },
|
||||
// 'groundColor': { value: new THREE.Color(0xff0000) },
|
||||
// 'bottomColor': { value: new THREE.Color(0x00ff00) },
|
||||
lightIntensity: { type: 'f', value: 1.0 }
|
||||
}
|
||||
])
|
||||
var buildingMat = new THREE.ShaderMaterial({
|
||||
uniforms: uniforms,
|
||||
vertexShader: BgVertex,
|
||||
fragmentShader: BuildingFragment,
|
||||
side: THREE.DoubleSide,
|
||||
lights: true
|
||||
})
|
||||
building.material = buildingMat
|
||||
// var uniforms = THREE.UniformsUtils.merge([
|
||||
// THREE.UniformsLib['lights'],
|
||||
// {
|
||||
// 'topColor': { value: new THREE.Color(0xffffff) },
|
||||
// 'groundColor': { value: new THREE.Color(0xbcd6e4) },
|
||||
// 'bottomColor': { value: new THREE.Color(0x07223b) },
|
||||
// // 'bottomColor': { value: new THREE.Color(0x000000) },
|
||||
// // 'groundColor': { value: new THREE.Color(0xff0000) },
|
||||
// // 'bottomColor': { value: new THREE.Color(0x00ff00) },
|
||||
// lightIntensity: { type: 'f', value: 1.0 }
|
||||
// }
|
||||
// ])
|
||||
// var buildingMat = new THREE.ShaderMaterial({
|
||||
// uniforms: uniforms,
|
||||
// vertexShader: BgVertex,
|
||||
// fragmentShader: BuildingFragment,
|
||||
// side: THREE.DoubleSide,
|
||||
// lights: true
|
||||
// })
|
||||
// building.material = buildingMat
|
||||
|
||||
// create a classical material for building
|
||||
// let materialOpts = {
|
||||
// color: 0xffffff,
|
||||
// side: THREE.DoubleSide
|
||||
// // wireframe: true,
|
||||
// // transparent: true,
|
||||
// // opacity: 0.6
|
||||
// // renderOrder: 0
|
||||
// }
|
||||
// building.material = new THREE.MeshLambertMaterial(materialOpts)
|
||||
// let topColor = `hsla(201, 100%, 95%, 1)`
|
||||
let hTop = Math.round(195 + Math.random() * 10)
|
||||
let sTop = Math.round(100)
|
||||
let lTop = Math.round(95)
|
||||
let hFloor = Math.round(205 + Math.random() * 10)
|
||||
let sFloor = Math.round(40 + Math.random() * 20)
|
||||
let lFloor = Math.round(5 + Math.random() * 15)
|
||||
|
||||
let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
|
||||
let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
|
||||
let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor))
|
||||
let materialOpts = {
|
||||
color: 0xffffff,
|
||||
side: THREE.DoubleSide,
|
||||
shininess: 30,
|
||||
map: gradientTexture
|
||||
// wireframe: true,
|
||||
// transparent: true,
|
||||
// opacity: 0.6
|
||||
// renderOrder: 0
|
||||
}
|
||||
building.material = new THREE.MeshPhongMaterial(materialOpts)
|
||||
|
||||
// building.castShadow = true
|
||||
// building.receiveShadow = true
|
||||
@@ -228,6 +245,32 @@ export default {
|
||||
let buildingPos = { ...position }
|
||||
buildingPos.z -= 0.5 * size.z
|
||||
|
||||
// let light = new THREE.PointLight(0xfcfcf9, 1)
|
||||
// var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
|
||||
// sun.position.set(-150, 200, 110)
|
||||
|
||||
let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
let topOpts = {
|
||||
color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
|
||||
// side: THREE.DoubleSide,
|
||||
shininess: 30
|
||||
}
|
||||
let topMat = new THREE.MeshPhongMaterial(topOpts)
|
||||
let topMesh = new THREE.Mesh(topGeom, topMat)
|
||||
let topPosition = { ...position }
|
||||
topPosition.y += 0.5 * size.y
|
||||
|
||||
let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
|
||||
let floorOpts = {
|
||||
color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
|
||||
// side: THREE.DoubleSide,
|
||||
shininess: 10
|
||||
}
|
||||
let floorMat = new THREE.MeshPhongMaterial(floorOpts)
|
||||
let floorMesh = new THREE.Mesh(floorGeom, floorMat)
|
||||
let floorPosition = { ...position }
|
||||
floorPosition.y -= 0.5 * size.y
|
||||
|
||||
return {
|
||||
block3d: null,
|
||||
// block_opts: materialOpts,
|
||||
@@ -244,8 +287,13 @@ export default {
|
||||
position: position,
|
||||
|
||||
// geometry: geometry,
|
||||
// light: light,
|
||||
building: building,
|
||||
building_position: buildingPos,
|
||||
top_mesh: topMesh,
|
||||
top_position: topPosition,
|
||||
floor_mesh: floorMesh,
|
||||
floor_position: floorPosition,
|
||||
label_position: { x: 0, y: 0, z: 0 },
|
||||
color: 0xffffff,
|
||||
label_canvas: null,
|
||||
|
||||
Reference in New Issue
Block a user