Question

我正在制作一个有三个.js的国际象棋棋盘。我已经正确渲染了所有文件（stl loader），但我似乎无法将它们加载到正确的位置。就我想的那样，我把所有的东西都设置成一条直线，但它们显得交错。

这是我的代码：

function renderPiece(loader, piece, coor, color) {
  loader.load(piece, function(geometry) {
    var material = new THREE.MeshPhongMaterial({color:color})
    var mesh = new THREE.Mesh(geometry, material)
    chessBoard.objects.push(mesh)
    // mesh.position.set(coor[0], coor[1], coor[2])
    mesh.position.x = coor[0]
    mesh.position.y = coor[1]
    mesh.position.z = coor[2]
    mesh.scale.set(0.75,0.75, 0.75);
    chessBoard.scene.add(mesh)
  })
}

以下是带坐标的fn调用：

var oStlLoader = new THREE.STLLoader()

renderPiece(oStlLoader, pieces.rook, [0, 0, -210], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, -140], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, -70], 0x000000)
renderPiece(oStlLoader, pieces.king, [0, 0, 0], 0x000000)
renderPiece(oStlLoader, pieces.queen, [0, 0, 70], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, 140], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, 210], 0x000000)
renderPiece(oStlLoader, pieces.rook, [0, 0, 280], 0x000000)

Answer 1

您必须在地方创建具有XYZ零向量的3D模型，其中应该是您的国际象棋领域的中心。

之后，您可以使用更简单的方法来设置正确的位置，使用预定义的矢量数组：

var fields = [];
    fields['a1'] = new THREE.Vector3(10,0,10);
    fields['a2'] = new THREE.Vector3(10,0,20);
    fields['b1'] = new THREE.Vector3(20,0,10);

然后设置模型的位置：

mymodel.position.set(fields['a2'].x,fields['a2'].y,fields['a2'].z);
//or
mymodel.position = new THREE.Vector3.copy(fields['a2']);

如何在three.js中以直线排列物体

1 个答案: