我的问题在于下面的代码,这可能看起来很多,但真正的问题在于代码中错误出现在这里的注释。
我得到的错误信息如下:
未捕获的TypeError:无法读取属性' 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);
}
})();
&#13;
答案 0 :(得分:0)
你可以做一个 for 循环并做 array.push(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;