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

【问题标题】：How to add shader to THREE.Object3D loaded from STLLoader如何将着色器添加到从 STLLoader 加载的 THREE.Object3D
【发布时间】：2015-03-13 04:11:36
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript three.js webgl shader stl-format

【解决方案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

【讨论】：

【解决方案2】：

这个问题没有显示自己的研究工作量。看到这个：How to assign a material to ColladaLoader or OBJLoader

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

【讨论】：