设置 Three.js 用户上传的背景

Question

我希望用户能够从他自己的计算机上传图像，该图像应设置为 Three.js 的背景图像。此图像应为静态背景。是否可以将图像保存在变量中？我当前的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>See your new car where you want it</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <input type="file" onchange="selectBackground()" multiple accept='image/*'><br>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script>
        var scene;
        var camera;
        var renderer; 
        function selectBackground()
        {
            console.log("getting image");
            var newBackground;
            function previewFile() {
            var preview = document.querySelector('img');
            var file    = document.querySelector('input[type=file]').files[0];
            var reader  = new FileReader();

            reader.addEventListener("load", function () {
            newBackground = reader.result;
            }, false);
            if (file) {
              reader.readAsDataURL(file);
            }
            
            }
            setBackground(newBackground);  
        }
        
        function setBackground(image)
        {
            console.log("setting background");
           //init of three.js 
           //init Three.js
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 400, 200, 0 );
            //set background color to white
            //scene.background = new THREE.Color(0xffffff);
           //set background
            scene.backgroundImage = new THREE.CanvasTexture(image);

            renderer = new THREE.WebGLRenderer();
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            document.body.appendChild( renderer.domElement );
            controls = new THREE.OrbitControls( camera, renderer.domElement );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
   var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
   var cube = new THREE.Mesh( geometry, material );
   scene.add( cube );

   camera.position.z = 2;
            animate();
        }
        var animate = function () {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
   };
    </script>
</body>
</html>

如果你能帮我解决这个问题就太好了。

Answer 1

你需要运行这个完整的页面，否则很难看到结果....

var scene;
var camera;
var renderer;

function selectBackground() {
  //console.log("getting image");
  var newBackground;

  function previewFile() {
    var preview = document.querySelector('img');
    var file   = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();

    reader.addEventListener("load", function() {
      //console.log("Loaded.");
      newBackground = reader.result;
      var img = document.createElement('img');
      //preview.src =
      img.src = reader.result;

      var tex = new THREE.Texture(img);
      tex.needsUpdate = true;
      setBackground(tex);
    }, false);
    if (file) { 
      reader.readAsDataURL(file);
    }
  }
  previewFile()
}

function setBackground(tex) {
  //console.log("setting background");
  //init of three.js 
  //init Three.js
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(10, 10, 10);
  //set background color to white
  //scene.background = new THREE.Color(0xffffff);
  //set background
  scene.background = tex; //new THREE.CanvasTexture(image);

  renderer = new THREE.WebGLRenderer();
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(800, 600); //window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  document.body.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  var cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 2;
  animate();
}
var animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>See your new car where you want it</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <input type="file" onchange="selectBackground()" multiple accept='image/*'><br>
  <!--img id="preview">preview</img-->

  <script src="https://threejs.org/build/three.min.js"></script>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

</body>

</html>

设置 Three.js 用户上传的背景

Set Three.js Background from user upload

javascript

user-input

background-image

three.js