Hey there! I totally get the frustration—STL is straightforward with Three.js, but STEP/STP is a more complex CAD format that Three.js doesn’t support natively. Let’s walk through the most practical approaches to get this working, including the pythonOCC method you mentioned.

1. Frontend Parsing with WebAssembly-Based Libraries #

The easiest way to handle STEP files directly in the browser is using WebAssembly ports of CAD kernels, like opencascade.js. This is a browser-compatible version of OpenCASCADE (the same engine behind pythonOCC), so it can parse STEP files and convert them into geometry that Three.js can use.

Here’s a quick example workflow:

• Install opencascade.js via npm or include it via CDN
• Load your STEP file as an ArrayBuffer
• Use opencascade.js to read the file and extract the 3D shape
• Convert the shape into a Three.js BufferGeometry (you’ll need to handle tessellation to turn the CAD surfaces into triangles)

A simplified code snippet might look like this:

import * as OCC from 'opencascade.js';

async function loadStepFile(file) {
  const occ = await OCC();
  const arrayBuffer = await file.arrayBuffer();
  const stepData = new Uint8Array(arrayBuffer);
  
  // Read STEP file
  const reader = new occ.STEPControl_Reader();
  const readResult = reader.ReadFile(new occ.TCollection_AsciiString('step-file'), occ.STEPControl_AsIs);
  if (readResult !== occ.IFSelect_RetDone) throw new Error('Failed to read STEP file');
  
  // Transfer shape to Three.js geometry
  const shape = reader.OneShape();
  const tessellator = new occ.BRepMesh_IncrementalMesh(shape, 0.1); // Tessellation tolerance
  tessellator.Perform();
  
  // Convert to Three.js geometry (you’ll need helper functions here, or use a wrapper)
  const geometry = convertOccShapeToThreeGeometry(shape, occ);
  const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial());
  scene.add(mesh);
}

Note: You’ll need helper functions to map OpenCASCADE’s shape data to Three.js buffers—some community wrappers or tutorials can help with this part.

2. Backend Conversion with pythonOCC #

If you’d rather handle the heavy lifting server-side, pythonOCC is a great option. The idea is:

1. Upload your STEP file to your backend
2. Use pythonOCC to parse the file and convert it to a format Three.js supports natively (like GLB/GLTF or STL)
3. Send the converted file back to the frontend for loading with Three.js’s built-in loaders

GLB/GLTF is preferred over STL because it preserves more CAD data (like materials, hierarchy) and is more efficient to render. Here’s a quick pythonOCC example to convert STEP to GLTF:

from OCC.Core.STEPControl import STEPControl_Reader
from OCC.Core.Gltf import GltfAPI

def step_to_gltf(step_path, gltf_path):
    # Read STEP file
    reader = STEPControl_Reader()
    status = reader.ReadFile(step_path)
    if status != 1:  # IFSelect_RetDone
        raise Exception("Failed to read STEP file")
    reader.TransferRoots()
    shape = reader.OneShape()
    
    # Export to GLTF
    api = GltfAPI()
    api.AddShape(shape)
    api.Export(gltf_path)

Once you have the GLTF file, your frontend can use THREE.GLTFLoader() to load it just like any other model—super straightforward!

3. Preprocess Files with Desktop CAD Tools #

If you don’t need dynamic file uploads, you can preconvert your STEP files using tools like FreeCAD or Blender:

• Import the STEP file into FreeCAD/Blender
• Clean up the geometry if needed
• Export as GLB/GLTF
• Load the exported file directly in Three.js with GLTFLoader

This is the simplest option for static models, as it avoids any runtime parsing complexity.

Final Recommendations #

• For dynamic, browser-based processing: Go with opencascade.js (it keeps everything client-side but requires handling WebAssembly and CAD geometry conversion)
• For server-side processing: Use pythonOCC to convert to GLTF—this offloads work from the client and leverages Python’s ecosystem for CAD handling
• For static models: Preconvert with FreeCAD/Blender for zero runtime overhead

Hope this helps you get those STEP files rendering in your Three.js app!

内容的提问来源于stack exchange，提问作者saujan rajbhandari