3.0mm アルミニウム
3-ダイヤモンド・サレーション
ワニ口形状滑り止め表面 · 800×800
製品タイプ
その他の表面パターンはカスタム審査により対応可能ですが、本コンフィギュレーターはグリップストラットスタイルのワニ口形状安全踏み板に特化しています。
長さ914 mm
600 mm914 mm1200 mm1800 mm2400 mm3000 mm
914 mmは標準参考長さです。カスタム長さは工場審査により見積もり対応。
幅241 mm
120 mm241 mm300 mm600 mm900 mm1200 mm
241 mmは標準参考幅です。カスタム幅は工場審査により見積もり対応。
サイドチャンネル高さ38 mm
25 mm38 mm50 mm75 mm100 mm127 mm
38 mmは標準サイドチャンネル高さです。カスタム高さは工場審査により見積もり対応。
天面突出部約 11 mm
天面突出部は金型と成形プロセスによって決定されます。カスタムサイズについては工場審査により確認。
板厚3.0 mm
3.0 mm アルミニウムが主なオプションです。その他の板厚は工場審査により見積もり対応。
材質
アルミニウムは鋼材よりも一枚あたりの重量が軽く、輸送を考慮したカスタム踏み板注文に推奨されます。
表面パターン
本コンフィギュレーターはグリップストラットスタイルのワニ口形状安全踏み板に特化しています。その他の表面パターンは別途工場審査により対応可能です。
取付穴レイアウト
標準穴レイアウト: 合計4つの短辺取付穴。各短辺サイドプレートに丸穴1つ + 長穴1つ。標準製品の長辺サイドチャンネルには穴はありません。
数量
アルミニウム エコノミー Ocean DDP
参考価格
USD 499 / 箱 より
$499
5枚含む · $99.80 / 枚
箱数1
推定箱重量~15 kg
参考価格見積もり審査
アルミニウム Fast Air DDP
参考価格
USD 629 / 箱 より
$629
5枚含む · $125.80 / 枚
推定箱重量
Get Quick Quote
Fast Response // ── Imports ── import * as THREE from 'https://esm.sh/three@0.160.0'; import { OrbitControls } from 'https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js?bundle'; // ── State ── let scene, camera, renderer, controls, plateMesh, plateGroup; let animId = null; let wIn = 9.5, lFt = 3, depthIn = 1.5, material = 'aluminum', hasFlange = true; const matColors = { 'steel': new THREE.Color('#a8b4bc'), 'aluminum': new THREE.Color('#d4d8dd'), '304': new THREE.Color('#ccd0d4'), 'stainless': new THREE.Color('#ccd0d4'), }; // ── AlphaMap Generator — surface-aware hole pattern ── // surface: 'serrated-3' | 'serrated' | 'perforated' | 'traction' // 缓存避免每次滑块变化都重新生成 const _alphaCache = {}; function generateAlphaMap(plateW, plateL, surface) { const cacheKey = plateW.toFixed(1) + "_" + plateL.toFixed(1) + "_" + surface; if (_alphaCache[cacheKey]) return _alphaCache[cacheKey]; const SIZE = 512; // 从2048降至512，速度提升16倍 const cv = document.createElement('canvas'); cv.width = SIZE; cv.height = SIZE; const ctx = cv.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, SIZE, SIZE); ctx.fillStyle = '#000000'; const MAX_CELLS = 50; // 限制最大网格数，防止超长板阻塞 const scale = SIZE / Math.max(plateW, plateL); const s = surface || 'serrated-3'; if (s.indexOf('perf') > -1) { const r = 0.35 * scale, gap = 0.7 * scale; let cols = Math.floor(plateW * scale / (r*2 + gap)); let rows = Math.floor(plateL * scale / (r*2 + gap)); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - cols*(r*2+gap) + gap)/2, oy = (SIZE - rows*(r*2+gap) + gap)/2; for (let row = 0; row < rows; row++) { const stagger = (row % 2) * (r + gap/2); for (let col = 0; col < cols; col++) { ctx.beginPath(); ctx.arc(ox + col*(r*2+gap) + stagger + r, oy + row*(r*2+gap) + r, r, 0, Math.PI*2); ctx.fill(); } } } else if (s.indexOf('traction') > -1) { const r = 0.2 * scale, gap = 0.4 * scale; let cols = Math.floor(plateW * scale / (r*2 + gap)); let rows = Math.floor(plateL * scale / (r*2 + gap)); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - cols*(r*2+gap) + gap)/2, oy = (SIZE - rows*(r*2+gap) + gap)/2; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { ctx.beginPath(); ctx.arc(ox + col*(r*2+gap) + r, oy + row*(r*2+gap) + r, r, 0, Math.PI*2); ctx.fill(); } } } else { const mw = 1.45 * scale, mh = 0.70 * scale; const hgap = 0.50 * scale, vgap = 1.55 * scale; let cols = Math.floor(plateW * scale / (mw + hgap)); let rows = Math.floor(plateL * scale / vgap); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - (cols*(mw+hgap) - hgap))/2, oy = (SIZE - rows*vgap)/2; const nw = mw * 0.38; // width of narrow tip zone for (let row = 0; row < rows; row++) { const stagger = (row % 2) * (mw + hgap)/2; for (let col = 0; col < cols; col++) { const cx = ox + col*(mw+hgap) + stagger + mw/2; const cy = oy + row*vgap + mh/2; const lx = cx - mw/2, rx = cx + mw/2; const ty = cy - mh/2, by = cy + mh/2; // Stretched hexagon — pointed ends, tapered middle ctx.beginPath(); ctx.moveTo(lx + nw, ty); ctx.lineTo(rx - nw, ty); ctx.quadraticCurveTo(rx - nw*0.4, cy - mh*0.08, rx - nw*0.12, cy); ctx.quadraticCurveTo(rx - nw*0.4, cy + mh*0.08, rx - nw, by); ctx.lineTo(lx + nw, by); ctx.quadraticCurveTo(lx + nw*0.4, cy + mh*0.08, lx + nw*0.12, cy); ctx.quadraticCurveTo(lx + nw*0.4, cy - mh*0.08, lx + nw, ty); ctx.closePath(); ctx.fill(); // Tiny serration bumps along the tapered edges const bw = mw * 0.04; for (let b = 1; b <= 2; b++) { const frac = b / 3; // Left top serration ctx.beginPath(); ctx.ellipse(lx + nw*(1-frac), ty + mh*0.08, bw*0.6, bw, -Math.PI*0.3, 0, Math.PI*2); ctx.fill(); // Left bottom serration ctx.beginPath(); ctx.ellipse(lx + nw*(1-frac), by - mh*0.08, bw*0.6, bw, Math.PI*0.3, 0, Math.PI*2); ctx.fill(); // Right top serration ctx.beginPath(); ctx.ellipse(rx - nw*(1-frac), ty + mh*0.08, bw*0.6, bw, -Math.PI*1.3, 0, Math.PI*2); ctx.fill(); // Right bottom serration ctx.beginPath(); ctx.ellipse(rx - nw*(1-frac), by - mh*0.08, bw*0.6, bw, Math.PI*1.3, 0, Math.PI*2); ctx.fill(); } } } } const tex = new THREE.CanvasTexture(cv); tex.wrapS = THREE.ClampToEdgeWrapping; tex.wrapT = THREE.ClampToEdgeWrapping; tex.minFilter = THREE.LinearMipmapLinearFilter; tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = true; _alphaCache[cacheKey] = tex; return tex; } // ── 3D Scene Init ── function init3D() { const canvas = document.getElementById('viewer-3d'); if (!canvas) return; // Renderer renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; // Scene scene = new THREE.Scene(); scene.background = new THREE.Color('#1e293b'); scene.fog = new THREE.Fog('#1e293b', 3, 12); // Camera camera = new THREE.PerspectiveCamera(40, 1, 0.1, 20); camera.position.set(2.2, 1.6, 2.4); // Lights — 4-point studio setup for metallic surfaces const amb = new THREE.AmbientLight('#8899bb', 0.4); scene.add(amb); const key = new THREE.DirectionalLight('#ffffff', 1.6); key.position.set(4, 6, 3); key.castShadow = true; key.shadow.mapSize.set(1024,1024); key.shadow.camera.near=0.5; key.shadow.camera.far=20; key.shadow.camera.left=-5; key.shadow.camera.right=5; key.shadow.camera.top=5; key.shadow.camera.bottom=-5; scene.add(key); const fill = new THREE.DirectionalLight('#aaccff', 0.4); fill.position.set(-3, 1, -1); scene.add(fill); const rim = new THREE.DirectionalLight('#ffffff', 0.5); rim.position.set(0, 0.5, -3); scene.add(rim); const hemi = new THREE.HemisphereLight('#8899cc', '#334455', 0.25); scene.add(hemi); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 1; controls.maxDistance = 8; controls.target.set(0, 0.05, 0); controls.update(); // Ground shadow receiver const groundGeo = new THREE.PlaneGeometry(10, 10); const groundMat = new THREE.ShadowMaterial({ opacity: 0.25 }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI/2; ground.position.y = -0.6; ground.receiveShadow = true; scene.add(ground); // Plate group plateGroup = new THREE.Group(); scene.add(plateGroup); // Initial build buildModel(11.75, 12, 2.0, 'steel'); window.__threeReady = true; resize3D(); // Animation loop function loop() { animId = requestAnimationFrame(loop); controls.update(); renderer.render(scene, camera); } loop(); } function resize3D() { const canvas = document.getElementById('viewer-3d'); if (!canvas || !renderer) return; const w = canvas.clientWidth, h = canvas.clientHeight || w; if (canvas.width !== w || canvas.height !== h) { renderer.setSize(w, h, false); camera.aspect = w / Math.max(h, 1); camera.updateProjectionMatrix(); } } window.addEventListener('resize', resize3D); // ── Build 3D Model ── function buildModel(w, l, d, mat, surf) { wIn = w; lFt = l; depthIn = d; material = mat; surf = surf || 'serrated-3'; if (!plateGroup) return; // Clear old while (plateGroup.children.length) plateGroup.remove(plateGroup.children[0]); // Convert inches/feet → meters const W = w * 0.0254; const L = l * 0.3048; const t = 0.003; // plate thickness ~12ga const D = d * 0.0254; // channel depth // AlphaMap for croc-mouth holes const alphaTex = generateAlphaMap(W * 39.37, L * 39.37, (typeof selSurface !== 'undefined' ? selSurface : 'serrated-3')); // Material const pMat = new THREE.MeshStandardMaterial({ color: matColors[mat] || matColors['steel'], metalness: 0.85, roughness: 0.35, alphaMap: alphaTex, alphaTest: 0.15, side: THREE.DoubleSide, transparent: true, envMapIntensity: 0.3, }); // Main plate (top surface) const plateGeo = new THREE.PlaneGeometry(L, W, 1, 1); const plate = new THREE.Mesh(plateGeo, pMat); plate.rotation.x = -Math.PI/2; plate.position.y = t/2; plate.castShadow = true; plate.receiveShadow = true; plateGroup.add(plate); // Bottom plate (closed back) const botGeo = new THREE.PlaneGeometry(L, W, 1, 1); const botMat = new THREE.MeshStandardMaterial({ color: matColors[mat] || matColors['steel'], metalness: 0.8, roughness: 0.55 }); const bot = new THREE.Mesh(botGeo, botMat); bot.rotation.x = -Math.PI/2; bot.position.y = -t/2; bot.receiveShadow = true; plateGroup.add(bot); // Side channels (U-bend edges) const chMat = new THREE.MeshStandardMaterial({ color: new THREE.Color('#8a9299'), metalness: 0.7, roughness: 0.5 }); const chT = 0.004; // Left + Right channels [[W/2, 0], [-W/2, Math.PI]].forEach(([zOff, ry]) => { const chGeo = new THREE.BoxGeometry(Math.max(0.01, L), Math.max(0.01, D), Math.max(0.001, chT)); const ch = new THREE.Mesh(chGeo, chMat); ch.position.set(0, -D/2, zOff); ch.castShadow = true; ch.receiveShadow = true; plateGroup.add(ch); }); // Front + Back channels [[L/2, 0], [-L/2, 0]].forEach(([xOff, _]) => { const chGeo = new THREE.BoxGeometry(Math.max(0.001, chT), Math.max(0.01, D), Math.max(0.01, W)); const ch = new THREE.Mesh(chGeo, chMat); ch.position.set(xOff, -D/2, 0); ch.castShadow = true; ch.receiveShadow = true; plateGroup.add(ch); }); // Wireframe overlay for grid feel const gridGeo = new THREE.PlaneGeometry(L*0.96, W*0.94, Math.max(2, Math.floor(L*6)), Math.max(2, Math.floor(W*3))); const gridMat = new THREE.MeshBasicMaterial({ color: '#667788', wireframe: true, transparent: true, opacity: 0.12 }); const grid = new THREE.Mesh(gridGeo, gridMat); grid.rotation.x = -Math.PI/2; grid.position.y = t/2 + 0.001; plateGroup.add(grid); } window.__rebuild3D = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; const d = parseFloat((document.getElementById('cfg-d')||{}).value) || 38; const mat = ((document.getElementById('cfg-mat')||{}).value || 'steel').toLowerCase(); // Read surface from global selSurface for pattern switching if (typeof selSurface !== 'undefined') buildModel(w, l, d, mat, selSurface); else buildModel(w, l, d, mat); resize3D(); }; // ── DXF Export ── window.exportDXF = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; // Convert to mm const mmW = Math.round(w * 25.4); const mmL = Math.round(l * 304.8); // Build DXF string manually (minimal valid DXF) const dxf = [ '0','SECTION','2','HEADER','0','ENDSEC', '0','SECTION','2','TABLES','0','ENDSEC', '0','SECTION','2','BLOCKS','0','ENDSEC', '0','SECTION','2','ENTITIES', // Outer rectangle (plate outline) '0','LWPOLYLINE','90','4','70','1','43','0.5', '10','0','20','0', '10', String(mmL), '20','0', '10', String(mmL), '20', String(mmW), '10','0','20', String(mmW), // Inner rectangle (bend line) '0','LWPOLYLINE','90','4','70','0','43','0.25', '10', String(Math.round(mmW*0.08)), '20', String(Math.round(mmW*0.08)), '10', String(mmL - Math.round(mmW*0.08)), '20', String(Math.round(mmW*0.08)), '10', String(mmL - Math.round(mmW*0.08)), '20', String(mmW - Math.round(mmW*0.08)), '10', String(Math.round(mmW*0.08)), '20', String(mmW - Math.round(mmW*0.08)), '0','ENDSEC', '0','EOF' ].join('\n'); const blob = new Blob([dxf], { type: 'application/dxf' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'LTU_Custom_Aluminum_Safety_Step_Tread_' + Math.round(l) + 'x' + Math.round(w) + 'x' + Math.round(d) + 'mm.dxf'; a.click(); URL.revokeObjectURL(url); }; // ── Area Calculator ── window.calcArea = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; // Flat area in square meters: width(mm)*length(mm)/1000000 const areaSqM = (w * l) / 1000000; const areaSqFt = areaSqM * 10.764; return { sqm: areaSqM, sqft: areaSqFt }; }; // ── Start ── try { init3D(); } catch(e) { console.warn('3D viewer init failed (non-blocking):', e.message); } // Set initial area display (function(){ var a = window.calcArea(); if (a && document.getElementById('disp-area')) document.getElementById('disp-area').textContent = a.sqft.toFixed(2) + ' sq ft (' + a.sqm.toFixed(2) + ' m²)'; })();
仕組み
1
設定
Set dimensions, material & quantity
2
見積もりを見る
参考カートン見積もり
3
仕様を送信
ワンクリックでWhatsAppまたはメール
4
見積もりを取得
24時間以内に確認価格
よくある質問
このコンフィギュレーターの価格は最終ですか？
いいえ。コンフィギュレーターは参考カートン見積もりのみを表示します。最終的な配送見積もりは、郵便番号、材質、実際の総重量、カートン数、穴レイアウト、遠隔地追加料金、利用可能な貨物ルートによって異なります。
デフォルトのアルミニウム構成は何ですか？
デフォルトの参考構成は、長さ914 mm × 幅241 mm × サイドチャンネル高さ38 mm、トッププロジェクション約11 mm、アルミニウム厚さ3.0 mmです。標準梱包は1カートンあたり5個です。
取付穴はどこにありますか？
標準製品には短辺に合計4つの取付穴があります。各短辺側板には1つの丸穴と1つの長穴があります。標準製品では長辺側チャンネルに穴はありません。
長辺に穴を追加できますか？
はい。長辺穴、追加穴、異なる穴間隔、またはカスタム穴レイアウトは、カスタム/OEM注文として見積もり可能です。図面、穴サイズ、穴間隔、材質、数量、配送先郵便番号を工場レビュー用に送信してください。
どの材質を選ぶべきですか？
3.0mmアルミニウムは、配送に敏感なカスタムステップトレッド注文の主なオプションです。現在のQ235B溶融亜鉛メッキ鋼サンプルバッチは、高速航空DDPのみで利用可能です。溶融亜鉛メッキアップグレードと304/316ステンレス鋼は、より過酷な環境や腐食に敏感な環境向けに見積もり可能です。
DXFを直接生産に使用できますか？
いいえ。エクスポートされたDXFは参考草案のみです。最終的な生産図面、穴レイアウト、曲げ詳細、生産可行性は、生産前に工場チームが確認する必要があります。
エッジは安全に扱えますか？
金属エッジと隆起した歯は鋭利な場合があります。取り扱いと設置時には耐切創手袋を着用してください。購入者は最終用途と設置方法への適合性を確認する必要があります。
カスタム/OEMのMOQは何ですか？
カスタムサイズやカスタム穴レイアウトは通常100個から始まり、図面、サイズ、穴パターン、材質、成形可行性、梱包要件によって異なります。
エンジニアと仕様担当者向け
エンジニアリング & BIM リソース
通路、プラットフォーム、階段を設計中ですか？グリップストラットステップトレッドをモデルと入札パッケージに直接組み込むために必要なエンジニアリングデータを入手してください — チャンネル深さ、開口面積、取付穴レイアウト、荷重方向、正確な設定に合わせて提供。
2D寸法図面
選択した仕様に合わせて寸法付けされた幅、長さ、チャンネル深さ、プランクピッチ、ボルト穴間隔のPDF/DWG製作図。
3D / BIMモデル
リクエストに応じてSTEP/IGESソリッドモデルと2D/3D参照ファイルを提供し、設定されたプランクが正しいサイズと重量で構造モデルに配置されます。
仕様書と提出シート
材料グレード、仕上げ、表面パターン、スパン方向をカバーする1枚の提出シート — 工場レビューまたは承認パッケージ後に作成可能。
設定に図面が必要ですか？
設定 your step tread above, then request the matching drawing pack. We prepare 2D/3D files and the submittal sheet for your exact width, length, gauge and material.
図面パックをリクエスト仕様概要
Grip Strutスタイル安全ステップトレッドのクイックリファレンス、Leading Top Unionによる設定可能で工場直送。
幅範囲
標準参考: 241 mm。特定用途向けのカスタム幅は工場レビューにより見積もり。
長さ範囲
標準参考: 914 mm。特定用途向けのカスタム長さは工場レビューにより見積もり。
チャンネル深さ
標準参考: 38 mm。カスタム深さは工場レビューにより見積もり。
ゲージ / 厚さ
16, 14, 13, 12, 10, 8ゲージ。12 ga（約2.7 mm）が産業用ステップの標準選択です。
材質
3.0mmアルミニウム（主オプション）、5052/6061アルミニウム（鋼重量の約35%）、腐食環境用304/316ステンレス。
表面パターン
Serrated crocodile-mouth anti-slip. 3-diamond (7″) in-stock standard; 5-diamond (11¾″) and perforated made to order.
Packaging
1カートンあたり5個, 標準11.75″ × 12フィート、12 ga亜鉛メッキ仕様で1カートンあたり約20 kg総重量。
リードタイム
在庫あり：生産2-3日。米国西部配送 25-35日 海上 または 7-12日 航空 DDP。50個から大口、100個からカスタム/OEM。
価格
標準亜鉛メッキはUSD 329/カートン（5個）DDP米国西海岸から — 運賃、通関、最終配送込み。
Get Quick QuoteFast Response // ── Imports ── import * as THREE from 'https://esm.sh/three@0.160.0'; import { OrbitControls } from 'https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js?bundle'; // ── State ── let scene, camera, renderer, controls, plateMesh, plateGroup; let animId = null; let wIn = 9.5, lFt = 3, depthIn = 1.5, material = 'aluminum', hasFlange = true; const matColors = { 'steel': new THREE.Color('#a8b4bc'), 'aluminum': new THREE.Color('#d4d8dd'), '304': new THREE.Color('#ccd0d4'), 'stainless': new THREE.Color('#ccd0d4'), }; // ── AlphaMap Generator — surface-aware hole pattern ── // surface: 'serrated-3' | 'serrated' | 'perforated' | 'traction' // 缓存避免每次滑块变化都重新生成 const _alphaCache = {}; function generateAlphaMap(plateW, plateL, surface) { const cacheKey = plateW.toFixed(1) + "_" + plateL.toFixed(1) + "_" + surface; if (_alphaCache[cacheKey]) return _alphaCache[cacheKey]; const SIZE = 512; // 从2048降至512，速度提升16倍 const cv = document.createElement('canvas'); cv.width = SIZE; cv.height = SIZE; const ctx = cv.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, SIZE, SIZE); ctx.fillStyle = '#000000'; const MAX_CELLS = 50; // 限制最大网格数，防止超长板阻塞 const scale = SIZE / Math.max(plateW, plateL); const s = surface || 'serrated-3'; if (s.indexOf('perf') > -1) { const r = 0.35 * scale, gap = 0.7 * scale; let cols = Math.floor(plateW * scale / (r*2 + gap)); let rows = Math.floor(plateL * scale / (r*2 + gap)); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - cols*(r*2+gap) + gap)/2, oy = (SIZE - rows*(r*2+gap) + gap)/2; for (let row = 0; row < rows; row++) { const stagger = (row % 2) * (r + gap/2); for (let col = 0; col < cols; col++) { ctx.beginPath(); ctx.arc(ox + col*(r*2+gap) + stagger + r, oy + row*(r*2+gap) + r, r, 0, Math.PI*2); ctx.fill(); } } } else if (s.indexOf('traction') > -1) { const r = 0.2 * scale, gap = 0.4 * scale; let cols = Math.floor(plateW * scale / (r*2 + gap)); let rows = Math.floor(plateL * scale / (r*2 + gap)); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - cols*(r*2+gap) + gap)/2, oy = (SIZE - rows*(r*2+gap) + gap)/2; for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { ctx.beginPath(); ctx.arc(ox + col*(r*2+gap) + r, oy + row*(r*2+gap) + r, r, 0, Math.PI*2); ctx.fill(); } } } else { const mw = 1.45 * scale, mh = 0.70 * scale; const hgap = 0.50 * scale, vgap = 1.55 * scale; let cols = Math.floor(plateW * scale / (mw + hgap)); let rows = Math.floor(plateL * scale / vgap); if (cols * rows > MAX_CELLS * MAX_CELLS) { const ratio = Math.sqrt(MAX_CELLS*MAX_CELLS/(cols*rows)); cols = Math.max(2, Math.floor(cols*ratio)); rows = Math.max(2, Math.floor(rows*ratio)); } const ox = (SIZE - (cols*(mw+hgap) - hgap))/2, oy = (SIZE - rows*vgap)/2; const nw = mw * 0.38; // width of narrow tip zone for (let row = 0; row < rows; row++) { const stagger = (row % 2) * (mw + hgap)/2; for (let col = 0; col < cols; col++) { const cx = ox + col*(mw+hgap) + stagger + mw/2; const cy = oy + row*vgap + mh/2; const lx = cx - mw/2, rx = cx + mw/2; const ty = cy - mh/2, by = cy + mh/2; // Stretched hexagon — pointed ends, tapered middle ctx.beginPath(); ctx.moveTo(lx + nw, ty); ctx.lineTo(rx - nw, ty); ctx.quadraticCurveTo(rx - nw*0.4, cy - mh*0.08, rx - nw*0.12, cy); ctx.quadraticCurveTo(rx - nw*0.4, cy + mh*0.08, rx - nw, by); ctx.lineTo(lx + nw, by); ctx.quadraticCurveTo(lx + nw*0.4, cy + mh*0.08, lx + nw*0.12, cy); ctx.quadraticCurveTo(lx + nw*0.4, cy - mh*0.08, lx + nw, ty); ctx.closePath(); ctx.fill(); // Tiny serration bumps along the tapered edges const bw = mw * 0.04; for (let b = 1; b <= 2; b++) { const frac = b / 3; // Left top serration ctx.beginPath(); ctx.ellipse(lx + nw*(1-frac), ty + mh*0.08, bw*0.6, bw, -Math.PI*0.3, 0, Math.PI*2); ctx.fill(); // Left bottom serration ctx.beginPath(); ctx.ellipse(lx + nw*(1-frac), by - mh*0.08, bw*0.6, bw, Math.PI*0.3, 0, Math.PI*2); ctx.fill(); // Right top serration ctx.beginPath(); ctx.ellipse(rx - nw*(1-frac), ty + mh*0.08, bw*0.6, bw, -Math.PI*1.3, 0, Math.PI*2); ctx.fill(); // Right bottom serration ctx.beginPath(); ctx.ellipse(rx - nw*(1-frac), by - mh*0.08, bw*0.6, bw, Math.PI*1.3, 0, Math.PI*2); ctx.fill(); } } } } const tex = new THREE.CanvasTexture(cv); tex.wrapS = THREE.ClampToEdgeWrapping; tex.wrapT = THREE.ClampToEdgeWrapping; tex.minFilter = THREE.LinearMipmapLinearFilter; tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = true; _alphaCache[cacheKey] = tex; return tex; } // ── 3D Scene Init ── function init3D() { const canvas = document.getElementById('viewer-3d'); if (!canvas) return; // Renderer renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; // Scene scene = new THREE.Scene(); scene.background = new THREE.Color('#1e293b'); scene.fog = new THREE.Fog('#1e293b', 3, 12); // Camera camera = new THREE.PerspectiveCamera(40, 1, 0.1, 20); camera.position.set(2.2, 1.6, 2.4); // Lights — 4-point studio setup for metallic surfaces const amb = new THREE.AmbientLight('#8899bb', 0.4); scene.add(amb); const key = new THREE.DirectionalLight('#ffffff', 1.6); key.position.set(4, 6, 3); key.castShadow = true; key.shadow.mapSize.set(1024,1024); key.shadow.camera.near=0.5; key.shadow.camera.far=20; key.shadow.camera.left=-5; key.shadow.camera.right=5; key.shadow.camera.top=5; key.shadow.camera.bottom=-5; scene.add(key); const fill = new THREE.DirectionalLight('#aaccff', 0.4); fill.position.set(-3, 1, -1); scene.add(fill); const rim = new THREE.DirectionalLight('#ffffff', 0.5); rim.position.set(0, 0.5, -3); scene.add(rim); const hemi = new THREE.HemisphereLight('#8899cc', '#334455', 0.25); scene.add(hemi); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 1; controls.maxDistance = 8; controls.target.set(0, 0.05, 0); controls.update(); // Ground shadow receiver const groundGeo = new THREE.PlaneGeometry(10, 10); const groundMat = new THREE.ShadowMaterial({ opacity: 0.25 }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI/2; ground.position.y = -0.6; ground.receiveShadow = true; scene.add(ground); // Plate group plateGroup = new THREE.Group(); scene.add(plateGroup); // Initial build buildModel(11.75, 12, 2.0, 'steel'); window.__threeReady = true; resize3D(); // Animation loop function loop() { animId = requestAnimationFrame(loop); controls.update(); renderer.render(scene, camera); } loop(); } function resize3D() { const canvas = document.getElementById('viewer-3d'); if (!canvas || !renderer) return; const w = canvas.clientWidth, h = canvas.clientHeight || w; if (canvas.width !== w || canvas.height !== h) { renderer.setSize(w, h, false); camera.aspect = w / Math.max(h, 1); camera.updateProjectionMatrix(); } } window.addEventListener('resize', resize3D); // ── Build 3D Model ── function buildModel(w, l, d, mat, surf) { wIn = w; lFt = l; depthIn = d; material = mat; surf = surf || 'serrated-3'; if (!plateGroup) return; // Clear old while (plateGroup.children.length) plateGroup.remove(plateGroup.children[0]); // Convert inches/feet → meters const W = w * 0.0254; const L = l * 0.3048; const t = 0.003; // plate thickness ~12ga const D = d * 0.0254; // channel depth // AlphaMap for croc-mouth holes const alphaTex = generateAlphaMap(W * 39.37, L * 39.37, (typeof selSurface !== 'undefined' ? selSurface : 'serrated-3')); // Material const pMat = new THREE.MeshStandardMaterial({ color: matColors[mat] || matColors['steel'], metalness: 0.85, roughness: 0.35, alphaMap: alphaTex, alphaTest: 0.15, side: THREE.DoubleSide, transparent: true, envMapIntensity: 0.3, }); // Main plate (top surface) const plateGeo = new THREE.PlaneGeometry(L, W, 1, 1); const plate = new THREE.Mesh(plateGeo, pMat); plate.rotation.x = -Math.PI/2; plate.position.y = t/2; plate.castShadow = true; plate.receiveShadow = true; plateGroup.add(plate); // Bottom plate (closed back) const botGeo = new THREE.PlaneGeometry(L, W, 1, 1); const botMat = new THREE.MeshStandardMaterial({ color: matColors[mat] || matColors['steel'], metalness: 0.8, roughness: 0.55 }); const bot = new THREE.Mesh(botGeo, botMat); bot.rotation.x = -Math.PI/2; bot.position.y = -t/2; bot.receiveShadow = true; plateGroup.add(bot); // Side channels (U-bend edges) const chMat = new THREE.MeshStandardMaterial({ color: new THREE.Color('#8a9299'), metalness: 0.7, roughness: 0.5 }); const chT = 0.004; // Left + Right channels [[W/2, 0], [-W/2, Math.PI]].forEach(([zOff, ry]) => { const chGeo = new THREE.BoxGeometry(Math.max(0.01, L), Math.max(0.01, D), Math.max(0.001, chT)); const ch = new THREE.Mesh(chGeo, chMat); ch.position.set(0, -D/2, zOff); ch.castShadow = true; ch.receiveShadow = true; plateGroup.add(ch); }); // Front + Back channels [[L/2, 0], [-L/2, 0]].forEach(([xOff, _]) => { const chGeo = new THREE.BoxGeometry(Math.max(0.001, chT), Math.max(0.01, D), Math.max(0.01, W)); const ch = new THREE.Mesh(chGeo, chMat); ch.position.set(xOff, -D/2, 0); ch.castShadow = true; ch.receiveShadow = true; plateGroup.add(ch); }); // Wireframe overlay for grid feel const gridGeo = new THREE.PlaneGeometry(L*0.96, W*0.94, Math.max(2, Math.floor(L*6)), Math.max(2, Math.floor(W*3))); const gridMat = new THREE.MeshBasicMaterial({ color: '#667788', wireframe: true, transparent: true, opacity: 0.12 }); const grid = new THREE.Mesh(gridGeo, gridMat); grid.rotation.x = -Math.PI/2; grid.position.y = t/2 + 0.001; plateGroup.add(grid); } window.__rebuild3D = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; const d = parseFloat((document.getElementById('cfg-d')||{}).value) || 38; const mat = ((document.getElementById('cfg-mat')||{}).value || 'steel').toLowerCase(); // Read surface from global selSurface for pattern switching if (typeof selSurface !== 'undefined') buildModel(w, l, d, mat, selSurface); else buildModel(w, l, d, mat); resize3D(); }; // ── DXF Export ── window.exportDXF = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; // Convert to mm const mmW = Math.round(w * 25.4); const mmL = Math.round(l * 304.8); // Build DXF string manually (minimal valid DXF) const dxf = [ '0','SECTION','2','HEADER','0','ENDSEC', '0','SECTION','2','TABLES','0','ENDSEC', '0','SECTION','2','BLOCKS','0','ENDSEC', '0','SECTION','2','ENTITIES', // Outer rectangle (plate outline) '0','LWPOLYLINE','90','4','70','1','43','0.5', '10','0','20','0', '10', String(mmL), '20','0', '10', String(mmL), '20', String(mmW), '10','0','20', String(mmW), // Inner rectangle (bend line) '0','LWPOLYLINE','90','4','70','0','43','0.25', '10', String(Math.round(mmW*0.08)), '20', String(Math.round(mmW*0.08)), '10', String(mmL - Math.round(mmW*0.08)), '20', String(Math.round(mmW*0.08)), '10', String(mmL - Math.round(mmW*0.08)), '20', String(mmW - Math.round(mmW*0.08)), '10', String(Math.round(mmW*0.08)), '20', String(mmW - Math.round(mmW*0.08)), '0','ENDSEC', '0','EOF' ].join('\n'); const blob = new Blob([dxf], { type: 'application/dxf' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'LTU_Custom_Aluminum_Safety_Step_Tread_' + Math.round(l) + 'x' + Math.round(w) + 'x' + Math.round(d) + 'mm.dxf'; a.click(); URL.revokeObjectURL(url); }; // ── Area Calculator ── window.calcArea = function() { const w = parseFloat((document.getElementById('cfg-w')||{}).value) || 241; const l = parseFloat((document.getElementById('cfg-l')||{}).value) || 914; // Flat area in square meters: width(mm)*length(mm)/1000000 const areaSqM = (w * l) / 1000000; const areaSqFt = areaSqM * 10.764; return { sqm: areaSqM, sqft: areaSqFt }; }; // ── Start ── try { init3D(); } catch(e) { console.warn('3D viewer init failed (non-blocking):', e.message); } // Set initial area display (function(){ var a = window.calcArea(); if (a && document.getElementById('disp-area')) document.getElementById('disp-area').textContent = a.sqft.toFixed(2) + ' sq ft (' + a.sqm.toFixed(2) + ' m²)'; })();