Question

我想从外部文件加载着色器。此着色器是正确的，因为它插入<script>标记时可以正常工作。我做了以下事情：

var loader = new THREE.FileLoader();
loader.load('shader.vert',function ( data ) {vShader =  data;},);
loader.load('shader.frag',function ( data ) {fShader =  data;},);

后来我用它作为：

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vShader,
    fragmentShader: fShader,

});

问题在于，当我重新加载页面时，我会出错，但是没有定义着色器。当我在控制台中键入vShader时，它会打印出我想要的内容。当我开始调试时（init（）函数内的断点未定义vShader。

你能解释我的错误吗？

整个代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <script src="https://threejs.org/build/three.min.js"></script>

</head>
<body>
<div class="WebGL-output" id="WebGL-output"></div>
<script id="vertexShader" type="x-shader/x-vertex" src="shader.vert">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(color,1.);
}
</script>

<script>
var renderer,uniforms,vShader,fShader,camera,scene;
var loader = new THREE.FileLoader();
init();
animate();
function init(){
renderer = new THREE.WebGLRenderer
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('WebGL-output').appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 5000;
scene = new THREE.Scene();

//******* DO NOT WORK
loader.load('plaid.frag',function ( data ) {fShader =  data;},);
loader.load('plaid.vert',function ( data ) {vShader =  data;},);
// ****** WORK
//fShader = document.getElementById('fragmentShader').text;
//vShader = document.getElementById('vertexShader').text;

// **************************
uniforms = {
    "color" : {
        type : "c",
        //value :new THREE.Color(0xf0f0f0)
        value :new THREE.Color(0x00ff00)
    },
};


var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vShader,
    fragmentShader: fShader,
});

// Create circles and add to scene.
var geometry = new THREE.CircleGeometry(100, 50);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var light = new THREE.AmbientLight(0x000000); // soft white light
scene.add(light);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>
</html>

Answer 1

您的错误是在浏览器中加载文件是异步的。所以首先你有这个代码

loader.load('plaid.frag',function ( data ) {fShader =  data;},);
loader.load('plaid.vert',function ( data ) {vShader =  data;},);

您设置fShader和vShader的那些功能要到一段时间后才会被调用（下载文件需要多长时间）

但是，只需几行就可以立即同时使用fShader和vShader，即使它们还没有下载

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vShader,
    fragmentShader: fShader,
});

如果您真的想从外部文件加载，则需要构建代码以等待它们下载。

作为一个例子

＆＃13;

var renderer,uniforms,vShader,fShader,camera,scene;
var loader = new THREE.FileLoader();
init();

function init() {
  renderer = new THREE.WebGLRenderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('WebGL-output').appendChild(renderer.domElement);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 5000;
  scene = new THREE.Scene();

  var numFilesLeft = 2;
  
  function runMoreIfDone() {
     --numFilesLeft;
     if (numFilesLeft === 0) {
       more();
     }
  }
  
  //******* DO NOT WORK
  loader.load('plaid.frag',function ( data ) {fShader =  data; runMoreIfDone(); },);
  loader.load('plaid.vert',function ( data ) {vShader =  data; runMoreIfDone(); },);
  // ****** WORK
  //fShader = document.getElementById('fragmentShader').text;
  //vShader = document.getElementById('vertexShader').text;
}

function more() {

  // **************************
  uniforms = {
      "color" : {
          type : "c",
          //value :new THREE.Color(0xf0f0f0)
          value :new THREE.Color(0x00ff00)
      },
  };


  var material = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: vShader,
      fragmentShader: fShader,
  });

  // Create circles and add to scene.
  var geometry = new THREE.CircleGeometry(100, 50);
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var light = new THREE.AmbientLight(0x000000); // soft white light
  scene.add(light);
  
  animate();
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

＆＃13;

如何从外部文件加载着色器？ THREE.FileLoader

1 个答案: