代码之家 › 专栏 › 技术社区 › evgeni fotia

完全显示3.js sprite和planegometry图像,无论其大小如何

three.js javascript

evgeni fotia · 技术社区 · 6 年前

我想让这张图片完全显示它的尺寸

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>

1 回复 | 直到 6 年前

evgeni fotia 6 年前

对于 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>