javascript 从计算机 onclick 在地板上添加纹理

Question

我正在尝试使用 <input type="file" onchange=function()> 在我的地板上放置纹理但我总是只看到黑色纹理。不知道如何将计算机上的 .jpg 文件作为纹理放在地板上。有什么帮助吗？

这是我的代码

javascript:

  function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function() {
      var floorTexture = THREE.ImageUtils.loadTexture(reader);
      floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
      floorTexture.repeat.set(10, 10);
      var floorMaterial = new THREE.MeshBasicMaterial({
        map: floorTexture,
        side: THREE.DoubleSide
      });
      var floorGeometry = new THREE.PlaneGeometry(100, 100, 10, 10);
      var floor = new THREE.Mesh(floorGeometry, floorMaterial);
      floor.position.set(0, 0, 0);
      floor.rotation.set(0, 0, 0);
      scene.add(floor);

      var output = floorTexture;
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<input type="file" accept="image/jpeg, image/png" onchange="preview_image(event)" /> <img id="output_image" />

Answer 1

这里发生了一些事情。 THREE.ImageUtils.loadTexture 已被弃用。我使用 THREE.TextureLoader() 代替。我还添加了相机，并设置了 z 位置。要加载的纹理信息是 reader.result，而不仅仅是 reader。这是一个工作片段:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 50);
camera.position.z = 30;

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function() {
        // instantiate a loader
        var loader = new THREE.TextureLoader();
        // load a resource
        loader.load(
            // resource URL
            reader.result,
            // onLoad callback
            function(floorTexture) {
                floorTexture.needsUpdate = true;
                var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
                var floorGeometry = new THREE.PlaneGeometry(10, 10, 10);
                var floor = new THREE.Mesh(floorGeometry, floorMaterial);
                scene.add(floor);
                renderer.render(scene, camera);
            },
            // onProgress callback currently not supported
            undefined,
            // onError callback
            function(err) {
                console.error('An error happened.');
            }
        );
    }
    reader.readAsDataURL(event.target.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
    <input type="file" accept="image/jpeg, image/png" onchange="javascrpit:preview_image(event)" /> <img id="output_image" />