feat(client): Reimplement Misskey Rooms

3 files changed, 1194 insertions, 0 deletions

diff --git a/src/client/scripts/room/furniture.ts b/src/client/scripts/room/furniture.ts
new file mode 100644
index 0000000000..7734e32668
--- /dev/null
+++ b/src/client/scripts/room/furniture.ts
@@ -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>;
+};
diff --git a/src/client/scripts/room/furnitures.json5 b/src/client/scripts/room/furnitures.json5
new file mode 100644
index 0000000000..7c1a90a3f9
--- /dev/null
+++ b/src/client/scripts/room/furnitures.json5
@@ -0,0 +1,397 @@
+// 家具メタデータ
+
+// 家具にはユーザーが設定できるプロパティを設定可能です:
+//
+// 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",
+		props: {
+			body: 'color',
+			belly: 'color'
+		},
+		color: {
+			Body: 'body',
+			Belly: 'belly',
+		}
+	},
+	{
+		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,
+				},
+			},
+		},
+	},
+	{
+		id: "sofa",
+		place: "floor",
+		props: {
+			color: 'color'
+		},
+		color: {
+			Sofa: 'color'
+		}
+	},
+	{
+		id: "spiral",
+		place: "floor",
+		props: {
+			color: 'color'
+		},
+		color: {
+			Step: 'color'
+		}
+	},
+	{
+		id: "bin",
+		place: "floor",
+		props: {
+			color: 'color'
+		},
+		color: {
+			Bin: 'color'
+		}
+	},
+	{
+		id: "cup-noodle",
+		place: "floor"
+	},
+	{
+		id: "holo-display",
+		place: "floor",
+		props: {
+			image: 'image'
+		},
+		texture: {
+			Image_Front: {
+				prop: 'image',
+				uv: {
+					x: 0,
+					y: 0,
+					width: 1024,
+					height: 1024,
+				},
+			},
+			Image_Back: {
+				prop: 'image',
+				uv: {
+					x: 0,
+					y: 0,
+					width: 1024,
+					height: 1024,
+				},
+			},
+		},
+	},
+	{
+		id: 'energy-drink',
+		place: "floor",
+	}
+]
diff --git a/src/client/scripts/room/room.ts b/src/client/scripts/room/room.ts
new file mode 100644
index 0000000000..a45fb11e4a
--- /dev/null
+++ b/src/client/scripts/room/room.ts
@@ -0,0 +1,776 @@
+import autobind from 'autobind-decorator';
+import { v4 as uuid } from 'uuid';
+import * as THREE from 'three';
+import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js';
+import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import { Furniture, RoomInfo } from './furniture';
+import { query as urlQuery } from '../../../prelude/url';
+const furnitureDefs = require('./furnitures.json5');
+
+THREE.ImageUtils.crossOrigin = '';
+
+type Options = {
+	graphicsQuality: Room['graphicsQuality'];
+	onChangeSelect: Room['onChangeSelect'];
+	useOrthographicCamera: boolean;
+};
+
+/**
+ * MisskeyRoom Core Engine
+ */
+export class Room {
+	private clock: THREE.Clock;
+	private scene: THREE.Scene;
+	private renderer: THREE.WebGLRenderer;
+	private camera: THREE.PerspectiveCamera | THREE.OrthographicCamera;
+	private controls: OrbitControls;
+	private composer: EffectComposer;
+	private mixers: THREE.AnimationMixer[] = [];
+	private furnitureControl: TransformControls;
+	private roomInfo: RoomInfo;
+	private graphicsQuality: 'cheep' | 'low' | 'medium' | 'high' | 'ultra';
+	private roomObj: THREE.Object3D;
+	private objects: THREE.Object3D[] = [];
+	private selectedObject: THREE.Object3D = null;
+	private onChangeSelect: Function;
+	private isTransformMode = false;
+	private renderFrameRequestId: number;
+
+	private get canvas(): HTMLCanvasElement {
+		return this.renderer.domElement;
+	}
+
+	private get furnitures(): Furniture[] {
+		return this.roomInfo.furnitures;
+	}
+
+	private set furnitures(furnitures: Furniture[]) {
+		this.roomInfo.furnitures = furnitures;
+	}
+
+	private get enableShadow() {
+		return this.graphicsQuality != 'cheep';
+	}
+
+	private get usePostFXs() {
+		return this.graphicsQuality !== 'cheep' && this.graphicsQuality !== 'low';
+	}
+
+	private get shadowQuality() {
+		return (
+			this.graphicsQuality === 'ultra' ? 16384 :
+			this.graphicsQuality === 'high' ? 8192 :
+			this.graphicsQuality === 'medium' ? 4096 :
+			this.graphicsQuality === 'low' ? 1024 :
+			0); // cheep
+	}
+
+	constructor(user, isMyRoom, roomInfo: RoomInfo, container: Element, options: Options) {
+		this.roomInfo = roomInfo;
+		this.graphicsQuality = options.graphicsQuality;
+		this.onChangeSelect = options.onChangeSelect;
+
+		this.clock = new THREE.Clock(true);
+
+		//#region Init a scene
+		this.scene = new THREE.Scene();
+
+		const width = container.clientWidth;
+		const height = container.clientHeight;
+
+		//#region Init a renderer
+		this.renderer = new THREE.WebGLRenderer({
+			antialias: false,
+			stencil: false,
+			alpha: false,
+			powerPreference:
+				this.graphicsQuality === 'ultra' ? 'high-performance' :
+				this.graphicsQuality === 'high' ? 'high-performance' :
+				this.graphicsQuality === 'medium' ? 'default' :
+				this.graphicsQuality === 'low' ? 'low-power' :
+				'low-power' // cheep
+		});
+
+		this.renderer.setPixelRatio(window.devicePixelRatio);
+		this.renderer.setSize(width, height);
+		this.renderer.autoClear = false;
+		this.renderer.setClearColor(new THREE.Color(0x051f2d));
+		this.renderer.shadowMap.enabled = this.enableShadow;
+		this.renderer.gammaOutput = true;
+		this.renderer.shadowMap.type =
+			this.graphicsQuality === 'ultra' ? THREE.PCFSoftShadowMap :
+			this.graphicsQuality === 'high' ? THREE.PCFSoftShadowMap :
+			this.graphicsQuality === 'medium' ? THREE.PCFShadowMap :
+			this.graphicsQuality === 'low' ? THREE.BasicShadowMap :
+			THREE.BasicShadowMap; // cheep
+
+		container.insertBefore(this.canvas, container.firstChild);
+		//#endregion
+
+		//#region Init a camera
+		this.camera = options.useOrthographicCamera
+			? new THREE.OrthographicCamera(
+				width / - 2, width / 2, height / 2, height / - 2, -10, 10)
+			: new THREE.PerspectiveCamera(45, width / height);
+
+		if (options.useOrthographicCamera) {
+			this.camera.position.x = 2;
+			this.camera.position.y = 2;
+			this.camera.position.z = 2;
+			this.camera.zoom = 100;
+			this.camera.updateProjectionMatrix();
+		} else {
+			this.camera.position.x = 5;
+			this.camera.position.y = 2;
+			this.camera.position.z = 5;
+		}
+
+		this.scene.add(this.camera);
+		//#endregion
+
+		//#region AmbientLight
+		const ambientLight = new THREE.AmbientLight(0xffffff, 1);
+		this.scene.add(ambientLight);
+		//#endregion
+
+		if (this.graphicsQuality !== 'cheep') {
+			//#region Room light
+			const roomLight = new THREE.SpotLight(0xffffff, 0.1);
+
+			roomLight.position.set(0, 8, 0);
+			roomLight.castShadow = this.enableShadow;
+			roomLight.shadow.bias = -0.0001;
+			roomLight.shadow.mapSize.width = this.shadowQuality;
+			roomLight.shadow.mapSize.height = this.shadowQuality;
+			roomLight.shadow.camera.near = 0.1;
+			roomLight.shadow.camera.far = 9;
+			roomLight.shadow.camera.fov = 45;
+
+			this.scene.add(roomLight);
+			//#endregion
+		}
+
+		//#region Out light
+		const outLight1 = new THREE.SpotLight(0xffffff, 0.4);
+		outLight1.position.set(9, 3, -2);
+		outLight1.castShadow = this.enableShadow;
+		outLight1.shadow.bias = -0.001; // アクネ、アーチファクト対策 その代わりピーターパンが発生する可能性がある
+		outLight1.shadow.mapSize.width = this.shadowQuality;
+		outLight1.shadow.mapSize.height = this.shadowQuality;
+		outLight1.shadow.camera.near = 6;
+		outLight1.shadow.camera.far = 15;
+		outLight1.shadow.camera.fov = 45;
+		this.scene.add(outLight1);
+
+		const outLight2 = new THREE.SpotLight(0xffffff, 0.2);
+		outLight2.position.set(-2, 3, 9);
+		outLight2.castShadow = false;
+		outLight2.shadow.bias = -0.001; // アクネ、アーチファクト対策 その代わりピーターパンが発生する可能性がある
+		outLight2.shadow.camera.near = 6;
+		outLight2.shadow.camera.far = 15;
+		outLight2.shadow.camera.fov = 45;
+		this.scene.add(outLight2);
+		//#endregion
+
+		//#region Init a controller
+		this.controls = new OrbitControls(this.camera, this.canvas);
+
+		this.controls.target.set(0, 1, 0);
+		this.controls.enableZoom = true;
+		this.controls.enablePan = isMyRoom;
+		this.controls.minPolarAngle = 0;
+		this.controls.maxPolarAngle = Math.PI / 2;
+		this.controls.minAzimuthAngle = 0;
+		this.controls.maxAzimuthAngle = Math.PI / 2;
+		this.controls.enableDamping = true;
+		this.controls.dampingFactor = 0.2;
+		//#endregion
+
+		//#region POST FXs
+		if (!this.usePostFXs) {
+			this.composer = null;
+		} else {
+			const renderTarget = new THREE.WebGLRenderTarget(width, height, {
+				minFilter: THREE.LinearFilter,
+				magFilter: THREE.LinearFilter,
+				format: THREE.RGBFormat,
+				stencilBuffer: false,
+			});
+
+			const fxaa = new ShaderPass(FXAAShader);
+			fxaa.uniforms['resolution'].value = new THREE.Vector2(1 / width, 1 / height);
+			fxaa.renderToScreen = true;
+
+			this.composer = new EffectComposer(this.renderer, renderTarget);
+			this.composer.addPass(new RenderPass(this.scene, this.camera));
+			if (this.graphicsQuality === 'ultra') {
+				this.composer.addPass(new BloomPass(0.25, 30, 128.0, 512));
+			}
+			this.composer.addPass(fxaa);
+		}
+		//#endregion
+		//#endregion
+
+		//#region Label
+		//#region Avatar
+		const avatarUrl = `/proxy/?${urlQuery({ url: user.avatarUrl })}`;
+
+		const textureLoader = new THREE.TextureLoader();
+		textureLoader.crossOrigin = 'anonymous';
+
+		const iconTexture = textureLoader.load(avatarUrl);
+		iconTexture.wrapS = THREE.RepeatWrapping;
+		iconTexture.wrapT = THREE.RepeatWrapping;
+		iconTexture.anisotropy = 16;
+
+		const avatarMaterial = new THREE.MeshBasicMaterial({
+			map: iconTexture,
+			side: THREE.DoubleSide,
+			alphaTest: 0.5
+		});
+
+		const iconGeometry = new THREE.PlaneGeometry(1, 1);
+
+		const avatarObject = new THREE.Mesh(iconGeometry, avatarMaterial);
+		avatarObject.position.set(-3, 2.5, 2);
+		avatarObject.rotation.y = Math.PI / 2;
+		avatarObject.castShadow = false;
+
+		this.scene.add(avatarObject);
+		//#endregion
+
+		//#region Username
+		const name = user.username;
+
+		new THREE.FontLoader().load('/assets/fonts/helvetiker_regular.typeface.json', font => {
+			const nameGeometry = new THREE.TextGeometry(name, {
+				size: 0.5,
+				height: 0,
+				curveSegments: 8,
+				font: font,
+				bevelThickness: 0,
+				bevelSize: 0,
+				bevelEnabled: false
+			});
+
+			const nameMaterial = new THREE.MeshLambertMaterial({
+				color: 0xffffff
+			});
+
+			const nameObject = new THREE.Mesh(nameGeometry, nameMaterial);
+			nameObject.position.set(-3, 2.25, 1.25);
+			nameObject.rotation.y = Math.PI / 2;
+			nameObject.castShadow = false;
+
+			this.scene.add(nameObject);
+		});
+		//#endregion
+		//#endregion
+
+		//#region Interaction
+		if (isMyRoom) {
+			this.furnitureControl = new TransformControls(this.camera, this.canvas);
+			this.scene.add(this.furnitureControl);
+
+			// Hover highlight
+			this.canvas.onmousemove = this.onmousemove;
+
+			// Click
+			this.canvas.onmousedown = this.onmousedown;
+		}
+		//#endregion
+
+		//#region Init room
+		this.loadRoom();
+		//#endregion
+
+		//#region Load furnitures
+		for (const furniture of this.furnitures) {
+			this.loadFurniture(furniture).then(obj => {
+				this.scene.add(obj.scene);
+				this.objects.push(obj.scene);
+			});
+		}
+		//#endregion
+
+		// Start render
+		if (this.usePostFXs) {
+			this.renderWithPostFXs();
+		} else {
+			this.renderWithoutPostFXs();
+		}
+	}
+
+	@autobind
+	private renderWithoutPostFXs() {
+		this.renderFrameRequestId =
+			window.requestAnimationFrame(this.renderWithoutPostFXs);
+
+		// Update animations
+		const clock = this.clock.getDelta();
+		for (const mixer of this.mixers) {
+			mixer.update(clock);
+		}
+
+		this.controls.update();
+		this.renderer.render(this.scene, this.camera);
+	}
+
+	@autobind
+	private renderWithPostFXs() {
+		this.renderFrameRequestId =
+			window.requestAnimationFrame(this.renderWithPostFXs);
+
+		// Update animations
+		const clock = this.clock.getDelta();
+		for (const mixer of this.mixers) {
+			mixer.update(clock);
+		}
+
+		this.controls.update();
+		this.renderer.clear();
+		this.composer.render();
+	}
+
+	@autobind
+	private loadRoom() {
+		const type = this.roomInfo.roomType;
+		new GLTFLoader().load(`/assets/room/rooms/${type}/${type}.glb`, gltf => {
+			gltf.scene.traverse(child => {
+				if (!(child instanceof THREE.Mesh)) return;
+
+				child.receiveShadow = this.enableShadow;
+
+				child.material = new THREE.MeshLambertMaterial({
+					color: (child.material as THREE.MeshStandardMaterial).color,
+					map: (child.material as THREE.MeshStandardMaterial).map,
+					name: (child.material as THREE.MeshStandardMaterial).name,
+				});
+
+				// 異方性フィルタリング
+				if ((child.material as THREE.MeshLambertMaterial).map && this.graphicsQuality !== 'cheep') {
+					(child.material as THREE.MeshLambertMaterial).map.minFilter = THREE.LinearMipMapLinearFilter;
+					(child.material as THREE.MeshLambertMaterial).map.magFilter = THREE.LinearMipMapLinearFilter;
+					(child.material as THREE.MeshLambertMaterial).map.anisotropy = 8;
+				}
+			});
+
+			gltf.scene.position.set(0, 0, 0);
+
+			this.scene.add(gltf.scene);
+			this.roomObj = gltf.scene;
+			if (this.roomInfo.roomType === 'default') {
+				this.applyCarpetColor();
+			}
+		});
+	}
+
+	@autobind
+	private loadFurniture(furniture: Furniture) {
+		const def = furnitureDefs.find(d => d.id === furniture.type);
+		return new Promise<GLTF>((res, rej) => {
+			const loader = new GLTFLoader();
+			loader.load(`/assets/room/furnitures/${furniture.type}/${furniture.type}.glb`, gltf => {
+				const model = gltf.scene;
+
+				// Load animation
+				if (gltf.animations.length > 0) {
+					const mixer = new THREE.AnimationMixer(model);
+					this.mixers.push(mixer);
+					for (const clip of gltf.animations) {
+						mixer.clipAction(clip).play();
+					}
+				}
+
+				model.name = furniture.id;
+				model.position.x = furniture.position.x;
+				model.position.y = furniture.position.y;
+				model.position.z = furniture.position.z;
+				model.rotation.x = furniture.rotation.x;
+				model.rotation.y = furniture.rotation.y;
+				model.rotation.z = furniture.rotation.z;
+
+				model.traverse(child => {
+					if (!(child instanceof THREE.Mesh)) return;
+					child.castShadow = this.enableShadow;
+					child.receiveShadow = this.enableShadow;
+					(child.material as THREE.MeshStandardMaterial).metalness = 0;
+
+					// 異方性フィルタリング
+					if ((child.material as THREE.MeshStandardMaterial).map && this.graphicsQuality !== 'cheep') {
+						(child.material as THREE.MeshStandardMaterial).map.minFilter = THREE.LinearMipMapLinearFilter;
+						(child.material as THREE.MeshStandardMaterial).map.magFilter = THREE.LinearMipMapLinearFilter;
+						(child.material as THREE.MeshStandardMaterial).map.anisotropy = 8;
+					}
+				});
+
+				if (def.color) { // カスタムカラー
+					this.applyCustomColor(model);
+				}
+
+				if (def.texture) { // カスタムテクスチャ
+					this.applyCustomTexture(model);
+				}
+
+				res(gltf);
+			}, null, rej);
+		});
+	}
+
+	@autobind
+	private applyCarpetColor() {
+		this.roomObj.traverse(child => {
+			if (!(child instanceof THREE.Mesh)) return;
+			if (child.material &&
+				(child.material as THREE.MeshStandardMaterial).name &&
+				(child.material as THREE.MeshStandardMaterial).name === 'Carpet'
+			) {
+				const colorHex = parseInt(this.roomInfo.carpetColor.substr(1), 16);
+				(child.material as THREE.MeshStandardMaterial).color.setHex(colorHex);
+			}
+		});
+	}
+
+	@autobind
+	private applyCustomColor(model: THREE.Object3D) {
+		const furniture = this.furnitures.find(furniture => furniture.id === model.name);
+		const def = furnitureDefs.find(d => d.id === furniture.type);
+		if (def.color == null) return;
+		model.traverse(child => {
+			if (!(child instanceof THREE.Mesh)) return;
+			for (const t of Object.keys(def.color)) {
+				if (!child.material ||
+					!(child.material as THREE.MeshStandardMaterial).name ||
+					(child.material as THREE.MeshStandardMaterial).name !== t
+				) continue;
+
+				const prop = def.color[t];
+				const val = furniture.props ? furniture.props[prop] : undefined;
+
+				if (val == null) continue;
+
+				const colorHex = parseInt(val.substr(1), 16);
+				(child.material as THREE.MeshStandardMaterial).color.setHex(colorHex);
+			}
+		});
+	}
+
+	@autobind
+	private applyCustomTexture(model: THREE.Object3D) {
+		const furniture = this.furnitures.find(furniture => furniture.id === model.name);
+		const def = furnitureDefs.find(d => d.id === furniture.type);
+		if (def.texture == null) return;
+
+		model.traverse(child => {
+			if (!(child instanceof THREE.Mesh)) return;
+			for (const t of Object.keys(def.texture)) {
+				if (child.name !== t) continue;
+
+				const prop = def.texture[t].prop;
+				const val = furniture.props ? furniture.props[prop] : undefined;
+
+				if (val == null) continue;
+
+				const canvas = document.createElement('canvas');
+				canvas.height = 1024;
+				canvas.width = 1024;
+
+				child.material = new THREE.MeshLambertMaterial({
+					emissive: 0x111111,
+					side: THREE.DoubleSide,
+					alphaTest: 0.5,
+				});
+
+				const img = new Image();
+				img.crossOrigin = 'anonymous';
+				img.onload = () => {
+					const uvInfo = def.texture[t].uv;
+
+					const ctx = canvas.getContext('2d');
+					ctx.drawImage(img,
+						0, 0, img.width, img.height,
+						uvInfo.x, uvInfo.y, uvInfo.width, uvInfo.height);
+
+					const texture = new THREE.Texture(canvas);
+					texture.wrapS = THREE.RepeatWrapping;
+					texture.wrapT = THREE.RepeatWrapping;
+					texture.anisotropy = 16;
+					texture.flipY = false;
+
+					(child.material as THREE.MeshLambertMaterial).map = texture;
+					(child.material as THREE.MeshLambertMaterial).needsUpdate = true;
+					(child.material as THREE.MeshLambertMaterial).map.needsUpdate = true;
+				};
+				img.src = val;
+			}
+		});
+	}
+
+	@autobind
+	private onmousemove(ev: MouseEvent) {
+		if (this.isTransformMode) return;
+
+		const rect = (ev.target as HTMLElement).getBoundingClientRect();
+		const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1;
+		const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1;
+		const pos = new THREE.Vector2(x, y);
+
+		this.camera.updateMatrixWorld();
+
+		const raycaster = new THREE.Raycaster();
+		raycaster.setFromCamera(pos, this.camera);
+
+		const intersects = raycaster.intersectObjects(this.objects, true);
+
+		for (const object of this.objects) {
+			if (this.isSelectedObject(object)) continue;
+			object.traverse(child => {
+				if (child instanceof THREE.Mesh) {
+					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x000000);
+				}
+			});
+		}
+
+		if (intersects.length > 0) {
+			const intersected = this.getRoot(intersects[0].object);
+			if (this.isSelectedObject(intersected)) return;
+			intersected.traverse(child => {
+				if (child instanceof THREE.Mesh) {
+					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x191919);
+				}
+			});
+		}
+	}
+
+	@autobind
+	private onmousedown(ev: MouseEvent) {
+		if (this.isTransformMode) return;
+		if (ev.target !== this.canvas || ev.button !== 0) return;
+
+		const rect = (ev.target as HTMLElement).getBoundingClientRect();
+		const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1;
+		const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1;
+		const pos = new THREE.Vector2(x, y);
+
+		this.camera.updateMatrixWorld();
+
+		const raycaster = new THREE.Raycaster();
+		raycaster.setFromCamera(pos, this.camera);
+
+		const intersects = raycaster.intersectObjects(this.objects, true);
+
+		for (const object of this.objects) {
+			object.traverse(child => {
+				if (child instanceof THREE.Mesh) {
+					(child.material as THREE.MeshStandardMaterial).emissive.setHex(0x000000);
+				}
+			});
+		}
+
+		if (intersects.length > 0) {
+			const selectedObj = this.getRoot(intersects[0].object);
+			this.selectFurniture(selectedObj);
+		} else {
+			this.selectedObject = null;
+			this.onChangeSelect(null);
+		}
+	}
+
+	@autobind
+	private getRoot(obj: THREE.Object3D): THREE.Object3D {
+		let found = false;
+		let x = obj.parent;
+		while (!found) {
+			if (x.parent.parent == null) {
+				found = true;
+			} else {
+				x = x.parent;
+			}
+		}
+		return x;
+	}
+
+	@autobind
+	private isSelectedObject(obj: THREE.Object3D): boolean {
+		if (this.selectedObject == null) {
+			return false;
+		} else {
+			return obj.name === this.selectedObject.name;
+		}
+	}
+
+	@autobind
+	private selectFurniture(obj: THREE.Object3D) {
+		this.selectedObject = obj;
+		this.onChangeSelect(obj);
+		obj.traverse(child => {
+			if (child instanceof THREE.Mesh) {
+				(child.material as THREE.MeshStandardMaterial).emissive.setHex(0xff0000);
+			}
+		});
+	}
+
+	/**
+	 * 家具の移動/回転モードにします
+	 * @param type 移動か回転か
+	 */
+	@autobind
+	public enterTransformMode(type: 'translate' | 'rotate') {
+		this.isTransformMode = true;
+		this.furnitureControl.setMode(type);
+		this.furnitureControl.attach(this.selectedObject);
+		this.controls.enableRotate = false;
+	}
+
+	/**
+	 * 家具の移動/回転モードを終了します
+	 */
+	@autobind
+	public exitTransformMode() {
+		this.isTransformMode = false;
+		this.furnitureControl.detach();
+		this.controls.enableRotate = true;
+	}
+
+	/**
+	 * 家具プロパティを更新します
+	 * @param key プロパティ名
+	 * @param value 値
+	 */
+	@autobind
+	public updateProp(key: string, value: any) {
+		const furniture = this.furnitures.find(furniture => furniture.id === this.selectedObject.name);
+		if (furniture.props == null) furniture.props = {};
+		furniture.props[key] = value;
+		this.applyCustomColor(this.selectedObject);
+		this.applyCustomTexture(this.selectedObject);
+	}
+
+	/**
+	 * 部屋に家具を追加します
+	 * @param type 家具の種類
+	 */
+	@autobind
+	public addFurniture(type: string) {
+		const furniture = {
+			id: uuid(),
+			type: type,
+			position: {
+				x: 0,
+				y: 0,
+				z: 0,
+			},
+			rotation: {
+				x: 0,
+				y: 0,
+				z: 0,
+			},
+		};
+
+		this.furnitures.push(furniture);
+
+		this.loadFurniture(furniture).then(obj => {
+			this.scene.add(obj.scene);
+			this.objects.push(obj.scene);
+		});
+	}
+
+	/**
+	 * 現在選択されている家具を部屋から削除します
+	 */
+	@autobind
+	public removeFurniture() {
+		this.exitTransformMode();
+		const obj = this.selectedObject;
+		this.scene.remove(obj);
+		this.objects = this.objects.filter(object => object.name !== obj.name);
+		this.furnitures = this.furnitures.filter(furniture => furniture.id !== obj.name);
+		this.selectedObject = null;
+		this.onChangeSelect(null);
+	}
+
+	/**
+	 * 全ての家具を部屋から削除します
+	 */
+	@autobind
+	public removeAllFurnitures() {
+		this.exitTransformMode();
+		for (const obj of this.objects) {
+			this.scene.remove(obj);
+		}
+		this.objects = [];
+		this.furnitures = [];
+		this.selectedObject = null;
+		this.onChangeSelect(null);
+	}
+
+	/**
+	 * 部屋の床の色を変更します
+	 * @param color 色
+	 */
+	@autobind
+	public updateCarpetColor(color: string) {
+		this.roomInfo.carpetColor = color;
+		this.applyCarpetColor();
+	}
+
+	/**
+	 * 部屋の種類を変更します
+	 * @param type 種類
+	 */
+	@autobind
+	public changeRoomType(type: string) {
+		this.roomInfo.roomType = type;
+		this.scene.remove(this.roomObj);
+		this.loadRoom();
+	}
+
+	/**
+	 * 部屋データを取得します
+	 */
+	@autobind
+	public getRoomInfo() {
+		for (const obj of this.objects) {
+			const furniture = this.furnitures.find(f => f.id === obj.name);
+			furniture.position.x = obj.position.x;
+			furniture.position.y = obj.position.y;
+			furniture.position.z = obj.position.z;
+			furniture.rotation.x = obj.rotation.x;
+			furniture.rotation.y = obj.rotation.y;
+			furniture.rotation.z = obj.rotation.z;
+		}
+
+		return this.roomInfo;
+	}
+
+	/**
+	 * 選択されている家具を取得します
+	 */
+	@autobind
+	public getSelectedObject() {
+		return this.selectedObject;
+	}
+
+	@autobind
+	public findFurnitureById(id: string) {
+		return this.furnitures.find(furniture => furniture.id === id);
+	}
+
+	/**
+	 * レンダリングを終了します
+	 */
+	@autobind
+	public destroy() {
+		// Stop render loop
+		window.cancelAnimationFrame(this.renderFrameRequestId);
+
+		this.controls.dispose();
+		this.scene.dispose();
+	}
+}