bx-1379-redesign #15
|
|
@ -29,9 +29,11 @@ const CAM_MOVETO_COUNT = 100;
|
|||
const models = ref<model3DType[]>([])
|
||||
const clickable_items = ref<any[]>([])
|
||||
const clickable_refs = ref<any[]>([])
|
||||
const sidebar_clickable = [] as PromoScene[]
|
||||
const sidebar_visible = [] as PromoScene[]
|
||||
const envVars = reactive({}) as EnvVars
|
||||
const def_distance = reactive({ max: 10, min: 1 })
|
||||
const process_loading = ref(null)
|
||||
let addTexture: any
|
||||
|
||||
const controls_targetto = ref() as Ref<Vector3 | undefined>;
|
||||
const controls_targetto_count = ref(CON_MOVETO_COUNT)
|
||||
|
|
@ -56,14 +58,7 @@ const pointerTexture = await useTexture({
|
|||
map: '/pointer_texture.png'
|
||||
})
|
||||
|
||||
const loadModels = async () => {
|
||||
process_loading.value = props.source
|
||||
await raw_data.load(props)
|
||||
loading_store.status = 'other'
|
||||
|
||||
def_distance.max = raw_data.max_distance
|
||||
def_distance.min = raw_data.min_distance
|
||||
|
||||
const setEnv = async () => {
|
||||
envVars.focus = raw_data.max_distance * 0.5
|
||||
if (raw_data.env) {
|
||||
Object.assign(envVars, raw_data.env)
|
||||
|
|
@ -76,8 +71,21 @@ const loadModels = async () => {
|
|||
envVars.clear_color = PROMOBG
|
||||
}
|
||||
|
||||
loading_store.status = 'env'
|
||||
let c = new Color()
|
||||
if (envVars.clear_color) {
|
||||
c.set(envVars.clear_color)
|
||||
} else {
|
||||
renderer.value.getClearColor(c)
|
||||
}
|
||||
const tex = {} as any
|
||||
if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
|
||||
if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
|
||||
if (Object.keys(tex).length > 0) {
|
||||
addTexture = await useTexture(tex)
|
||||
}
|
||||
}
|
||||
|
||||
const setControls = () => {
|
||||
if (!controls.value) return;
|
||||
controls.value.enabled = false;
|
||||
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
|
||||
|
|
@ -93,10 +101,43 @@ const loadModels = async () => {
|
|||
|
||||
(controls.value as any)._needsUpdate = true;
|
||||
(controls.value as any).update()
|
||||
}
|
||||
|
||||
const sidebar_clickable = [] as PromoScene[]
|
||||
const sidebar_visible = [] as PromoScene[]
|
||||
clickable_items.value = []
|
||||
const makeGround = () => {
|
||||
const mesh = {
|
||||
color: new Color(envVars.clear_color).offsetHSL(0, 0.5, -0.33),
|
||||
displacementScale: envVars.focus * 0.33,
|
||||
roughness: 100,
|
||||
side: DoubleSide
|
||||
} as MeshStandardMaterialParameters
|
||||
if (envVars.env_displacementmap) {
|
||||
mesh.displacementMap = addTexture.displacementMap
|
||||
} else {
|
||||
mesh.displacementMap = groundTexture.displacementMap
|
||||
}
|
||||
if (envVars.env_normalmap) {
|
||||
mesh.normalMap = addTexture.normalMap
|
||||
}
|
||||
const ground = new Mesh(
|
||||
new PlaneGeometry(envVars.focus * 7, envVars.focus * 7, 1024, 1024),
|
||||
new MeshStandardMaterial(mesh)
|
||||
)
|
||||
ground.position.y = -0.33 * envVars.focus
|
||||
ground.rotateX(-Math.PI / 2)
|
||||
ground.name = "ground"
|
||||
models.value.push({ name: 'ground', modelFile: ground })
|
||||
}
|
||||
|
||||
const loadModels = async () => {
|
||||
loading_store.status = 'loading'
|
||||
process_loading.value = props.source
|
||||
await raw_data.load(props)
|
||||
|
||||
loading_store.status = 'env'
|
||||
await setEnv()
|
||||
|
||||
loading_store.status = 'other'
|
||||
setControls()
|
||||
|
||||
sidebar_scene.setName({ name: raw_data.name, description: raw_data.name })
|
||||
|
||||
|
|
@ -125,8 +166,6 @@ const loadModels = async () => {
|
|||
)
|
||||
item.modelFile.children[0].updateMatrixWorld(true)
|
||||
}
|
||||
|
||||
item.modelFile.updateMatrixWorld(true)
|
||||
models.value.push(item)
|
||||
|
||||
const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
|
||||
|
|
@ -139,46 +178,9 @@ const loadModels = async () => {
|
|||
}
|
||||
sidebar_scene.setVisible(sidebar_visible)
|
||||
|
||||
if (process_loading.value !== props.source) return
|
||||
|
||||
let c = new Color()
|
||||
if (envVars.clear_color) {
|
||||
c.set(envVars.clear_color)
|
||||
} else {
|
||||
renderer.value.getClearColor(c)
|
||||
}
|
||||
const tex = {} as any
|
||||
if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
|
||||
if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
|
||||
let addTexture: any
|
||||
if (Object.keys(tex).length > 0) {
|
||||
addTexture = await useTexture(tex)
|
||||
}
|
||||
|
||||
if (!models.value.find(el => el.name == 'ground')) {
|
||||
loading_store.status = 'ground'
|
||||
const mesh = {
|
||||
color: c.offsetHSL(0, 0.5, -0.33),
|
||||
displacementScale: envVars.focus * 0.33,
|
||||
roughness: 100,
|
||||
side: DoubleSide
|
||||
} as MeshStandardMaterialParameters
|
||||
if (envVars.env_displacementmap) {
|
||||
mesh.displacementMap = addTexture.displacementMap
|
||||
} else {
|
||||
mesh.displacementMap = groundTexture.displacementMap
|
||||
}
|
||||
if (envVars.env_normalmap) {
|
||||
mesh.normalMap = addTexture.normalMap
|
||||
}
|
||||
const ground = new Mesh(
|
||||
new PlaneGeometry(envVars.focus * 7, envVars.focus * 7, 1024, 1024),
|
||||
new MeshStandardMaterial(mesh)
|
||||
)
|
||||
ground.position.y = -0.33 * envVars.focus
|
||||
ground.rotateX(-Math.PI / 2)
|
||||
ground.name = "ground"
|
||||
models.value.push({ name: 'ground', modelFile: ground })
|
||||
makeGround()
|
||||
}
|
||||
|
||||
for (let index = 0; index < clickable.list.length; index++) {
|
||||
|
|
@ -209,7 +211,6 @@ const loadModels = async () => {
|
|||
|
||||
point.position.set(world_position.x, p * 3, world_position.z * 2)
|
||||
point.name = `${element.id}_clickable`
|
||||
point.updateMatrixWorld()
|
||||
|
||||
if (clickable_items.value.find(el => el.name == point.name)) continue
|
||||
clickable_items.value.push(point)
|
||||
|
|
@ -251,13 +252,13 @@ const loadModels = async () => {
|
|||
}
|
||||
|
||||
const gotoCenterAndDistance = () => {
|
||||
(controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min;
|
||||
(controls.value as any).maxDistance = def_distance.max;
|
||||
(controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
|
||||
(controls.value as any).maxDistance = raw_data.max_distance;
|
||||
controls_targetto.value = new Vector3(0, 0, 0);
|
||||
camera_moveto.value = new Vector3(
|
||||
def_distance.max * 0.5,
|
||||
def_distance.max * 0.5,
|
||||
def_distance.max * 0.5
|
||||
raw_data.max_distance * 0.5,
|
||||
raw_data.max_distance * 0.5,
|
||||
raw_data.max_distance * 0.5
|
||||
);
|
||||
|
||||
clickable.list.forEach(element => {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const lines = {
|
|||
clickable: "Расставляем кликабельные элементы",
|
||||
boxes: "Считаем коробки",
|
||||
other: "Делаем еще что-то важное",
|
||||
loading: "Получаем данные",
|
||||
}
|
||||
export const useLoading = defineStore('loading', {
|
||||
state: () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue