如何使用react-stl-viewer捕获渲染后STL模型的2D图像？

可以实现，react-stl-viewer基于Three.js构建，我们可以借助Three.js的渲染能力来捕获画布图像，具体实现方法如下：

核心思路 #

利用组件的ref获取内部Three.js渲染器的Canvas元素，在模型加载完成的回调中，将Canvas内容转换为2D图像（base64格式或Blob），用于网站其他模块。

修改后的示例代码 #

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { StlViewer } from "react-stl-viewer";

const url = "https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl"

const style = {
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
}

function App() {
    const viewerRef = useRef(null);

    // 模型加载完成后捕获图像
    const handleModelLoad = () => {
        if (!viewerRef.current) return;
        
        // 获取Three.js渲染器的canvas元素
        const canvas = viewerRef.current.renderer.domElement;
        
        // 转换为base64格式图像（PNG）
        const imageBase64 = canvas.toDataURL('image/png');
        
        // 这里可以将imageBase64传递给其他模块使用，比如存入state或发送给后端
        console.log('捕获的图像base64:', imageBase64);
        
        // 如果需要Blob格式，可使用以下代码
        /*
        canvas.toBlob((blob) => {
            const imageUrl = URL.createObjectURL(blob);
            console.log('捕获的图像Blob URL:', imageUrl);
            // 使用后记得释放URL
            // URL.revokeObjectURL(imageUrl);
        }, 'image/png');
        */
    };

    return (
        <StlViewer
            ref={viewerRef}
            style={style}
            orbitControls
            shadows
            url={url}
            onLoad={handleModelLoad}
        />
    );
}

ReactDOM.render(<App/>, document.getElementById('root'));

关键说明 #

• 通过useRef创建viewerRef绑定到StlViewer组件，以此获取组件内部的Three.js渲染器实例
• 使用onLoad回调监听模型加载完成事件，确保在模型渲染完成后再捕获图像
• 利用Canvas API的toDataURL或toBlob方法将画布内容转换为可使用的图像格式

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