function MainComponent() { const [furniture, setFurniture] = React.useState({ sofa: false, table: false, chair: false, bed: false, lamp: false }); const handleCheckboxChange = (e)=>{ const { name, checked } = e.target; setFurniture({ ...furniture, [name]: checked }); }; React.useEffect(()=>{ const scene = new window.THREE.Scene(); const camera = new window.THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new window.THREE.WebGLRenderer({ canvas: document.getElementById('scene') }); renderer.setSize(window.innerWidth, window.innerHeight); const floorGeometry = new window.THREE.PlaneGeometry(500, 500); const floorMaterial = new window.THREE.MeshBasicMaterial({ color: 0xcccccc, side: window.THREE.DoubleSide }); const floor = new window.THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = Math.PI / 2; scene.add(floor); camera.position.set(0, 100, 200); camera.lookAt(0, 0, 0); function addChair() { const chairGeometry = new window.THREE.BoxGeometry(20, 20, 20); const chairMaterial = new window.THREE.MeshBasicMaterial({ color: 0x00ff00 }); const chair = new window.THREE.Mesh(chairGeometry, chairMaterial); chair.position.set(Math.random() * 100 - 50, 10, Math.random() * 100 - 50); chair.userData = { draggable: true }; scene.add(chair); } document.getElementById('addChair').addEventListener('click', addChair); const raycaster = new window.THREE.Raycaster(); const mouse = new window.THREE.Vector2(); let selectedObject = null; function onMouseDown(event) { mouse.x = event.clientX / window.innerWidth * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { selectedObject = intersects[0].object; } } function onMouseMove(event) { if (selectedObject && selectedObject.userData.draggable) { mouse.x = event.clientX / window.innerWidth * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObject(floor); if (intersects.length > 0) { selectedObject.position.copy(intersects[0].point).add(new window.THREE.Vector3(0, 10, 0)); } } } function onMouseUp() { selectedObject = null; } window.addEventListener('mousedown', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "家具配置システム")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] bg-gray-200 p-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "家具チェックリスト"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "sofa", id: "sofa", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "sofa", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "ソファ")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "table", id: "table", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "table", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "テーブル")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "chair", id: "chair", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "chair", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "椅子")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "bed", id: "bed", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "bed", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "ベッド")), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "lamp", id: "lamp", className: "mr-2", onChange: handleCheckboxChange, __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "lamp", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "ランプ"))), /*#__PURE__*/ React.createElement("button", { id: "addChair", className: "mt-4 bg-[#ccc] p-2 rounded", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "椅子を追加")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 relative bg-gray-100 border-l border-gray-300 p-4", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "scene", className: "w-full h-full block", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this })))); }