ThreeJS|无法克隆对象的位置，因为它似乎未定义，但不应该是这种情况

Question

我的问题在于下面的代码，这可能看起来很多，但真正的问题在于代码中ERROR APPARS HERE注释之间的行。

我得到的错误消息如下：

未捕获类型错误：无法读取未定义的属性"position">

这是指以下行：

var originPoint=cubeinschiff.position.clone()；

你知道我的代码到底出了什么问题吗？请试着用最容易理解的方式解释它，因为我对Javascript和Threejs非常陌生，这个项目中的一些东西是从互联网上复制的。(如碰撞检测)

下面的完整代码：

(function() {
var camera, scene, renderer;
var enemies = [];
var enemiesreverse = [];
var enemiesy = [];
var enemiesyreverse = [];
var enemyspeed = 1;
var nBoxes = 10;
var listeallerobjekte = [];
var cubeinschiff;
var schifftest;
var collect = [];
var score = 0;
var highscore = 0;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
//adding Ship to the scene
var objLoader = new THREE.OBJLoader();
var material = new THREE.MeshBasicMaterial({
color: 'yellow',
side: THREE.DoubleSide
});
objLoader.load('schiff.obj', function(schiff) {
schiff.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
scene.add(schiff);
schiff.position.set(0, 0, 0);
schiff.scale.set(0.03, 0.03, 0.03);
schiff.rotateX(45);
schifftest = schiff;
scene.add(schifftest);
//adding cube below the ship to the scene(to get the collider detection working)
var cubeGeometry = new THREE.CubeGeometry(25, 25, 25, 1, 1, 1);
var wireMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00,
transparent: true,
opacity: 0.9
});
var cube = new THREE.Mesh(cubeGeometry, wireMaterial);
cubeinschiff = cube;
cube.scale.set(1, 1, 1);
scene.add(cubeinschiff);
cubeinschiff.position.x = 20;
});
//adding enemies to the scene
var radius = 1000;
var texture = new THREE.TextureLoader().load('texture/crate.jpg');
var geometry = new THREE.BoxBufferGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({
map: texture
});
for (var i = 0; i < nBoxes; i++) {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(radius / 2 - radius * Math.random(), radius / 2 - radius * Math.random(), 0.0);
enemies.push(mesh);
listeallerobjekte.push(mesh);
}
for (var i = 0; i < nBoxes; i++) {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(radius / 2 - radius * Math.random(), radius / 2 - radius * Math.random(), 0.0);
enemiesreverse.push(mesh);
listeallerobjekte.push(mesh);
}
for (var i = 0; i < nBoxes; i++) {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(radius / 2 - radius * Math.random(), radius / 2 - radius * Math.random(), 0.0);
enemiesy.push(mesh);
listeallerobjekte.push(mesh);
}
for (var i = 0; i < nBoxes; i++) {
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.set(radius / 2 - radius * Math.random(), radius / 2 - radius * Math.random(), 0.0);
enemiesyreverse.push(mesh);
listeallerobjekte.push(mesh);
}
//Adding the stuff to collect to the scene (It is an Array because I need that for the Colliding Detection)
var material2 = new THREE.MeshBasicMaterial({
color: 0xFFFF00
});
var mesh2 = new THREE.Mesh(geometry, material2);
mesh2.position.set(500 / 2 - 500 * Math.random(), 500 / 2 - 500 * Math.random(), 0.0);
collect[0] = mesh2;
scene.add(collect[0]);
console.log("sammeln activated");
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
//Moving the Enemies
var radius = 1000;
for (var i = 0; i < enemies.length; i++) {
if (enemies[i].position.y < -500) {
enemies[i].position.set(radius / 2 - radius * Math.random(), 500, 0.0);
}
enemies[i].position.y -= enemyspeed;
}
for (var i = 0; i < enemiesreverse.length; i++) {
if (enemiesreverse[i].position.y > 500) {
enemiesreverse[i].position.set(radius / 2 - radius * Math.random(), -500, 0.0);
}
enemiesreverse[i].position.y += enemyspeed;
}
for (var i = 0; i < enemiesy.length; i++) {
if (enemiesy[i].position.x < -600) {
enemiesy[i].position.set(600, radius / 2 - radius * Math.random(), 0.0);
}
enemiesy[i].position.x -= enemyspeed;
}
for (var i = 0; i < enemiesyreverse.length; i++) {
if (enemiesyreverse[i].position.x > 600) {
enemiesyreverse[i].position.set(-600, radius / 2 - radius * Math.random(), 0.0);
}
enemiesyreverse[i].position.x += enemyspeed;
}
//Detecting Collisions
//ERROR APPEARS HERE
var originPoint = cubeinschiff.position.clone();

for (var vertexIndex = 0; vertexIndex < cubeinschiff.geometry.vertices.length; vertexIndex++) {
var localVertex = cubeinschiff.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4(cubeinschiff.matrix);
var directionVector = globalVertex.sub(cubeinschiff.position);
var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
var collisionResults = ray.intersectObjects(listeallerobjekte);
//What happnes if an enemy gets hit
if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
if (score > highscore) {
highscore = score;
document.getElementById("highscore").innerHTML = "Highscore: " + highscore;
}
score = 0;
document.getElementById("score").innerHTML = "Score: " + score;
schifftest.position.set(0, 0, 0);
cubeinschiff.position.set(20, 0, 0);
}
//What happens if you hit the cube that you need to collect for score
var collisionResults2 = ray.intersectObjects(collect);
if (collisionResults2.length > 0 && collisionResults2[0].distance < directionVector.length()) {
collect[0].position.set(500 / 2 - 500 * Math.random(), 500 / 2 - 500 * Math.random(), 0.0);
score += 1;
document.getElementById("score").innerHTML = "Score: " + score;
}
}
//Controls for the ship
$(document).keydown(function(e) {
if (e.keyCode == 87) {
schifftest.position.y += 0.05;
cubeinschiff.position.y += 0.05;
schifftest.rotation.y = 11;
}
if (e.keyCode == 83) {
schifftest.position.y -= 0.05;
cubeinschiff.position.y -= 0.05;
schifftest.rotation.y = 33;
}
if (e.keyCode == 65) {
schifftest.position.x -= 0.05;
cubeinschiff.position.x -= 0.05;
schifftest.rotation.y = 44;
}
if (e.keyCode == 68) {
schifftest.position.x += 0.05;
cubeinschiff.position.x += 0.05;
schifftest.rotation.y = 22;
}
});
//Dont allow the ship to move outside of the game
if (schifftest.position.x > 500) {
schifftest.position.x = -500;
cubeinschiff.position.x = -500 + 20;
}
if (schifftest.position.x < -500) {
schifftest.position.x = 500;
cubeinschiff.position.x = 500 + 20;
}
if (schifftest.position.y < -600) {
schifftest.position.y = 600;
cubeinschiff.position.y = 600;
}
if (schifftest.position.y > 600) {
schifftest.position.y = -600;
cubeinschiff.position.y = -600;
}
renderer.render(scene, camera);
}
})();

Answer 1

您可以执行for循环并执行array.prush(object[i])；然后是scene.add(object[i])；我还有这个

var abbc = ai2bcz[randur10b0eeezev];
var ac = ai2[randur10b0eeeze];
ac.position.x = abbc.position.x;
ac.position.y = abbc.position.y;
ac.position.z = abbc.position.z;