要保持Three.js纹理的宽高比,可以使用以下代码示例:
// 创建纹理对象
var texture = new THREE.TextureLoader().load('texture.png');
// 等待纹理加载完成后执行
texture.onload = function() {
// 获取纹理的宽高比
var aspectRatio = texture.image.width / texture.image.height;
// 创建一个平面几何体
var geometry = new THREE.PlaneGeometry(1, 1 / aspectRatio);
// 创建一个材质,并将纹理赋值给材质
var material = new THREE.MeshBasicMaterial({ map: texture });
// 创建一个网格对象
var mesh = new THREE.Mesh(geometry, material);
// 添加网格对象到场景中
scene.add(mesh);
};
// 渲染场景
function render() {
// 更新纹理的宽高比
texture.needsUpdate = true;
// 渲染场景
renderer.render(scene, camera);
}
在上述代码中,我们首先使用THREE.TextureLoader
加载纹理图像,然后在纹理加载完成后获取纹理的宽高比。接下来,我们使用THREE.PlaneGeometry
创建一个平面几何体,并根据纹理的宽高比设置几何体的宽高比。然后,我们创建一个THREE.MeshBasicMaterial
材质,并将纹理赋值给材质的map
属性。最后,我们根据几何体和材质创建一个网格对象,并将其添加到场景中。
在渲染循环中,我们更新纹理的宽高比,并通过将texture.needsUpdate
设置为true
来告知Three.js更新纹理。然后,我们使用renderer.render
方法渲染场景。请确保在你的实际代码中使用正确的场景、相机和渲染器对象。