MisskeyRoom (#5267)
* wip * Add pemcil * Fix bug * Update .gitattributes * Add 🍮 * Better 🍮 * Add color boxes * Add pc * Add keyboard * Add 📦 * Add more 📦 * ✌️ * carpet * Add plant * ✌️ * ✌️ * Update room.vue * Add plant * ✌️ * ✌️ * ✌️ * ✌️ * ✌️ * 段ボール箱がてかりすぎているのを修正 * Update room.ts * Render username * ✌️ * Add new 📦 * Update room.ts * Remove blender backup files * Refactor * Improve performance * Update room.ts * Update .gitattributes * Update room.ts * Better fan * Better tissue rendering * Add 🐧 * Create photoframe2.glb * chairs * Add 📖 * fix: HiDPi環境でオブジェクトを選択できない (#5268) * Better monitor * ✌️ * Add corkboard * Add missing blend * mousepad * Add missing blend * Add cube * 額縁やモニターなどに任意の画像を表示できるように * Update MisskeyRoom section of CONTRIBUTING.md (#5272) * Update MisskeyRoom section of CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Refactor * カスタムテクスチャがずれないように * Remove debug code * Update furnitures.json5 * 一部の家具の色を自由に変えられるように * Update ja-JP.yml * Type annotation * 家具の色やテクスチャをすぐ反映するように * Update room.vue * Update furnitures.json5 * Add 📺 * Update ja-JP.yml * 床の色を変えられるように * 和室にできるように * Update washitsu * Use MeshLambertMaterial to improve performance * Use MeshLambertMaterial * Fix bug * Refactor * Update room.ts * Fix washitsu * Update room.vue * Update washistu * Use MeshLambertMaterial * Update room.ts * Set current property value * Disable reactivity to improve performance a bit * Fix bug * Set current carpet color * Update ja-JP.yml * Add rubik-cube (#5278) * Update ja-JP.yml (#5279) * Update UI * ルームの設定を追加 * Add room link * 家具をドラッグで移動や回転できるように * esnextにする (#5286) * Fix moduleResolution * Use uuid v4 * Fix bug * マットの色を変えられるように * ✌️ * 異方性フィルタリングするように * グラフィックの品質をフィルタリングに反映 * Add bloom effect when ultra graphics * Add posters * 🎨
This commit is contained in:
syuilo
@@ -159,6 +159,19 @@
|
||||
<template #desc>{{ $t('@._settings.paste-dialog-desc') }}</template>
|
||||
</ui-switch>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>{{ $t('@._settings.room') }}</header>
|
||||
<ui-select v-model="roomGraphicsQuality">
|
||||
<template #label>{{ $t('@._settings._room.graphicsQuality') }}</template>
|
||||
<option value="ultra">{{ $t('@._settings._room._graphicsQuality.ultra') }}</option>
|
||||
<option value="high">{{ $t('@._settings._room._graphicsQuality.high') }}</option>
|
||||
<option value="medium">{{ $t('@._settings._room._graphicsQuality.medium') }}</option>
|
||||
<option value="low">{{ $t('@._settings._room._graphicsQuality.low') }}</option>
|
||||
<option value="cheep">{{ $t('@._settings._room._graphicsQuality.cheep') }}</option>
|
||||
</ui-select>
|
||||
<ui-switch v-model="roomUseOrthographicCamera">{{ $t('@._settings._room.useOrthographicCamera') }}</ui-switch>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
@@ -503,6 +516,16 @@ export default Vue.extend({
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
|
||||
},
|
||||
|
||||
roomUseOrthographicCamera: {
|
||||
get() { return this.$store.state.device.roomUseOrthographicCamera; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'roomUseOrthographicCamera', value }); }
|
||||
},
|
||||
|
||||
roomGraphicsQuality: {
|
||||
get() { return this.$store.state.device.roomGraphicsQuality; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'roomGraphicsQuality', value }); }
|
||||
},
|
||||
|
||||
games_reversi_showBoardLabels: {
|
||||
get() { return this.$store.state.settings.gamesReversiShowBoardLabels; },
|
||||
set(value) { this.$store.dispatch('settings/set', { key: 'gamesReversiShowBoardLabels', value }); }
|
||||
|
||||
98
src/client/app/common/views/pages/room/preview.vue
Normal file
98
src/client/app/common/views/pages/room/preview.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<canvas width=224 height=128></canvas>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as THREE from 'three';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
objectHeight: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const canvas = this.$el;
|
||||
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: canvas,
|
||||
antialias: true,
|
||||
alpha: false
|
||||
});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(width, height);
|
||||
renderer.setClearColor(0x000000);
|
||||
renderer.autoClear = false;
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.cullFace = THREE.CullFaceBack;
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
|
||||
camera.zoom = 10;
|
||||
camera.position.x = 0;
|
||||
camera.position.y = 2;
|
||||
camera.position.z = 0;
|
||||
camera.updateProjectionMatrix();
|
||||
scene.add(camera);
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
|
||||
ambientLight.castShadow = false;
|
||||
scene.add(ambientLight);
|
||||
|
||||
const light = new THREE.PointLight(0xffffff, 1, 100);
|
||||
light.position.set(3, 3, 3);
|
||||
scene.add(light);
|
||||
|
||||
const grid = new THREE.GridHelper(5, 16, 0x444444, 0x222222);
|
||||
scene.add(grid);
|
||||
|
||||
const render = () => {
|
||||
const timer = Date.now() * 0.0004;
|
||||
requestAnimationFrame(render);
|
||||
|
||||
camera.position.y = 2 + this.objectHeight / 2;
|
||||
camera.position.z = Math.cos(timer) * 10;
|
||||
camera.position.x = Math.sin(timer) * 10;
|
||||
camera.lookAt(new THREE.Vector3(0, this.objectHeight / 2, 0));
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
this.selected = selected => {
|
||||
const obj = selected.clone();
|
||||
|
||||
// Remove current object
|
||||
const current = scene.getObjectByName('obj');
|
||||
if (current != null) {
|
||||
scene.remove(current);
|
||||
}
|
||||
|
||||
// Add new object
|
||||
obj.name = 'obj';
|
||||
obj.position.x = 0;
|
||||
obj.position.y = 0;
|
||||
obj.position.z = 0;
|
||||
obj.rotation.x = 0;
|
||||
obj.rotation.y = 0;
|
||||
obj.rotation.z = 0;
|
||||
obj.traverse(child => {
|
||||
if (child instanceof THREE.Mesh) {
|
||||
child.material = child.material.clone();
|
||||
return child.material.emissive.setHex(0x000000);
|
||||
}
|
||||
});
|
||||
const objectBoundingBox = new THREE.Box3().setFromObject(obj);
|
||||
this.objectHeight = objectBoundingBox.max.y - objectBoundingBox.min.y;
|
||||
scene.add(obj);
|
||||
};
|
||||
|
||||
render();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
237
src/client/app/common/views/pages/room/room.vue
Normal file
237
src/client/app/common/views/pages/room/room.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="hveuntkp">
|
||||
<div class="controller" v-if="objectSelected">
|
||||
<section>
|
||||
<p class="name">{{ selectedFurnitureName }}</p>
|
||||
<x-preview ref="preview"/>
|
||||
<template v-if="selectedFurnitureInfo.props">
|
||||
<div v-for="k in Object.keys(selectedFurnitureInfo.props)" :key="k">
|
||||
<p>{{ k }}</p>
|
||||
<template v-if="selectedFurnitureInfo.props[k] === 'image'">
|
||||
<ui-button @click="chooseImage(k)">{{ $t('chooseImage') }}</ui-button>
|
||||
</template>
|
||||
<template v-else-if="selectedFurnitureInfo.props[k] === 'color'">
|
||||
<input type="color" :value="selectedFurnitureProps ? selectedFurnitureProps[k] : null" @change="updateColor(k, $event)"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
<section>
|
||||
<ui-button @click="translate()" :primary="isTranslateMode"><fa :icon="faArrowsAlt"/> {{ $t('translate') }}</ui-button>
|
||||
<ui-button @click="rotate()" :primary="isRotateMode"><fa :icon="faUndo"/> {{ $t('rotate') }}</ui-button>
|
||||
<ui-button v-if="isTranslateMode || isRotateMode" @click="exit()"><fa :icon="faBan"/> {{ $t('exit') }}</ui-button>
|
||||
</section>
|
||||
<section>
|
||||
<ui-button @click="remove()"><fa :icon="faTrashAlt"/> {{ $t('remove') }}</ui-button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<section>
|
||||
<ui-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('add-furniture') }}</ui-button>
|
||||
</section>
|
||||
<section>
|
||||
<ui-select :value="roomType" @input="updateRoomType($event)">
|
||||
<template #label>{{ $t('room-type') }}</template>
|
||||
<option value="default">{{ $t('rooms.default') }}</option>
|
||||
<option value="washitsu">{{ $t('rooms.washitsu') }}</option>
|
||||
</ui-select>
|
||||
<label v-if="roomType === 'default'">
|
||||
<span>{{ $t('carpet-color') }}</span>
|
||||
<input type="color" :value="carpetColor" @change="updateCarpetColor($event)"/>
|
||||
</label>
|
||||
</section>
|
||||
<section>
|
||||
<ui-button primary @click="save()"><fa :icon="faSave"/> {{ $t('save') }}</ui-button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../../i18n';
|
||||
import { Room } from '../../../scripts/room/room';
|
||||
import parseAcct from '../../../../../../misc/acct/parse';
|
||||
import XPreview from './preview.vue';
|
||||
const storeItems = require('../../../scripts/room/furnitures.json5');
|
||||
import { faBoxOpen, faUndo, faArrowsAlt, faBan } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
|
||||
|
||||
let room: Room;
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('room'),
|
||||
|
||||
components: {
|
||||
XPreview
|
||||
},
|
||||
|
||||
props: {
|
||||
acct: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
objectSelected: false,
|
||||
selectedFurnitureName: null,
|
||||
selectedFurnitureInfo: null,
|
||||
selectedFurnitureProps: null,
|
||||
roomType: null,
|
||||
carpetColor: null,
|
||||
isTranslateMode: false,
|
||||
isRotateMode: false,
|
||||
faBoxOpen, faSave, faTrashAlt, faUndo, faArrowsAlt, faBan,
|
||||
};
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const user = await this.$root.api('users/show', {
|
||||
...parseAcct(this.acct)
|
||||
});
|
||||
|
||||
const roomInfo = await this.$root.api('room/show', {
|
||||
userId: user.id
|
||||
});
|
||||
|
||||
this.roomType = roomInfo.roomType;
|
||||
this.carpetColor = roomInfo.carpetColor;
|
||||
|
||||
room = new Room(user, this.$store.getters.isSignedIn && this.$store.state.i.id === user.id, roomInfo, this.$el, {
|
||||
graphicsQuality: this.$store.state.device.roomGraphicsQuality,
|
||||
onChangeSelect: obj => {
|
||||
this.objectSelected = obj != null;
|
||||
if (obj) {
|
||||
const f = room.findFurnitureById(obj.name);
|
||||
this.selectedFurnitureName = this.$t('furnitures.' + f.type);
|
||||
this.selectedFurnitureInfo = storeItems.find(x => x.id === f.type);
|
||||
this.selectedFurnitureProps = f.props
|
||||
? JSON.parse(JSON.stringify(f.props)) // Disable reactivity
|
||||
: null;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.preview.selected(obj);
|
||||
});
|
||||
}
|
||||
},
|
||||
useOrthographicCamera: this.$store.state.device.roomUseOrthographicCamera
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
async add() {
|
||||
const { canceled, result: id } = await this.$root.dialog({
|
||||
type: null,
|
||||
title: this.$t('add-furniture'),
|
||||
select: {
|
||||
items: storeItems.map(item => ({
|
||||
value: item.id, text: this.$t('furnitures.' + item.id)
|
||||
}))
|
||||
},
|
||||
showCancelButton: true
|
||||
});
|
||||
if (canceled) return;
|
||||
room.addFurniture(id);
|
||||
},
|
||||
|
||||
remove() {
|
||||
room.removeFurniture();
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$root.api('room/update', {
|
||||
room: room.getRoomInfo()
|
||||
});
|
||||
},
|
||||
|
||||
chooseImage(key) {
|
||||
this.$chooseDriveFile({
|
||||
multiple: false
|
||||
}).then(file => {
|
||||
room.updateProp(key, file.thumbnailUrl);
|
||||
this.$refs.preview.selected(room.getSelectedObject());
|
||||
});
|
||||
},
|
||||
|
||||
updateColor(key, ev) {
|
||||
room.updateProp(key, ev.target.value);
|
||||
this.$refs.preview.selected(room.getSelectedObject());
|
||||
},
|
||||
|
||||
updateCarpetColor(ev) {
|
||||
room.updateCarpetColor(ev.target.value);
|
||||
this.carpetColor = ev.target.value;
|
||||
},
|
||||
|
||||
updateRoomType(type) {
|
||||
room.changeRoomType(type);
|
||||
this.roomType = type;
|
||||
},
|
||||
|
||||
translate() {
|
||||
if (this.isTranslateMode) {
|
||||
this.exit();
|
||||
} else {
|
||||
this.isRotateMode = false;
|
||||
this.isTranslateMode = true;
|
||||
room.enterTransformMode('translate');
|
||||
}
|
||||
},
|
||||
|
||||
rotate() {
|
||||
if (this.isRotateMode) {
|
||||
this.exit();
|
||||
} else {
|
||||
this.isTranslateMode = false;
|
||||
this.isRotateMode = true;
|
||||
room.enterTransformMode('rotate');
|
||||
}
|
||||
},
|
||||
|
||||
exit() {
|
||||
this.isTranslateMode = false;
|
||||
this.isRotateMode = false;
|
||||
room.exitTransformMode();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.hveuntkp
|
||||
> .controller
|
||||
> .menu
|
||||
position fixed
|
||||
z-index 1
|
||||
padding 16px
|
||||
background var(--face)
|
||||
color var(--text)
|
||||
|
||||
> section
|
||||
padding 16px 0
|
||||
|
||||
&:first-child
|
||||
padding-top 0
|
||||
|
||||
&:last-child
|
||||
padding-bottom 0
|
||||
|
||||
&:not(:last-child)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> .controller
|
||||
top 16px
|
||||
left 16px
|
||||
width 256px
|
||||
|
||||
> section
|
||||
> .name
|
||||
margin 0
|
||||
|
||||
> .menu
|
||||
top 16px
|
||||
right 16px
|
||||
width 256px
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user