label are back
This commit is contained in:
@@ -4,13 +4,12 @@
|
||||
<object3d ref="top" :obj="top3dObj" :position="topPos" />
|
||||
<object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
|
||||
<!-- <object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
|
||||
<!-- <light :obj="light" :position="building_position" /> -->
|
||||
<!-- <mesh ref="label3d" name="Label" :position="label_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">
|
||||
<texture :options="label_texture_opts" />
|
||||
</material>
|
||||
</mesh> -->
|
||||
</mesh>
|
||||
<!-- <div v-if="isOpened">
|
||||
<ContentBlock
|
||||
v-for="item in data.visibles"
|
||||
@@ -81,8 +80,8 @@ export default {
|
||||
console.log('Project data()')
|
||||
|
||||
return {
|
||||
isOpened: false,
|
||||
block3d: null,
|
||||
// block_opts: materialOpts,
|
||||
label3d: null,
|
||||
label_opts: {
|
||||
side: THREE.DoubleSide,
|
||||
@@ -91,55 +90,41 @@ export default {
|
||||
// opacity: 0.6
|
||||
// renderOrder: 0
|
||||
},
|
||||
// size and positions are defined in store project
|
||||
// size: size,
|
||||
// position: position,
|
||||
|
||||
// geometry: geometry,
|
||||
// light: light,
|
||||
// building: building,
|
||||
// building_position: buildingPos,
|
||||
// top_mesh: topMesh,
|
||||
// top_position: topPosition,
|
||||
// floor_mesh: floorMesh,
|
||||
// floor_position: floorPosition,
|
||||
// level_mesh: levelMesh,
|
||||
// level_position: { ...position },
|
||||
// label_position: { x: 0, y: 0, z: 0 },
|
||||
color: 0xffffff,
|
||||
label_canvas: null,
|
||||
label_size: null,
|
||||
isOpened: false
|
||||
label_position: { x: 0, y: 0, z: 0 }
|
||||
// level_mesh: levelMesh,
|
||||
// level_position: { ...position },
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapInstanceState(getModuleName, {
|
||||
title: state => state.Titre,
|
||||
// size: state => state.size,
|
||||
// position: state => state.position,
|
||||
size: state => state.size,
|
||||
position: state => state.position,
|
||||
walls3dObj: state => state.walls3dObj,
|
||||
wallsPos: state => state.wallsPos,
|
||||
top3dObj: state => state.top3dObj,
|
||||
topPos: state => state.topPos,
|
||||
floor3dObj: state => state.floor3dObj,
|
||||
floorPos: state => state.floorPos
|
||||
})
|
||||
// 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
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
// this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
|
||||
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
|
||||
// this.label_position.z = this.position.z + this.size.z / 2 + 0.5
|
||||
// // console.log('this.label_canvas', this.label_canvas)
|
||||
this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
|
||||
this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
|
||||
this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
|
||||
this.label_position.z = this.position.z + this.size.z / 2 + 0.5
|
||||
console.log('this.label_position', this.label_position)
|
||||
},
|
||||
mounted () {
|
||||
console.log('project mounted', this)
|
||||
|
||||
@@ -226,28 +226,6 @@ export default {
|
||||
// convert back to three.js mesh
|
||||
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
|
||||
// let topColor = `hsla(201, 100%, 95%, 1)`
|
||||
let hTop = Math.round(195 + Math.random() * 10)
|
||||
@@ -258,23 +236,16 @@ export default {
|
||||
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(getters.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)
|
||||
|
||||
// commiting walls
|
||||
commit('setWalls3dObj', building)
|
||||
|
||||
let buildingPos = { ...state.position, ...{ z: state.position.z - 0.5 * state.size.z } }
|
||||
commit('setWallsPos', buildingPos)
|
||||
|
||||
@@ -282,27 +253,22 @@ export default {
|
||||
let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.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)
|
||||
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)
|
||||
|
||||
// let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.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(topGeom, floorMat)
|
||||
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)
|
||||
|
||||
//
|
||||
|
||||
Reference in New Issue
Block a user