使用ShaderMaterial对导入的模型贴皮肤失败

最新推荐文章于 2025-09-25 10:50:34 发布

原创

最新推荐文章于 2025-09-25 10:50:34 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在three.js中遇到导入模型ShaderMaterial无法正确贴图的问题，分析原因是缺少UV坐标。解决方案包括在Blender中对模型进行UV展开和导出时勾选Export texture coordinates。详细步骤包括在Blender中进行UV Editing，选择需要贴图的部件，进行UV展开，并确保导出设置正确。此外，还提供了UV贴图和贴图绘制的注意事项。

关键代码

let uniformsBuild = null
let clockBuild = new THREE.Clock()

uniformsBuild = {
	time: { value: 1.0 }
}
let material = new THREE.ShaderMaterial({
	uniforms: uniformsBuild,
	vertexShader: document.getElementById('vertex_shader').textContent,
	fragmentShader: document.getElementById('fragment_shader').textContent
})
<script id="vertex_shader" type="x-shader/x-vertex">
  varying vec2 vUv;
  void main() {
	vUv = uv;
	vec4 mvPosition = modelViewMatrix * vec4( position, 1 );
	gl_Position = projectionMatrix * mvPosition;
  }
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
  uniform float time;
  varying vec2 vUv;
  void main( void ) {
	vec2 position = vUv;
	float color = 0.0;
	color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
	color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
	color += sin( position.x * sin( ti