Question

我正在使用mtl文件加载OBJ文件。它加载成功。
现在，我必须为加载的那些模型编写自己的GLSL着色器。
但我不知道如何传递这些值，例如texcoords，顶点法线等。
我需要这些值才能在我自己的着色器中使用它们。谁能给我一个带有自定义着色器的带纹理的obj文件的样本，或者教我如何在框架中做到这一点？

Answer 1

一旦加载了OBJ，请抓住网格上的手柄：

 SELECT concat('XXX',  10.99, 'YYY', 3, 'ZZZ', now(3)) as a;

然后您可以应用自己的ShaderMaterial：

el.addEventListener('object3dset', () => {
  var mesh = el.getObject3D('mesh');
});

在顶点着色器中，您可以访问顶点法线。 https://threejs.org/docs/#api/en/renderers/webgl/WebGLProgram

mesh.material = new THREE.ShaderMaterial({
  uniforms: {
    texture: { type: 't', value: 0, texture: new THREE.TextureLoader().load( 'texture.jpg' ) }
  },

  vertexShader: document.getElementById( 'vertexShader' ).textContent,

  fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

顶点着色器首先运行；它接收属性，计算/操纵每个单独顶点的位置，并将其他数据（变量）传递给片段着色器。

在片段着色器中，可以对纹理进行采样：

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

https://threejs.org/docs/#api/en/materials/ShaderMaterial

使用自定义GLSL着色器以Aframe加载纹理化obj

1 个答案: