javascript - 完全显示 Three.js sprite 和 PlaneGeometry 图像，无论其大小

Question

我希望图像能够完全显示，无论其大小

var src1 = "https://i.imgur.com/C9lWPeL.jpg",
  src2 = "https://i.imgur.com/a9zyCRt.jpg";

const src = src1;

var scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
loader.load(
  src,
  function(texture) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      color: 0xffffff
    });
    var imageWidth = spriteMaterial.map.image.width;
    var imageHeight = spriteMaterial.map.image.height;
    var camera = new THREE.PerspectiveCamera(80, imageWidth / imageHeight, 1, 1000);
    camera.position.z = 500;
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(1 * imageWidth, 1 * imageHeight, 1.0);
    sprite.position.set(0, 0, 0);
    scene.add(sprite);

    var geometry = new THREE.PlaneBufferGeometry(700, 700 * imageHeight / imageWidth, 0);
    var material = new THREE.MeshBasicMaterial({
      map: texture,
      color: 0xffffff
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 0, 0);
    //scene.add( plane );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(700, 700 * imageHeight / imageWidth);
    renderer.render(scene, camera);
    container.appendChild(renderer.domElement);
  },
);

<script src="https://threejs.org/build/three.js"></script>
<div id=container></div>

Answer 1

对于sprite，使用OrthographicCamera将是最好的方法。

至于PlaneBufferGeometry计算相机和近平面之间的正确距离，如下所示

var camera = new THREE.PerspectiveCamera(45, imageWidth / imageHeight, 0.001, 1000);
camera.position.z = halfHeight / Math.tan(Math.PI / 8);

将解决问题。

PS:如果plane.position.z != 0，您应该将其添加到相机位置camera.position.z +=plane.position.z

var src1 = "https://i.imgur.com/C9lWPeL.jpg",
  src2 = "https://i.imgur.com/a9zyCRt.jpg";

const src = src1;

var scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
loader.load(
  src,
  function(texture) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      color: 0xffffff
    });
    var imageWidth = spriteMaterial.map.image.width;
    var imageHeight = spriteMaterial.map.image.height;
    var width = 700,
      height = width * imageHeight / imageWidth,
      halfHeight = height / 2;


    /*var camera = new THREE.OrthographicCamera( imageWidth / - 2, imageWidth / 2, imageHeight / 2, imageHeight / - 2, 0, 1000 );
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set(1 * imageWidth, 1 * imageHeight, 1.0);
    sprite.position.set(0, 0, 0);
    scene.add( sprite );*/

    var camera = new THREE.PerspectiveCamera(45, imageWidth / imageHeight, 0.001, 1000);
    camera.position.z = halfHeight / Math.tan(Math.PI / 8);
    var geometry = new THREE.PlaneBufferGeometry( width, height, 0);
    var material = new THREE.MeshBasicMaterial({
      map: texture,
      color: 0xffffff
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 0, 0);
    scene.add(plane);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    container.appendChild(renderer.domElement);
  },
);

<script src="https://threejs.org/build/three.js"></script>
<div id=container></div>