当相机沿 y 轴向下移动时，为什么这个 ThreeJs 平面会出现扭结？

Question

我有一个 THREE.PlaneBufferGeometry 的实例，我像这样应用图像纹理：

var camera, scene, renderer;
var geometry, material, mesh, light, floor;

scene = new THREE.Scene();

THREE.ImageUtils.loadTexture( "someImage.png", undefined, handleLoaded, handleError );
function handleLoaded(texture) {

  var geometry = new THREE.PlaneBufferGeometry(
    texture.image.naturalWidth,
    texture.image.naturalHeight,
    1,
    1
  );
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    overdraw: true
  });
  floor = new THREE.Mesh( geometry, material );
  floor.material.side = THREE.DoubleSide;
  scene.add( floor );

  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, texture.image.naturalHeight * A_BUNCH );
  camera.position.z = texture.image.naturalWidth * 0.5;
  camera.position.y = SOME_INT;
  camera.lookAt(floor.position);

  renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth,window.innerHeight);
  appendToDom();
  animate();
}

function handleError() {

  console.log(arguments);
}

function appendToDom() {

  document.body.appendChild(renderer.domElement);
}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene,camera);
}

这里是码笔：http://codepen.io/anon/pen/qELxvj?editors=001

( 注意：ThreeJs "pollutes" 全局作用域，使用一个苛刻的术语，然后使用装饰器模式装饰THREE——依靠脚本以正确的顺序加载没有使用模块加载器系统。因此，为了简洁起见，我只是将一些必需的装饰器的源代码复制粘贴到代码笔中，以确保它们以正确的顺序加载。你必须向下滚动几千行到代码笔的底部，以使用实例化平面、绘制平面和移动相机的代码。)

在代码笔中，我只是将平面平放在 x-y 轴上，直视 z 轴，就像它一样。然后，我慢慢地沿着y轴向下摇摄相机，不断将它指向平面。

正如您在代码笔中看到的那样，当相机沿负方向沿 y 轴移动时，平面上的纹理似乎在德克萨斯州西部附近形成扭结。

为什么？我怎样才能防止这种情况发生？

Answer 1

我见过类似的行为，不是在 three.js 中，不是在带有 webGL 的浏览器中，而是在带有 directX 和 vvvv 的浏览器中；尽管如此，我认为您只需要将 PlaneBufferGeometry 的 widthSegments/heightSegments 设置为更高级别 (>4) 就可以了！

当相机沿 y 轴向下移动时，为什么这个 ThreeJs 平面会出现扭结？

Why does this ThreeJs plane appear to get a kink in it as the camera moves down the y-axis?

three.js