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

时间:2017-01-09 19:04:09

标签: javascript jquery three.js

我的问题在于下面的代码,这可能看起来很多,但真正的问题在于代码中错误出现在这里的注释。

我得到的错误信息如下:

  

未捕获的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;
&#13;
&#13;

1 个答案:

答案 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;