无论图像大小,我都希望图像完全显示
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>
答案 0 :(得分: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>