|
@@ -226,28 +226,6 @@ export default {
|
|
// convert back to three.js mesh
|
|
// convert back to three.js mesh
|
|
let building = buildingBSP.toMesh()
|
|
let building = buildingBSP.toMesh()
|
|
|
|
|
|
- // // 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
|
|
|
|
-
|
|
|
|
// create a classical material for building
|
|
// create a classical material for building
|
|
// let topColor = `hsla(201, 100%, 95%, 1)`
|
|
// let topColor = `hsla(201, 100%, 95%, 1)`
|
|
let hTop = Math.round(195 + Math.random() * 10)
|
|
let hTop = Math.round(195 + Math.random() * 10)
|
|
@@ -258,23 +236,16 @@ export default {
|
|
let lFloor = Math.round(5 + Math.random() * 15)
|
|
let lFloor = Math.round(5 + Math.random() * 15)
|
|
let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
|
|
let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
|
|
let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
|
|
let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
|
|
-
|
|
|
|
let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
|
|
let gradientTexture = new THREE.CanvasTexture(getters.createGradientCanvas(topColor, bottomColor))
|
|
-
|
|
|
|
let materialOpts = {
|
|
let materialOpts = {
|
|
color: 0xffffff,
|
|
color: 0xffffff,
|
|
side: THREE.DoubleSide,
|
|
side: THREE.DoubleSide,
|
|
shininess: 30,
|
|
shininess: 30,
|
|
map: gradientTexture
|
|
map: gradientTexture
|
|
- // wireframe: true,
|
|
|
|
- // transparent: true,
|
|
|
|
- // opacity: 0.6
|
|
|
|
- // renderOrder: 0
|
|
|
|
}
|
|
}
|
|
building.material = new THREE.MeshPhongMaterial(materialOpts)
|
|
building.material = new THREE.MeshPhongMaterial(materialOpts)
|
|
-
|
|
|
|
|
|
+ // commiting walls
|
|
commit('setWalls3dObj', building)
|
|
commit('setWalls3dObj', building)
|
|
-
|
|
|
|
let buildingPos = { ...state.position, ...{ z: state.position.z - 0.5 * state.size.z } }
|
|
let buildingPos = { ...state.position, ...{ z: state.position.z - 0.5 * state.size.z } }
|
|
commit('setWallsPos', buildingPos)
|
|
commit('setWallsPos', buildingPos)
|
|
|
|
|
|
@@ -282,27 +253,22 @@ export default {
|
|
let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
|
|
let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
|
|
let topOpts = {
|
|
let topOpts = {
|
|
color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
|
|
color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
|
|
- // side: THREE.DoubleSide,
|
|
|
|
shininess: 30
|
|
shininess: 30
|
|
}
|
|
}
|
|
let topMat = new THREE.MeshPhongMaterial(topOpts)
|
|
let topMat = new THREE.MeshPhongMaterial(topOpts)
|
|
let topMesh = new THREE.Mesh(topGeom, topMat)
|
|
let topMesh = new THREE.Mesh(topGeom, topMat)
|
|
commit('setTop3dObj', topMesh)
|
|
commit('setTop3dObj', topMesh)
|
|
- let topPosition = { ...state.position }
|
|
|
|
- topPosition.y += 0.5 * state.size.y
|
|
|
|
|
|
+ let topPosition = { ...state.position, ...{ y: state.position.y + 0.5 * state.size.y } }
|
|
commit('setTopPos', topPosition)
|
|
commit('setTopPos', topPosition)
|
|
|
|
|
|
- // let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
|
|
|
|
let floorOpts = {
|
|
let floorOpts = {
|
|
color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
|
|
color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
|
|
- // side: THREE.DoubleSide,
|
|
|
|
shininess: 10
|
|
shininess: 10
|
|
}
|
|
}
|
|
let floorMat = new THREE.MeshPhongMaterial(floorOpts)
|
|
let floorMat = new THREE.MeshPhongMaterial(floorOpts)
|
|
let floorMesh = new THREE.Mesh(topGeom, floorMat)
|
|
let floorMesh = new THREE.Mesh(topGeom, floorMat)
|
|
commit('setFloor3dObj', floorMesh)
|
|
commit('setFloor3dObj', floorMesh)
|
|
- let floorPosition = { ...state.position }
|
|
|
|
- floorPosition.y -= 0.5 * state.size.y
|
|
|
|
|
|
+ let floorPosition = { ...state.position, ...{ y: state.position.y - 0.5 * state.size.y } }
|
|
commit('setFloorPos', floorPosition)
|
|
commit('setFloorPos', floorPosition)
|
|
|
|
|
|
//
|
|
//
|