Three-dxf là thư viện hỗ trợ hiển thị tệp DXF trên trình duyệt bằng cách kết hợp dxf-parser để phân tích cấu trúc và Three.js để render 3D. DXF là định dạng dữ liệu tiêu chuẩn từ các phần mềm CAD như AutoCAD.
Repository: https://github.com/gdsestimating/three-dxf
<template>
<div class="dxf-canvas-container">
<section class="upload-area">
<div class="file-input-group">
<label for="dxf-file-input">Chọn tệp DXF</label>
<input type="file" accept=".dxf" id="dxf-file-input" @change="processUploadedFile" />
<div class="progress-container" style="width: 300px;">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<div id="status-message" class="feedback-text"></div>
</div>
<p class="instruction">Thao tác trên canvas: Chuột phải để di chuyển, cuộn chuột để zoom</p>
</section>
<div id="threejs-renderer"></div>
<div id="json-data-display" class="data-output"></div>
</div>
</template>export default {
name: 'DxfRenderer',
data() {
return {
currentProgress: 0
};
},
methods: {
processUploadedFile(event) {
const selectedFile = event.target.files[0];
const reader = new FileReader();
reader.onprogress = this.updateUploadProgress;
reader.onload = this.parseAndRenderDxf;
reader.onabort = this.handleUploadCancel;
reader.onerror = this.handleFileError;
reader.readAsText(selectedFile);
},
handleFileError(errorEvent) {
const errorCode = errorEvent.target.error.code;
switch(errorCode) {
case FileError.NOT_FOUND_ERR:
alert('Tệp không tồn tại');
break;
case FileError.NOT_READABLE_ERR:
alert('Tệp không thể đọc');
break;
case FileError.ABORT_ERR:
break;
default:
alert('Lỗi khi xử lý tệp');
}
},
updateUploadProgress(event) {
const percentage = Math.round((event.loaded / event.total) * 100);
const progressBar = document.getElementById('progress-bar');
progressBar.style.width = `${percentage}%`;
},
parseAndRenderDxf(event) {
const parser = new DxfParser();
const dxfData = parser.parseSync(event.target.result);
const jsonOutput = document.getElementById('json-data-display');
jsonOutput.innerHTML = dxfData ? JSON.stringify(dxfData, null, 2) : 'Dữ liệu rỗng';
new ThreeDxf.Viewer(
dxfData,
document.getElementById('threejs-renderer'),
600,
600
);
}
}
}Dữ liệu DXF từ backend có thể xử lý trực tiếp mà không cần tương tác người dùng:
mounted() {
const dxfBlob = new File([this.dxfData], 'model.dxf', {
type: 'application/dxf',
lastModified: Date.now()
});
this.handleBackendDxf(dxfBlob);
},
methods: {
handleBackendDxf(file) {
const reader = new FileReader();
reader.onload = this.processDxfContent;
reader.onerror = this.handleFileError;
reader.readAsText(file);
},
processDxfContent(event) {
const rawContent = event.target.result;
const normalizedContent = rawContent.replace(/\\/g, '/');
ApiClient.fetchDxfData(normalizedContent)
.then(response => this.renderDxfData(response.data));
},
renderDxfData(dxfString) {
const parser = new DxfParser();
const parsedData = parser.parseSync(dxfString);
new ThreeDxf.Viewer(
parsedData,
document.getElementById('threejs-renderer'),
600,
600
);
}
}