带有纹理的three.js球体以错误的方式显示

Question

我使用three.js来渲染房间预览。当我移动相机看天花板时，我发现纹理呈现出错误的方式。

此图显示了我看到的内容：

但我应该看到这个：

以下代码可能出现问题：

var scene = new THREE.Scene();
var material = new THREE.MeshBasicMaterial();
var loader = textureLoader = new THREE.TextureLoader();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
var sphere = new THREE.SphereGeometry(150, 32, 32, 0, Math.PI * 2, 0, Math.PI);

leftSphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
material.map = loader.load('image.jpeg');
scene.add(new THREE.Mesh(sphere, material));

Answer 1

代码没有任何问题，它更像是一般问题。

很可能与SphereGeometry的构造方式有关。如果你打开线框并观察天顶，你会发现有很多非常密集的边缘会聚成一个点。我现在无法解释究竟发生了什么，但看起来纹理中的采样点在那时距离太近了。