zlo*_*lon 1 javascript three.js
我想从外部文件加载着色器。这个着色器是正确的，因为它在插入<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() 函数内的断点未定义。
你能解释一下我的错误吗？
整个代码：
<!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>
我使我的 init 函数异步：
async function init() {
let frag_shader = await (await fetch('simple.frag')).text();
console.log(frag_shader);
// ..
}
init();
你的错误是在浏览器中加载文件是异步的。所以首先你有这个代码
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,
});
如果您真的想从外部文件加载，则需要构建代码以等待它们下载。
作为一个例子
loader.load('plaid.frag',function ( data ) {fShader = data;},);
loader.load('plaid.vert',function ( data ) {vShader = data;},);
| 归档时间： |
|
| 查看次数： |
3295 次 |
| 最近记录： |