three.js - 无法在 CRA 上使用 textureloader three.js 渲染 svg

Question

我正在尝试在我的 CRA 上使用没有 react-three-fiber 的three.js。我在将 SVG 渲染到我的立方体上时遇到问题。相同的代码适用于下面的常规 .html，显示了我正在尝试创建的可重用组件。

import React, { useRef, useEffect } from 'react'
import * as THREE from "three";

const ScalableCargoThree = () => {
    const ref = useRef(null);
    useEffect(() => {        
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);
        const fov = 75;
        const aspect = 3;
        const near = 0.1;
        const far = 5
        const camera = new THREE.PerspectiveCamera(
            fov,
            aspect,
            near,
            far
        );
        camera.position.z = 3;
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        ref.current.appendChild(renderer.domElement);
        renderer.setSize(300, 300);
        let cube;
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        
            const loader = new THREE.TextureLoader();

            const material = new THREE.MeshBasicMaterial({
                map: loader.load('./textures/generator.svg')
            });

        cube = new THREE.Mesh(geometry,material);
        scene.add(cube);
        renderer.render( scene, camera );
        // renderer.render(scene, camera);
    }, []);


    return (
        <div ref={ref}></div>
    )
}

export default ScalableCargoThree;

标签： three.jsreact-three-fiber