javascript - 如何将着色器添加到从 STLLoader 加载的 THREE.Object3D

Question

我有一个使用 THREE.STLLoader 加载的模型。

var loader = new THREE.STLLoader();
loader.addEventListener('load', function(event) {
    var mesh = event.content;
    scene.add(mesh);
});
loader.load('model/test.stl');

我需要对这个模型应用一个顶点和片段着色器。这个怎么做？

Answer 1

包含着色器的常用方法是将它们放在<script>标签中：

<script id="vertexShader" type="x-shader/x-vertex">

    void main() {
        ...
    }

</script>

<script id="fragmentShader" type="x-shader/x-fragment">

    void main() {
        ...
    }

</script>

然后，在您的init函数中：

// it's useful to have uniforms as a ~global variable,
// so you can modify them from other functions
// in animate() or render() for example
var uniforms = {
    // here, your shader's uniforms variables
};

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

在你的加载器回调中

var mesh = event.content;
mesh.material = material;

看看这个简单的着色器示例http://threejs.org/examples/webgl_shader.html

Answer 2

这个问题没有显示任何数量的自己的研究工作。请参阅：如何将材质分配给 ColladaLoader 或 OBJLoader

才三天大。也许下一次，尝试搜索至少 3 秒以上 rollingEyes。是的，正如文森特建议的那样，有很多例子可以查看。