迦南giser 2022-08-16 20:51
浏览 68
已结题

vscode import 着色器glsll无法识别

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
    })
    ······

错误截图:

img

语法和路径都没有问题,顶点着色器和片元着色器也都正常,直接把他们复制到js文件中是可以正常显示的
顶点着色器

void main() {
osition = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

片元着色器

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

求指教!

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 8月24日
    • 修改了问题 8月16日
    • 创建了问题 8月16日

    悬赏问题

    • ¥15 FutureWarning:不推荐使用空或全 NA 条目的 DataFrame 串联行为。怎么改呢?
    • ¥15 Chatgpt突然无法正常显示数学公式,如何解决?
    • ¥15 一个用华为模拟器做的实验。
    • ¥28 opencv Cuda C++编译
    • ¥15 插入sim卡4g模组反复断连
    • ¥100 如何把 16bit Bayer 图像数据转换为 TIFF RGB
    • ¥15 进行基于用户的协同过滤推荐,使用准确率和召回率评价推荐模型的效果
    • ¥15 word脚注设置不起空格符号
    • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
    • ¥15 求解密json或者美化