gitee：?

?njsgcs/njsgcs_3d

mainwindow.js:4 Uncaught SyntaxError: The requested module '/3dviewport.js' does not provide an export named 'default'一定要default嗎

import{ scene,camera,renderer}  from './3dviewport';
import {update2DViewport }from './2dviewport';
const sidebar3d = document.createElement('div');
sidebar3d.id = 'sidebar3d';
// 固定側邊欄寬度sidebar3d.style.padding = '10px';
sidebar3d.style.backgroundColor = '#f0f0f0';import * as THREE from 'three';function init_sidebar3d() {const ox=document.createElement('input');ox.type='text';ox.placeholder = '左下角坐標x'; // 改為placeholder提示，避免覆蓋用戶輸入const oy=document.createElement('input');oy.type='text';oy.placeholder = '左下角坐標y';const oz=document.createElement('input');oz.type='text';oz.placeholder = '左下角坐標z';const sx=document.createElement('input');sx.type='text';sx.placeholder = '尺寸x';const sy=document.createElement('input');sy.type='text';sy.placeholder = '尺寸y';const sz=document.createElement('input');sz.type='text';sz.placeholder = '尺寸z';const createBtn = document.createElement('button');createBtn.textContent = '確定';createBtn.style.width = '100%';createBtn.style.margin = '5px 0';createBtn.addEventListener('click', () => {// 獲取輸入值并轉換為數值const oxVal = parseFloat(ox.value);const oyVal = parseFloat(oy.value);const ozVal = parseFloat(oz.value);const sxVal = parseFloat(sx.value);const syVal = parseFloat(sy.value);const szVal = parseFloat(sz.value);addcube_button(oxVal, oyVal, ozVal, sxVal, syVal, szVal); // 傳遞參數});ox.style.display="none"oy.style.display="none"oz.style.display="none"sx.style.display="none"sy.style.display="none"sz.style.display="none"createBtn.style.display="none"const addCubeBtn = document.createElement('button');addCubeBtn.textContent = '添加立方體';addCubeBtn.style.width = '100%';addCubeBtn.style.margin = '5px 0';addCubeBtn.addEventListener('click', () => {if (ox.style.display=="none"){ox.style.display="block";oy.style.display="block";oz.style.display="block";sx.style.display="block";sy.style.display="block";sz.style.display="block";createBtn.style.display="block";}else{ox.style.display="none";oy.style.display="none";oz.style.display="none";sx.style.display="none";sy.style.display="none";sz.style.display="none";createBtn.style.display="none";}// 點擊后更新按鈕列表});sidebar3d.appendChild(addCubeBtn);sidebar3d.appendChild(ox);sidebar3d.appendChild(oy);sidebar3d.appendChild(oz);sidebar3d.appendChild(sx);sidebar3d.appendChild(sy);sidebar3d.appendChild(sz);sidebar3d.appendChild(createBtn);addcube_button(0,0,0,100,100,100);addcube_button(0,100,0,100,100,100);addcube_button(100,0,0,100,100,100);addcube_button(-100,0,0,100,100,100);// 首次生成按鈕}
// 創建更新側邊欄按鈕的函數function addcube_button(ox,oy,oz,sx,sy,sz){// 使用輸入的尺寸創建幾何體（默認值防止未輸入時出錯）const geometry = new THREE.BoxGeometry(sx || 100, sy || 100, sz || 100);const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);// 設置位置（默認原點防止未輸入時出錯）cube.position.set(ox || 0, oy || 0, oz || 0);cube.name = 'CustomCube'; scene.add(cube);renderer.render(scene, camera);const btn = document.createElement('button');btn.textContent = `立方體`; // 按鈕文本btn.style.width = '100%'; // 按鈕寬度btn.style.margin = '5px 0'; // 按鈕間距btn.addEventListener('click', () => {if (deleteBtn.style.display=="none"){deleteBtn.style.display = 'block';}else{deleteBtn.style.display = 'none';}});const deleteBtn = document.createElement('button');deleteBtn.textContent = '刪除';deleteBtn.style.width = '100%';deleteBtn.style.margin = '5px 0';deleteBtn.addEventListener('click', () => {scene.remove(cube); // 刪除對象renderer.render(scene, camera);sidebar3d.removeChild(deleteBtn); // 移除按鈕sidebar3d.removeChild(btn); // 移除對應的按鈕});deleteBtn.style.display="none"sidebar3d.appendChild(btn);sidebar3d.appendChild(deleteBtn);update2DViewport();}
// 創建幾何體和網格init_sidebar3d();// 不再直接添加到body，改為導出供mainwindow管理
export default sidebar3d;

旋轉功能

ai寫的我連看都沒看?

import * as THREE from 'three';// 創建 canvas 并導出
const viewportCanvas3d = document.createElement('canvas');
viewportCanvas3d.id = 'scene';
viewportCanvas3d.style.flex = '1';
viewportCanvas3d.style.height = '100vh';// 創建場景和相機
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 創建渲染器并綁定 canvas
const renderer = new THREE.WebGLRenderer({ canvas: viewportCanvas3d });
renderer.setSize(window.innerWidth, window.innerHeight);// 設置相機位置
camera.position.z = 500;// ---------- 新增鼠標中鍵旋轉邏輯 ----------
let isRotating = false;
let startX = 0;
let startY = 0;
const target = new THREE.Vector3(0, 0, 0); // 假設零件中心在場景原點// 鼠標按下事件（中鍵觸發旋轉）
function onMouseDown(event) {if (event.button === 1) { // 鼠標中鍵（button=1）isRotating = true;startX = event.clientX;startY = event.clientY;event.preventDefault(); // 阻止默認滾動行為}
}// 鼠標移動事件（旋轉相機）
function onMouseMove(event) {if (!isRotating) return;const deltaX = event.clientX - startX;const deltaY = event.clientY - startY;startX = event.clientX;startY = event.clientY;// 計算相機繞目標點的旋轉（水平/垂直移動）const cameraPos = camera.position.clone().sub(target); // 轉換為相對目標點的坐標// 水平移動繞Y軸旋轉const rotateY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), deltaX * 0.005);cameraPos.applyQuaternion(rotateY);// 垂直移動繞X軸旋轉（負號調整方向）const rotateX = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -deltaY * 0.005);cameraPos.applyQuaternion(rotateX);camera.position.copy(cameraPos.add(target)); // 轉換回世界坐標camera.lookAt(target); // 始終看向目標點renderer.render(scene, camera); // 更新渲染
}// 鼠標釋放事件（結束旋轉）
function onMouseUp(event) {if (event.button === 1) isRotating = false;
}// 綁定事件監聽
viewportCanvas3d.addEventListener('mousedown', onMouseDown);
viewportCanvas3d.addEventListener('mousemove', onMouseMove);
viewportCanvas3d.addEventListener('mouseup', onMouseUp);
// ---------- 新增邏輯結束 ----------export  { viewportCanvas3d as default , scene , camera, renderer };

太復雜了讓ai減少方法數量

就差億點了

沒毛病

連出來是右視圖?

            const edges = [[0, 1], [1, 3], [3, 2], [2, 0],[4, 5], [5, 7], [7, 6], [6, 4],[1, 4], [0, 5], [2, 7], [3, 6]];

?

import * as THREE from 'three';
import { scene } from './3dviewport.js';
import { DxfWriter, point3d } from '@tarikjabiri/dxf';
// 創建 Canvas 元素
const viewportCanvas2d = document.createElement('canvas');
viewportCanvas2d.width = 900;
viewportCanvas2d.height = 600;
viewportCanvas2d.style.border = '1px solid #000';const ctx = viewportCanvas2d.getContext('2d');// 預定義相機集合
const cameras = [{camera: new THREE.OrthographicCamera(-450, 450, 300, -300, -1000, 1000),position: [0, 0, 500],label: "Front View",offset: { x: 0, y: 0 },scale: 0.5,},{// 原參數：-300, 300, 300, -300（水平/垂直范圍 600/600）// 調整后：根據畫布寬高比 3:2，將垂直范圍調整為 400（600/3*2=400）camera: new THREE.OrthographicCamera(-450, 450, 300, -300, -1000, 1000),position: [500, 0, 0],label: "Right View",offset: { x: 450, y: 0 },scale: 0.5,},{camera: new THREE.OrthographicCamera(-450, 450, 300, -300, -1000, 1000),position: [0, 500, 0],label: "Top View",offset: { x: 0, y: 300 },scale: 0.5,}
];// 初始化相機參數
cameras.forEach(({ camera, position }) => {camera.position.set(...position);camera.lookAt(0, 0, 0);
});// 臨時變量const tempV1 = new THREE.Vector3();
const tempV2 = new THREE.Vector3();
const linelist=[];function update2DViewport() {ctx.clearRect(0, 0, viewportCanvas2d.width, viewportCanvas2d.height);for (const config of cameras) {const { camera, offset, label, scale } = config;// 獲取相機位置const cameraPos = new THREE.Vector3();camera.getWorldPosition(cameraPos);const Edges = [];// 遍歷場景中的立方體scene.traverse(obj => {if (!(obj instanceof THREE.Mesh && obj.name === 'CustomCube')) return;const geometry = obj.geometry;if (!(geometry instanceof THREE.BoxGeometry)) return;const vertices = geometry.attributes.position.array;const edges = [[0, 1], [1, 3], [3, 2], [2, 0],[4, 5], [5, 7], [7, 6], [6, 4],[1, 4], [0, 5], [2, 7], [3, 6]];edges.forEach(([v1Idx, v2Idx]) => {tempV1.fromBufferAttribute(geometry.attributes.position, v1Idx).applyMatrix4(obj.matrixWorld);tempV2.fromBufferAttribute(geometry.attributes.position, v2Idx).applyMatrix4(obj.matrixWorld);Edges.push([tempV1.clone(), tempV2.clone()]);});});// 繪制標簽ctx.fillStyle = "#000";ctx.font = `${12 * scale}px sans-serif`;ctx.fillText(label, offset.x + 10 * scale, offset.y + 20 * scale);ctx.strokeStyle = '#000';ctx.lineWidth = 1;for (const [p1, p2] of Edges) {const sp1 = projectPoint(p1, camera, scale);const sp2 = projectPoint(p2, camera, scale);ctx.beginPath();ctx.moveTo(sp1.x + offset.x, sp1.y + offset.y);ctx.lineTo(sp2.x + offset.x, sp2.y + offset.y);ctx.stroke();linelist.push([sp1.x + offset.x, sp1.y + offset.y,sp2.x + offset.x, sp2.y + offset.y])}}}
function export_dxf() {// 如果是瀏覽器環境const dxf = new DxfWriter();// 添加一個圖層（可選）dxf.addLayer('Lines', 7); // 顏色索引 7 是黑色// 輔助函數：保留兩位小數function toFixed(num) {return parseFloat(parseFloat(num).toFixed(2));}// 遍歷 linelist 添加線段for (const [p1x, p1y,p2x,p2y] of linelist) {const start = point3d(toFixed(p1x), toFixed(p1y));const end = point3d(toFixed(p2x), toFixed(p2y));dxf.addLine(start, end, 'Lines'); // 'Lines' 圖層名}// 生成 DXF 字符串內容const dxfString = dxf.stringify();// 創建 Blob 并觸發下載const blob = new Blob([dxfString], { type: "application/dxf" });const url = URL.createObjectURL(blob);const now = new Date().toISOString().replace(/[:.]/g, '') // 移除冒號和點.replace('T', '_');const a = document.createElement("a");a.href = url;a.download = `${now} output.dxf`;a.click();// 釋放資源URL.revokeObjectURL(url);
}
// 投影函數
function projectPoint(point, camera, scale) {const ndc = point.clone().project(camera);const x = (ndc.x + 1) * viewportCanvas2d.width / 2 * scale;const y = (1 - ndc.y) * viewportCanvas2d.height / 2 * scale;return { x, y };
}export {viewportCanvas2d as default,update2DViewport,export_dxf} ;

import {export_dxf} from './2dviewport';
const sidebar2d = document.createElement('div')
sidebar2d.id = 'sidebar2d'// 固定側邊欄寬度const export_dxfBtn = document.createElement('button');export_dxfBtn.textContent = '導出dxf';export_dxfBtn.style.width = '100%';export_dxfBtn.style.margin = '5px 0';export_dxfBtn.addEventListener('click', () => {export_dxf() // 傳遞參數});sidebar2d.appendChild(export_dxfBtn);
// 不再直接添加到body，改為導出供mainwindow管理
export default sidebar2d

急急國王