Три текстуры SVG и SVG ⇐ Javascript

[Anonymous]

Я пытался заставить SVG работать с Three.js. Я узнал, что это изначально не поддерживает SVGS, и требуется SVGLOUDER. После добавления этого проблема, с которой у меня есть, сетка полностью исчезает, моя консоль также, похоже, также не доставляет никаких ошибок. Есть идеи?import * as THREE from 'three'
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'
import vertexShader from './gl/glsl/vertex.glsl'
import fragmentShader from './gl/glsl/fragment.glsl'

const Gl = () => {
const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
100
)
// camera.position.z = 1
camera.position.set(0, 0, 5) // Move camera further

const renderer = new THREE.WebGLRenderer({
alpha: true,
canvas: document.querySelector('#app'),
antialias: true,
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0x000000, 0)

const loadSVG = (url) => {
const loader = new SVGLoader()
loader.load(url, (data) => {
const paths = data.paths
const group = new THREE.Group()

paths.forEach((path) => {
const shapes = SVGLoader.createShapes(path)
shapes.forEach((shape) => {
const geometry = new THREE.ShapeGeometry(shape)
const material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
uTime: { value: 0.0 },
},
side: THREE.DoubleSide,
})
const mesh = new THREE.Mesh(geometry, material)
group.add(mesh)
})
})

scene.add(group)
})
}

loadSVG('./img/test.svg')

const clock = new THREE.Clock()

const onResize = () => {
const w = window.innerWidth
const h = window.innerHeight
camera.aspect = w / h
camera.updateProjectionMatrix()
renderer.setSize(w, h)
}

const render = () => {
renderer.render(scene, camera)
}

const run = () => {
requestAnimationFrame(run)
render()
}

const init = () => {
window.addEventListener('resize', onResize, false)
run()
}

init()
}

export default Gl


Подробнее здесь: https://stackoverflow.com/questions/794 ... g-textures