小编Jos*_*man的帖子

将用户上传的纹理加载到three.js中的几何体

我是 Three.js 和 javascript(一般编码)的新手,但我在尝试可能性方面有很多乐趣,并创建了一些带有灯光、来自 3D JSON 模型的自定义几何图形的小型 Three.js 场景来开发我的能够实现我构建 3D 网站的最终目标的技能。

我目前完全陷入了允许用户从 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)

html javascript three.js

6
推荐指数
1
解决办法
1909
查看次数

标签 统计

html ×1

javascript ×1

three.js ×1