Jos*_*man 6 html javascript three.js
我目前完全陷入了允许用户从 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);
}
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script>
init()
function init(){
$("#userImage").change(function () {
var image = document.createElement( 'img' );
var texture = new THREE.Texture( image );
image.onload = function() {
texture.needsUpdate = true;
};
userImage = $("#userImage")[0];
if (userImage.files && userImage.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
image.src = e.target.result;
};
reader.readAsDataURL(userImage.files[0]);
}
camera = new THREE.OrthographicCamera();
renderer = new THREE.WebGLRenderer({
antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
shader = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
texture1: {
type: "t",
value: texture
}
}
});
scene = new THREE.Scene();
scene.add(new THREE.Mesh(new THREE.PlaneGeometry(1), shader));
$('#container').append(renderer.domElement);
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
});
}
</script>
用于addEventListener向“文件”添加“更改”事件input：
document.getElementById('userImage').addEventListener('change', function(e) {
.....
} );
target.files[0]新文件可以通过事件参数的属性获取：
var userImage = e.target.files[0];
用于URL.createObjectURL创建包含 URL 的 DOMString：
var userImageURL = URL.createObjectURL( userImage );
我建议用于THREE.TextureLoader加载纹理：
var loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
var texture = loader.load(userImageURL);
请参阅示例，该示例基于您的问题的代码：
document.getElementById('userImage').addEventListener('change', function(e) {
.....
} );
var userImage = e.target.files[0];
| 归档时间： |
|
| 查看次数： |
1909 次 |
| 最近记录： |