vscode使用threejs引入外部的glsl文件
mport { useRef, useEffect, useCallback, useState } from 'react'
import * as THREE from 'three'
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'
import OrbitControls from 'three-orbitcontrols';
import './index.scss'
import basicVertexShader from '../shader/basic/vertex.glsl'
import basicFragmentShader from '../shader/basic/fragMent.glsl'
const View = () => {
const page = useRef();
console.log(basicVertexShader)
const scence = useRef(new THREE.Scene()).current; //场景
const camera = useRef(new THREE.PerspectiveCamera()).current; //摄像机(透视投影)
const render = useRef(new THREE.WebGLRenderer()).current; //渲染器
const controls = new OrbitControls(camera, render.domElement);//创建控件对象
const timer = useRef(null) // 定义定时器
const [objNum, setObjNum] = useState(1)
useEffect(() => {
page.current.appendChild(render.domElement);
init();
initLight();
initGeometry();
renderScene();
}, [])
// 初始化地板
const initGeometry = () => {
// 着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: basicVertexShader,
fragmentShader: basicFragmentShader
})
······
错误截图:
语法和路径都没有问题,顶点着色器和片元着色器也都正常,直接把他们复制到js文件中是可以正常显示的
顶点着色器
void main() {
osition = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
片元着色器
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
求指教!