Question

我试图将纹理映射到threejs中的正方形。

这是我的代码（coffeescript）

texture = new THREE.ImageUtils.loadTexture "my/texture/file.jpg"

myMaterial = new THREE.MeshBasicMaterial
  map:texture
  side:THREE.DoubleSide

squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0));
squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
squareGeometry.faces.push(new THREE.Face3(2, 3, 0));

myMesh = new THREE.Mesh(squareGeometry, myMaterial);
myMesh.position.set(1.5, 0.0, 4.0);
scene.add(myMesh);

当我在CanvasRenderer中呈现

时

Uncaught TypeError: Cannot read property 'x' of undefined

如果我尝试WebGLRenderer我

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

这是代码here的实时版本。

有谁知道我做错了什么？

Answer 1

事实证明使用PlaneGeometry更容易。以下代码有效。

texture = new THREE.ImageUtils.loadTexture textureFile

myMaterial = new THREE.MeshBasicMaterial
  map:texture


planeGeometry = new THREE.PlaneGeometry( 1, 1 );


myMesh = new THREE.Mesh(planeGeometry, myMaterial);
myMesh.position.set(-0.5, -0.5, 0.0);
scene.add(myMesh);

这里是live demo。

在三个js中应用纹理时出错：“无法读取未定义的属性'x'

1 个答案: