我目前完全陷入了允许用户从 HTML 'input' 文件标签上传图像文件的问题上,并让该图像出现在场景中已经存在的 PlaneGeometry 网格上,并且虚拟纹理已经加载到材料。
我可以让纹理图像毫无问题地出现在飞机上,并且我的 HTML“输入”文件按钮出现在屏幕上,我可以单击它并加载一个图像,但它没有链接到 Three.js 中的任何内容,这就是我的地方卡住了,我不明白如何继续。
我发现我可以看到这个JSFIDDLE 示例,但我无法弄清楚如何使用它向已经存在的几何体和材料添加自定义纹理。
<body>
<!-- three.js container -->
<input id="userImage" type="file" />
<div id="container"></div>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(uv * 2. - vec2(1, 1), 0., 1.);
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
precision highp float;
varying vec2 vUv;
uniform sampler2D texture1;
void main() {
gl_FragColor = texture2D(texture1, vUv.xy);
} …Run Code Online (Sandbox Code Playgroud)