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
GitHub
690
src/client/app/common/scripts/room/room.ts
Normal file
690
src/client/app/common/scripts/room/room.ts
Normal file
@ -0,0 +1,690 @@
|
||||
import autobind from 'autobind-decorator';
|
||||
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 { v4 as uuid } from 'uuid';
|
||||
const furnitureDefs = require('./furnitures.json5');
|
||||
|
||||
THREE.ImageUtils.crossOrigin = '';
|
||||
|
||||
type Options = {
|
||||
graphicsQuality: Room['graphicsQuality'];
|
||||
onChangeSelect: Room['onChangeSelect'];
|
||||
useOrthographicCamera: boolean;
|
||||
};
|
||||
|
||||
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;
|
||||
public canvas: HTMLCanvasElement;
|
||||
|
||||
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, 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 = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
//#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
|
||||
|
||||
this.canvas = this.renderer.domElement;
|
||||
container.appendChild(this.renderer.domElement);
|
||||
//#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 outLight = new THREE.SpotLight(0xffffff, 0.4);
|
||||
|
||||
outLight.position.set(9, 3, -2);
|
||||
outLight.castShadow = this.enableShadow;
|
||||
outLight.shadow.bias = -0.001; // アクネ、アーチファクト対策 その代わりピーターパンが発生する可能性がある
|
||||
outLight.shadow.mapSize.width = this.shadowQuality;
|
||||
outLight.shadow.mapSize.height = this.shadowQuality;
|
||||
outLight.shadow.camera.near = 6;
|
||||
outLight.shadow.camera.far = 15;
|
||||
outLight.shadow.camera.fov = 45;
|
||||
|
||||
this.scene.add(outLight);
|
||||
//#endregion
|
||||
|
||||
//#region Init a controller
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
|
||||
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;
|
||||
this.controls.mouseButtons.LEFT = 1;
|
||||
this.controls.mouseButtons.MIDDLE = 2;
|
||||
this.controls.mouseButtons.RIGHT = 0;
|
||||
//#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 = user.avatarUrl;
|
||||
|
||||
const iconTexture = new THREE.TextureLoader().load(avatarUrl);
|
||||
iconTexture.wrapS = THREE.RepeatWrapping;
|
||||
iconTexture.wrapT = THREE.RepeatWrapping;
|
||||
iconTexture.anisotropy = 16;
|
||||
|
||||
const avatarMaterial = new THREE.MeshLambertMaterial({
|
||||
emissive: 0x111111,
|
||||
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.renderer.domElement);
|
||||
this.scene.add(this.furnitureControl);
|
||||
|
||||
// Hover highlight
|
||||
this.renderer.domElement.onmousemove = this.onmousemove;
|
||||
|
||||
// Click
|
||||
this.renderer.domElement.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() {
|
||||
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() {
|
||||
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() {
|
||||
new GLTFLoader().load(`/assets/room/rooms/${this.roomInfo.roomType}/${this.roomInfo.roomType}.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 = 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;
|
||||
}
|
||||
});
|
||||
|
||||
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') {
|
||||
(child.material as THREE.MeshStandardMaterial).color.setHex(parseInt(this.roomInfo.carpetColor.substr(1), 16));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
public 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;
|
||||
|
||||
(child.material as THREE.MeshStandardMaterial).color.setHex(parseInt(val.substr(1), 16));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
public 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.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.renderer.domElement.width) * 2 - 1;
|
||||
const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.renderer.domElement.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)) {
|
||||
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.renderer.domElement || ev.button !== 0) return;
|
||||
|
||||
const rect = (ev.target as HTMLElement).getBoundingClientRect();
|
||||
const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.renderer.domElement.width) * 2 - 1;
|
||||
const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.renderer.domElement.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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
public enterTransformMode(type: 'translate' | 'rotate') {
|
||||
this.isTransformMode = true;
|
||||
this.furnitureControl.setMode(type);
|
||||
this.furnitureControl.attach(this.selectedObject);
|
||||
}
|
||||
|
||||
@autobind
|
||||
public exitTransformMode() {
|
||||
this.isTransformMode = false;
|
||||
this.furnitureControl.detach();
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
@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() {
|
||||
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 updateCarpetColor(color: string) {
|
||||
this.roomInfo.carpetColor = color;
|
||||
this.applyCarpetColor();
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user