mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-07-28 07:14:35 +02:00
wip
This commit is contained in:
@@ -69,6 +69,8 @@ export class PlayerContainer {
|
||||
this.subRoot = new BABYLON.TransformNode(`player:${this.id}:subRoot`, params.scene);
|
||||
this.subRoot.parent = this.subRootContainerForAnim;
|
||||
if (params.state) this.applyState(params.state, true);
|
||||
|
||||
console.log('PlayerContainer created', this.id);
|
||||
}
|
||||
|
||||
public async loadAvatar() {
|
||||
|
||||
@@ -9,6 +9,7 @@ import { cm, WORLD_SCALE } from 'misskey-world/src/utility.js';
|
||||
import { ArcRotateCameraManualInput, getMeshesBoundingBox, GRAPHICS_QUALITY } from './utility.js';
|
||||
import { PlayerContainer, type PlayerProfile } from './PlayerContainer.js';
|
||||
import { EngineBase } from './EngineBase.js';
|
||||
import { deepClone } from './clone.js';
|
||||
import type { WorldAvatar } from 'misskey-world/src/types.js';
|
||||
|
||||
export class AvatarPreviewEngine extends EngineBase<{ // PlayerPreviewEngineに改名した方がいいかもしれない
|
||||
@@ -39,7 +40,7 @@ export class AvatarPreviewEngine extends EngineBase<{ // PlayerPreviewEngineに
|
||||
registerBuiltInLoaders();
|
||||
|
||||
this.graphicsQuality = options.graphicsQuality;
|
||||
this.profile = profile;
|
||||
this.profile = deepClone(profile);
|
||||
|
||||
this.scene.autoClear = false;
|
||||
this.scene.skipPointerMovePicking = true;
|
||||
@@ -48,7 +49,16 @@ export class AvatarPreviewEngine extends EngineBase<{ // PlayerPreviewEngineに
|
||||
|
||||
this.sr = new BABYLON.SnapshotRenderingHelper(this.scene);
|
||||
|
||||
this.camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, cm(300), new BABYLON.Vector3(0, cm(90), 0), this.scene);
|
||||
this.camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 2.5, cm(300), new BABYLON.Vector3(0, cm(90), 0), this.scene);
|
||||
this.camera.minZ = cm(1);
|
||||
this.camera.maxZ = cm(100000);
|
||||
this.camera.fov = 0.5;
|
||||
this.camera.lowerRadiusLimit = cm(50);
|
||||
this.camera.upperRadiusLimit = cm(1000);
|
||||
this.camera.inputs.clear();
|
||||
this.camera.inputs.add(new ArcRotateCameraManualInput(this.scene, {
|
||||
rotationSensitivity: 0.0005,
|
||||
}));
|
||||
|
||||
this.envMapIndoor = BABYLON.CubeTexture.CreateFromPrefilteredData('/client-assets/room/indoor.env', this.scene);
|
||||
this.envMapIndoor.boundingBoxSize = new BABYLON.Vector3(cm(500), cm(500), cm(500));
|
||||
@@ -151,29 +161,12 @@ export class AvatarPreviewEngine extends EngineBase<{ // PlayerPreviewEngineに
|
||||
|
||||
const boundingInfo = getMeshesBoundingBox(this.playerContainer.root.getChildMeshes().filter(m => m.isEnabled() && m.isVisible), true);
|
||||
|
||||
this.pipeline.removeCamera(this.camera);
|
||||
this.camera.dispose();
|
||||
|
||||
this.camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 2.5, cm(300), new BABYLON.Vector3(0, cm(90), 0), this.scene);
|
||||
this.camera.minZ = cm(1);
|
||||
this.camera.maxZ = cm(100000);
|
||||
this.camera.fov = 0.5;
|
||||
this.camera.lowerRadiusLimit = cm(50);
|
||||
this.camera.upperRadiusLimit = cm(1000);
|
||||
//this.camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
|
||||
this.camera.setTarget(new BABYLON.Vector3(0, boundingInfo.centerWorld.y, 0));
|
||||
this.camera.inputs.clear();
|
||||
|
||||
this.camera.inputs.add(new ArcRotateCameraManualInput(this.scene, {
|
||||
rotationSensitivity: 0.0005,
|
||||
}));
|
||||
|
||||
// zoom to fit
|
||||
const size = boundingInfo.extendSize;
|
||||
const distance = Math.max(size.x, size.y, size.z) * 2;
|
||||
this.camera.radius = distance * 3;
|
||||
|
||||
this.pipeline.addCamera(this.camera);
|
||||
this.camera.radius = distance * 4;
|
||||
|
||||
this.sr.enableSnapshotRendering();
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkFolder>
|
||||
<template #label>{{ i18n.ts._miWorld._avatars._default.body }}</template>
|
||||
|
||||
<MkInput :modelValue="getHex(avatar.body.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.body.color = c; }">
|
||||
<MkInput :modelValue="getHex(avatar.body.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.body.color = c; updateAvatarOption(); }">
|
||||
<template #label>{{ i18n.ts.color }}</template>
|
||||
</MkInput>
|
||||
</MkFolder>
|
||||
@@ -61,12 +61,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
{ label: 'e', value: 'e' },
|
||||
{ label: 'f', value: 'f' },
|
||||
{ label: 'g', value: 'g' },
|
||||
]" :modelValue="avatar.eyes.type" @update:modelValue="v => avatar.eyes.type = v"
|
||||
]" :modelValue="avatar.eyes.type" @update:modelValue="v => { avatar.eyes.type = v; updateAvatarOption(); }"
|
||||
>
|
||||
<template #label>{{ i18n.ts.type }}</template>
|
||||
</MkSelect>
|
||||
|
||||
<MkInput :modelValue="getHex(avatar.eyes.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.eyes.color = c; }">
|
||||
<MkInput :modelValue="getHex(avatar.eyes.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.eyes.color = c; updateAvatarOption(); }">
|
||||
<template #label>{{ i18n.ts.color }}</template>
|
||||
</MkInput>
|
||||
</MkFolder>
|
||||
@@ -83,12 +83,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
{ label: 'd', value: 'd' },
|
||||
{ label: 'e', value: 'e' },
|
||||
{ label: 'f', value: 'f' },
|
||||
]" :modelValue="avatar.mouth.type" @update:modelValue="v => avatar.mouth.type = v"
|
||||
]" :modelValue="avatar.mouth.type" @update:modelValue="v => { avatar.mouth.type = v; updateAvatarOption(); }"
|
||||
>
|
||||
<template #label>{{ i18n.ts.type }}</template>
|
||||
</MkSelect>
|
||||
|
||||
<MkInput :modelValue="getHex(avatar.mouth.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.mouth.color = c; }">
|
||||
<MkInput :modelValue="getHex(avatar.mouth.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) avatar.mouth.color = c; updateAvatarOption(); }">
|
||||
<template #label>{{ i18n.ts.color }}</template>
|
||||
</MkInput>
|
||||
</MkFolder>
|
||||
@@ -172,10 +172,6 @@ const avatarPreviewEngineControllerOptions = computed<AvatarPreviewEngineControl
|
||||
|
||||
const controller = markRaw(new AvatarPreviewEngineController(avatarPreviewEngineControllerOptions.value));
|
||||
|
||||
watch(avatar, () => {
|
||||
controller.updateAvatar(avatar.value);
|
||||
}, { deep: true });
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await controller.init(canvas.value!, {
|
||||
@@ -201,10 +197,9 @@ onUnmounted(() => {
|
||||
controller.destroy();
|
||||
});
|
||||
|
||||
//function updateAvatarOption(k: string, v: any) {
|
||||
// avatar.value[k] = v;
|
||||
// controller.updateAvatar(avatar.value);
|
||||
//}
|
||||
function updateAvatarOption() {
|
||||
controller.updateAvatar(avatar.value);
|
||||
}
|
||||
|
||||
function ok() {
|
||||
emit('ok', {
|
||||
|
||||
Reference in New Issue
Block a user