三.js 图像纵横比答案

【问题标题】：THREE.js Image aspect ratio三.js 图像纵横比
【发布时间】：2022-04-04 22:22:08
【问题描述】：

我无法确定如何根据图像大小将 PlaneGeometry 设置为良好的纵横比。

var material = new THREE.MeshBasicMaterial({
        map : THREE.ImageUtils.loadTexture('img/bunny.png')
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20*.75), material);
plane.position.set(0, 10, -60)
scene.add(plane);

到目前为止，我已经尝试过一些工作，但我意识到我仍在平面上设置固定的宽度/高度。

我希望平面设置图像的大小，然后我可以缩小它。

【问题讨论】：

标签： three.js

【解决方案1】：

var planeGeom = new THREE.PlaneGeometry(20, 20);
var imgSrc = "https://upload.wikimedia.org/wikipedia/commons/5/5f/BBB-Bunny.png"
var mesh;
var tex = new THREE.TextureLoader().load(imgSrc, (tex) => {
  tex.needsUpdate = true;
  mesh.scale.set(1.0, tex.image.height / tex.image.width, 1.0);
});

var material = new THREE.MeshLambertMaterial({
  color: 0xffffff,
  map: tex
});
mesh = new THREE.Mesh(planeGeom, material);
scene.add(mesh);

//Working snippet is below...

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFFFF);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);

var planeGeom = new THREE.PlaneGeometry(20, 20);
var imgSrc = "https://upload.wikimedia.org/wikipedia/commons/5/5f/BBB-Bunny.png"
var mesh;
var tex = new THREE.TextureLoader().load(imgSrc, (tex) => {
  tex.needsUpdate = true;
  mesh.scale.set(1.0, tex.image.height / tex.image.width, 1.0);
});

var material = new THREE.MeshLambertMaterial({
  color: 0xffffff,
  map: tex
});
mesh = new THREE.Mesh(planeGeom, material);
scene.add(mesh);
renderer.setClearColor(0xdddddd, 1);


(function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
})();

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

【讨论】：

谢谢，了解它的去向。然而，图像的宽度似乎缩小了一点……基本上兔子的脸变得更瘦了。
我已经寻找这个解决方案一年多了。非常感谢

【解决方案2】：

接受的答案有效，但必须使用回调来设置宽度，因为加载器是异步的。现在也可以使用loadAsync 方法，IMO 使代码更具可读性：

const getImageRatioPlane = async () => {
    const texture = await new TextureLoader().loadAsync(imgSrc);
    const material = new MeshBasicMaterial({ map: texture });
    const geometry = new PlaneGeometry(texture.image.width, texture.image.height);

    const plane = new Mesh(geometry, material);
}

【讨论】：