У меня есть модель, загруженная с помощью THREE.STLLoader.
var loader = new THREE.STLLoader();
loader.addEventListener('load', function(event) {
var mesh = event.content;
scene.add(mesh);
});
loader.load('model/test.stl');
Мне нужно применить к этой модели вершинный и фрагментный шейдер. Как это сделать?
Обычный способ включить ваши шейдеры — поместить их в теги <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.
Этот вопрос не показывает объем собственных исследований. См. это: Как назначить материал ColladaLoader или OBJLoader
Всего три дня от роду. Может быть, в следующий раз попробуйте искать rollingEyes хотя бы дольше 3 секунд. И да, есть много примеров для проверки, как предложил Винсент.
