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“污染”全局范围，使用苛刻的术语，然后使用装饰器模式装饰THREE - 依赖于以正确的顺序加载的脚本而不用使用模块加载器系统。因此，为了简洁起见，我只需将一些必需装饰器的源代码复制粘贴到代码笔中，以确保它们以正确的顺序加载。您将需要向下滚动几千行到代码笔的底部，用于实例化平面的代码，绘制它并移动相机。）

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

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

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

Answer 1

我见过类似的行为，不是在three.js中，不是在带有webGL的浏览器中，而是使用directX和vvvv;仍然，我认为你只需要将PlaneBufferGeometry的widthSegments / heightSegments设置为更高的级别（＆gt; 4）并且你已经设置了！

当相机沿y轴向下移动时，为什么这个ThreeJs平面看起来有点扭结？

1 个答案: