@ -1,3 +1,7 @@
|
||||
*.svg -diff -text
|
||||
*.psd -diff -text
|
||||
*.ai -diff -text
|
||||
*.mqo -diff -text
|
||||
*.glb -diff -text
|
||||
*.blend -diff -text
|
||||
*.afdesign -diff -text
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
import {MigrationInterface, QueryRunner} from "typeorm";
|
||||
|
||||
export class room1565634203341 implements MigrationInterface {
|
||||
|
||||
public async up(queryRunner: QueryRunner): Promise<any> {
|
||||
await queryRunner.query(`ALTER TABLE "user_profile" ADD "room" jsonb NOT NULL DEFAULT '{}'`);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<any> {
|
||||
await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "room"`);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
export type RoomInfo = {
|
||||
roomType: string;
|
||||
carpetColor: string;
|
||||
furnitures: Furniture[];
|
||||
};
|
||||
|
||||
export type Furniture = {
|
||||
id: string; // 同じ家具が複数ある場合にそれぞれを識別するためのIDであり、家具IDではない
|
||||
type: string; // こっちが家具ID(chairとか)
|
||||
position: {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
};
|
||||
rotation: {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
};
|
||||
props?: Record<string, any>;
|
||||
};
|
||||
@ -0,0 +1,324 @@
|
||||
// 家具メタデータ
|
||||
|
||||
// 家具にはユーザーが設定できるプロパティを設定可能です:
|
||||
//
|
||||
// props: {
|
||||
// <propname>: <proptype>
|
||||
// }
|
||||
//
|
||||
// proptype一覧:
|
||||
// * image ... 画像選択ダイアログを出し、その画像のURLが格納されます
|
||||
// * color ... 色選択コントロールを出し、選択された色が格納されます
|
||||
|
||||
// 家具にカスタムテクスチャを適用できるようにするには、textureプロパティに以下の追加の情報を含めます:
|
||||
// 便宜上そのUVのどの部分にカスタムテクスチャを貼り合わせるかのエリアをテクスチャエリアと呼びます。
|
||||
// UVは1024*1024だと仮定します。
|
||||
//
|
||||
// <key>: {
|
||||
// prop: <プロパティ名>,
|
||||
// uv: {
|
||||
// x: <テクスチャエリアX座標>,
|
||||
// y: <テクスチャエリアY座標>,
|
||||
// width: <テクスチャエリアの幅>,
|
||||
// height: <テクスチャエリアの高さ>,
|
||||
// },
|
||||
// }
|
||||
//
|
||||
// <key>には、カスタムテクスチャを適用したいメッシュ名を指定します
|
||||
// <プロパティ名>には、カスタムテクスチャとして使用する画像を格納するプロパティ(前述)名を指定します
|
||||
|
||||
// 家具にカスタムカラーを適用できるようにするには、colorプロパティに以下の追加の情報を含めます:
|
||||
//
|
||||
// <key>: <プロパティ名>
|
||||
//
|
||||
// <key>には、カスタムカラーを適用したいマテリアル名を指定します
|
||||
// <プロパティ名>には、カスタムカラーとして使用する色を格納するプロパティ(前述)名を指定します
|
||||
|
||||
[
|
||||
{
|
||||
id: "milk",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "bed",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "low-table",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Table: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "desk",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Board: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "chair",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Chair: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "chair2",
|
||||
place: "floor",
|
||||
props: {
|
||||
color1: 'color',
|
||||
color2: 'color'
|
||||
},
|
||||
color: {
|
||||
Cushion: 'color1',
|
||||
Leg: 'color2'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "fan",
|
||||
place: "wall"
|
||||
},
|
||||
{
|
||||
id: "pc",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "plant",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "plant2",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "eraser",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "pencil",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "pudding",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "cardboard-box",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "cardboard-box2",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "cardboard-box3",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "book",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Cover: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "book2",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "piano",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "facial-tissue",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "server",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "moon",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "corkboard",
|
||||
place: "wall"
|
||||
},
|
||||
{
|
||||
id: "mousepad",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Pad: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "monitor",
|
||||
place: "floor",
|
||||
props: {
|
||||
screen: 'image'
|
||||
},
|
||||
texture: {
|
||||
Screen: {
|
||||
prop: 'screen',
|
||||
uv: {
|
||||
x: 0,
|
||||
y: 434,
|
||||
width: 1024,
|
||||
height: 588,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "tv",
|
||||
place: "floor",
|
||||
props: {
|
||||
screen: 'image'
|
||||
},
|
||||
texture: {
|
||||
Screen: {
|
||||
prop: 'screen',
|
||||
uv: {
|
||||
x: 0,
|
||||
y: 434,
|
||||
width: 1024,
|
||||
height: 588,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "keyboard",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "carpet-stripe",
|
||||
place: "floor",
|
||||
props: {
|
||||
color1: 'color',
|
||||
color2: 'color'
|
||||
},
|
||||
color: {
|
||||
CarpetAreaA: 'color1',
|
||||
CarpetAreaB: 'color2'
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "mat",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Mat: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "color-box",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
main: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "wall-clock",
|
||||
place: "wall"
|
||||
},
|
||||
{
|
||||
id: "cube",
|
||||
place: "floor",
|
||||
props: {
|
||||
color: 'color'
|
||||
},
|
||||
color: {
|
||||
Cube: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "photoframe",
|
||||
place: "wall",
|
||||
props: {
|
||||
photo: 'image',
|
||||
color: 'color'
|
||||
},
|
||||
texture: {
|
||||
Photo: {
|
||||
prop: 'photo',
|
||||
uv: {
|
||||
x: 0,
|
||||
y: 342,
|
||||
width: 1024,
|
||||
height: 683,
|
||||
},
|
||||
},
|
||||
},
|
||||
color: {
|
||||
Frame: 'color'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "pinguin",
|
||||
place: "floor"
|
||||
},
|
||||
{
|
||||
id: "rubik-cube",
|
||||
place: "floor",
|
||||
},
|
||||
{
|
||||
id: "poster-h",
|
||||
place: "wall",
|
||||
props: {
|
||||
picture: 'image'
|
||||
},
|
||||
texture: {
|
||||
Poster: {
|
||||
prop: 'picture',
|
||||
uv: {
|
||||
x: 0,
|
||||
y: 277,
|
||||
width: 1024,
|
||||
height: 745,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "poster-v",
|
||||
place: "wall",
|
||||
props: {
|
||||
picture: 'image'
|
||||
},
|
||||
texture: {
|
||||
Poster: {
|
||||
prop: 'picture',
|
||||
uv: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 745,
|
||||
height: 1024,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
@ -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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue