自定义着色器 - Three.js [英] Custom shader - Three.js

问题描述

我正在尝试在 Three.js 中使用自定义着色器.我试图像许多例子一样去做，但它不起作用.我的代码是:

I am trying to use a custom shader with Three.js. I tried to do it like the many examples, but it doesn't work. My code is:

var vertex = "void main(){vec4 mvPosition = modelViewMatrix * vec4( position, 1.0    );gl_Position = projectionMatrix * mvPosition;}";
var fragment = "precision highp float;void main(void){gl_FragColor = vec4(0.0,1.0,0.0,1.0);}";
material = new THREE.ShaderMaterial({
                vertexShader: vertex,
                fragmentShader: fragment
        });
var mesh = new THREE.Mesh(geometry,material);

……一切都是空白.但是如果我使用这种材料:

…and everything is blank. But if I use this material :

material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

……一切都完美无缺.怎么了?

…everything works perfectly. What's wrong?

推荐答案

我发现了问题:我不得不使用:

I found the problem: I had to use:

 renderer = new THREE.WebGLRenderer();

代替:

 renderer = new THREE.CanvasRenderer();

这篇关于自定义着色器 - Three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！