Babylon Viewer isn’t displaying my STL model correctly

[manm44484-tech]

Select Topic Area

Question

Body

“I’m using Babylon Viewer to display a 3D model on my website, but no matter how I adjust the settings, the model always appears in X-Ray mode. Here’s my viewer.jsx code—does anyone know why this happens?

///

import { useEffect, useRef } from 'react';
import * as BABYLON from '@babylonjs/core';

export default function BabylonViewer({
stlFile,
color = '#FF0000',
scale = 1,
width = 400,
height = 400,
autoRotate = false
}) {
const canvasRef = useRef(null);
const engineRef = useRef(null);
const sceneRef = useRef(null);

useEffect(() => {
if (!canvasRef.current || !stlFile) return;

// ✅ 修正：確保 canvas 尺寸與容器一致 const canvas = canvasRef.current; canvas.width = width; canvas.height = height; // 初始化 Babylon.js const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, }); engineRef.current = engine; const scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color4(0.95, 0.95, 0.95, 1); sceneRef.current = scene; // 創建相機 const camera = new BABYLON.ArcRotateCamera( 'camera', Math.PI / 2, Math.PI / 3, 5, BABYLON.Vector3.Zero(), scene ); camera.attachControl(canvas, true); camera.minZ = 0.01; camera.maxZ = 1000; // 光源 const light1 = new BABYLON.HemisphericLight( 'light1', new BABYLON.Vector3(1, 1, 0), scene ); light1.intensity = 0.7; const light2 = new BABYLON.DirectionalLight( 'light2', new BABYLON.Vector3(-1, -2, -1), scene ); light2.intensity = 0.5; // 加載 STL loadSTLMesh(stlFile, scene, color, scale, autoRotate); // ✅ 修正：渲染循環確保視窗正確 engine.runRenderLoop(() => { scene.render(); }); // ✅ 修正：窗口調整大小時，重新設置 canvas 尺寸 const handleResize = () => { if (canvas && engine) { canvas.width = width; canvas.height = height; engine.resize(); } }; window.addEventListener('resize', handleResize); // 清理 return () => { window.removeEventListener('resize', handleResize); scene.dispose(); engine.dispose(); }; 

}, [stlFile, color, scale, width, height, autoRotate]);

// 加載 STL 文件
const loadSTLMesh = (buffer, scene, color, scale, autoRotate) => {
try {
const arrayBuffer = buffer;
const dataView = new DataView(arrayBuffer);

 // 檢查 STL 類型 const header = new Uint8Array(arrayBuffer, 0, 80); const headerStr = String.fromCharCode.apply(null, header); const isASCII = headerStr.toLowerCase().includes('solid'); let vertices, indices, normals; if (isASCII) { const result = parseASCIISTL(arrayBuffer); vertices = result.vertices; indices = result.indices; normals = result.normals; } else { const result = parseBinarySTL(dataView); vertices = result.vertices; indices = result.indices; normals = result.normals; } // 創建 mesh const customMesh = new BABYLON.Mesh('stl', scene); const vertexData = new BABYLON.VertexData(); vertexData.positions = vertices; vertexData.indices = indices; vertexData.normals = normals; vertexData.applyToMesh(customMesh); // ✅ 修正：設置材質，確保正確渲染表面（不透明，無 X-ray 效果） const material = new BABYLON.StandardMaterial('stlMaterial', scene); material.diffuseColor = BABYLON.Color3.FromHexString(color); material.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2); material.backFaceCulling = true; // ✅ 只渲染外表面 material.twoSidedLighting = false; // ✅ 單面光照 material.alpha = 1.0; // ✅ 完全不透明 material.disableDepthWrite = false; // ✅ 啟用深度寫入 material.forceDepthWrite = true; // ✅ 強制深度寫入 customMesh.material = material; // 縮放 customMesh.scaling = new BABYLON.Vector3(scale, scale, scale); // 自動旋轉 if (autoRotate) { scene.registerBeforeRender(() => { customMesh.rotation.y += 0.01; }); } // 自動適應視圖 const boundingInfo = customMesh.getBoundingInfo(); const boundingBox = boundingInfo.boundingBox; const center = boundingBox.center; const extents = boundingBox.extendSize; const maxExtent = Math.max(extents.x, extents.y, extents.z); const camera = scene.activeCamera; if (camera) { camera.target = center; camera.radius = maxExtent * 3; } console.log('✅ STL 加載成功'); } catch (err) { console.error('❌ STL 解析失敗:', err); } 

};

// 解析 Binary STL
const parseBinarySTL = (dataView) => {
const numTriangles = dataView.getUint32(80, true);
const vertices = [];
const indices = [];
const normals = [];

let offset = 84; for (let i = 0; i < numTriangles; i++) { const nx = dataView.getFloat32(offset, true); const ny = dataView.getFloat32(offset + 4, true); const nz = dataView.getFloat32(offset + 8, true); offset += 12; for (let j = 0; j < 3; j++) { const vx = dataView.getFloat32(offset, true); const vy = dataView.getFloat32(offset + 4, true); const vz = dataView.getFloat32(offset + 8, true); offset += 12; vertices.push(vx, vy, vz); normals.push(nx, ny, nz); indices.push(i * 3 + j); } offset += 2; } return { vertices, indices, normals }; 

};

// 解析 ASCII STL
const parseASCIISTL = (buffer) => {
const text = new TextDecoder().decode(buffer);
const lines = text.split('\n');
const vertices = [];
const indices = [];
const normals = [];

let currentNormal = [0, 0, 0]; let vertexIndex = 0; for (const line of lines) { const trimmed = line.trim(); if (trimmed.startsWith('facet normal')) { const parts = trimmed.split(/\s+/); currentNormal = [ parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4]), ]; } else if (trimmed.startsWith('vertex')) { const parts = trimmed.split(/\s+/); vertices.push( parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3]) ); normals.push(...currentNormal); indices.push(vertexIndex++); } } return { vertices, indices, normals }; 

};

return (
<div
style={{
width: ${width}px,
height: ${height}px,
position: 'relative',
overflow: 'hidden', // ✅ 修正：防止溢出
borderRadius: '8px',
}}
>
<canvas
ref={canvasRef}
style={{
width: '100%',
height: '100%',
display: 'block', // ✅ 修正：移除底部空白
touchAction: 'none',
}}
/>

);
}