CODEWITHSUNDEEP
javascriptthree.js
evgeni fotia
evgeni fotia

Reputation: 4810

Show three.js sprite and PlaneGeometry image completely whatever its size

I would like the image to show completely whatever its size 

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>

Upvotes: 0

Views: 1332

Answers (1)

evgeni fotia
evgeni fotia

Reputation: 4810

For the sprite using OrthographicCamera would be the best approach.

As for the PlaneBufferGeometry calculating the right distance that should be between the camera and the near plane like so 

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

will resolute the problem.

PS: if plane.position.z != 0 you should add it to the camera position 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>

Upvotes: 1

Related Questions