我目前正在使用THREE.js编写一个简单的游戏，其中圆环是障碍物，球体是化身。我最初只是设置了一个变量以创建可以正常工作的球体，然后添加了键代码，但是现在稍后在进度ive中尝试将其嵌入到类中，并且出现此错误消息：error message
下面是我的整个代码，领域类是289-382行： 我也想在它们的for循环中设置我的“ cloud”（obsticalelist4），但是他们在循环为什么呢？
var scene = new THREE.Scene(); // Create the scene and a camera to view it
//element.style.background-color;
// fogColor = new THREE.Color(0xCCCCCC); //Create colour of fog
// scene.background = fogColor;
// scene.fog = new THREE.Fog(fogColor, 0.25,30);
// Specify the portion of the scene visiable at any time (in degrees)
//var fieldOfView = 75;
// https://stackoverflow.com/questions/16177056/changing-three-js-background-to-transparent-or-other-color/31636198
var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0x87cefa ); //adding color to sky
//var renderer = new THREE.WebGLRenderer({ alpha: true });
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.5, 50 );
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 0, 1, 0 ); //default; light shining from top
directionalLight.castShadow = true; // default false
var ambientLight = new THREE.AmbientLight( 0x404040 );
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.bottom = -10;
directionalLight.shadow.left = -10;
directionalLight.shadow.right = 10;
directionalLight.shadow.mapSize.width = 512; // default
directionalLight.shadow.mapSize.height = 512; // default
directionalLight.shadow.camera.near = 0.5; // default
directionalLight.shadow.camera.far = 500; // default
scene.add( ambientLight, directionalLight );
var planeGeometry = new THREE.PlaneGeometry( 30, 500 );
var planeMaterial = new THREE.MeshNormalMaterial();
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
//var planeGeometry = new THREE.PlaneGeometry(0.05, 200, 320, 500);
plane.receiveShadow = true;
scene.add( plane );
plane.rotation.x = -3.14159 * 4.5/10;
scene.add(plane);
plane.position.x = 0;
plane.position.y = -8;
plane.position.z = 0;
camera.position.z = 15;
camera.position.y = 0;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
class Entity {
constructor(x,y,z, rate) {
this.collidable = true;
this.geometry = new THREE.TorusBufferGeometry( 2, 0.5, 10, 100 );
this.material = new THREE.MeshLambertMaterial( {color: 0xffff00} );
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.mesh.position.x = x
this.mesh.position.y = y
this.mesh.position.z = z
this.originalz = z;
// this.rate = rate;
this.speed = 0.2;
scene.add(this.mesh);
}
update() {
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.5){
this.mesh.position.z = this.originalz;
this.speed += 0.015; // speeds up torus each refresh of position
// }
}
}
Reset(){
super.reset();
}
}
var obstacleList = [];
var myTorus = new Entity(-10, 1, -160, -1);
var myTorus1 = new Entity(-5, 1, -30, -1);
var myTorus2 = new Entity(0, 1, -90, -1);
var myTorus3 = new Entity(0, 1, -120, -1);
var myTorus4 = new Entity(10, 1, -60, -1);
obstacleList.push(myTorus1, myTorus2, myTorus3, myTorus4, myTorus );
class Obstacle extends Entity {
constructor(x,y,z, rate) {
super(); // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
this.collidable = true;
this.geometry = new THREE.TorusBufferGeometry( 2, 0.5, 10, 100 );
this.material = new THREE.MeshLambertMaterial( {color: 0xFF0000} );
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.mesh.position.x = x;
this.mesh.position.y = y;
this.mesh.position.z = z;
this.origionalz = z;// this.rate = rate;
this.speed = 0.2;
scene.add(this.mesh);
}
update() {
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.mesh.position.z = this.origionalz;
this.speed += 0.15; // speeds up torus each refresh of position
super.update();
}
}
Reset(){
super.reset();
}
}
var obstacleList2 = [];
var Villian = new Obstacle(-10, 1, -160, -1);
var Villian2 = new Obstacle(-5, 1, -260, -1);
var Villian3 = new Obstacle(0, 1, -60, -1);
var Villian4 = new Obstacle(5, 1, -200, -1);
var Villian5 = new Obstacle(10, 1, -300, -1);
obstacleList2.push(Villian, Villian2, Villian3, Villian4);
class Service{
constructor(){
}
Update(){
}
};
function onDocumentKeyDown(event) {
var keyCode = event.keyCode;
keyboard.keys[keyCode]=true;
};
function onDocumentKeyUp(event) {
var keyCode = event.keyCode;
keyboard.keys[keyCode]=false;
};
class KeyboardService extends Service{
constructor(){
super();
document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keyup", onDocumentKeyUp, false);
this.keys=[];
}
Update(){
}
IsKeydown(keyCode){
return this.keys[keyCode];
}
};
class Cloud extends Entity {
constructor(x,y,z, rate) {
super();
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.geometry = new THREE.SphereGeometry( 2, 22, 52, -20);
this.material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.mesh.position.x = x
this.mesh.position.y = y
this.mesh.position.z = z
scene.add(this.mesh);
}
update() {
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.mesh.position.z = this.origionalz;
this.speed += 0.015; // speeds up torus each refresh of position
super.update();
}
}
Reset(){
super.reset();
}
}
var obstacleList3 = [];
var cloud = new Cloud(-20, 10, -10, -1);
var cloud1 = new Cloud(-22, 12, -10, -1);
var cloud2 = new Cloud(-20, 10, -17, -1);
var cloud3 = new Cloud(-22, 12, -19, -1);
var cloud9 = new Cloud(-19, 12, -21, -1);
var cloud4 = new Cloud(18, 10, -10, -1);
var cloud5 = new Cloud(22, 12, -10, -1);
var cloud6 = new Cloud(20, 10, -19, -1);
var cloud7 = new Cloud(22, 12, -21, -1);
var cloud8 = new Cloud(19, 12, -21, -1);
var cloud10 = new Cloud(24, 10, -12, -1);
//var cloud11 = new Cloud(24, 10, -10, -1);
//cloud = new Cloud(-20, 10, -20, -1);
var cloud11 = new Cloud(-22, 12, -20, -1);
var cloud12 = new Cloud(-20, 10, -27, -1);
var cloud13 = new Cloud(-22, 12, -29, -1);
var cloud19 = new Cloud(-19, 12, -31, -1);
var cloud14 = new Cloud(18, 10, -20, -1);
var cloud15 = new Cloud(22, 12, -20, -1);
var cloud16 = new Cloud(20, 10, -29, -1);
var cloud17 = new Cloud(22, 12, -31, -1);
var cloud18 = new Cloud(19, 12, -31, -1);
var cloud20 = new Cloud(24, 10, -22, -1);
obstacleList3.push(cloud, cloud1, cloud2, cloud3, cloud4, cloud5, cloud6, cloud7, cloud8, cloud9, cloud10, cloud11, cloud12, cloud13, cloud14, cloud15, cloud16, cloud17, cloud18, cloud19, cloud20);
class sphere{
constructor(x,y,z, rate) {
// this.mesh.castShadow = true;
// this.mesh.receiveShadow = true;
this.collidable = false;
var geometry1 = new THREE.SphereGeometry( 1, 22, 52, -20);
var material1 = new THREE.MeshPhongMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( this.geometry, this.material );
this.mesh.position.x = x
this.mesh.position.y = y
this.mesh.position.z = z
scene.add(this.mesh);
}
update() {
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.mesh.position.z = this.origionalz;
this.speed += 0.015; // speeds up torus each refresh of position
}
if ( this.CollidedWithObstacle()){
console.log("BANG");
//this.sheild --- BANG---
}
}
Move(){
function onDocumentKeyDown(event) {
var keyCode = event.keyCode;
if ( keyCode == 87 ) { //up
sphere.position.y += 0.5;}
else if (keyCode == 83) { //down
sphere.position.y -= 0.5;
} else if (keyCode == 65) { //left
sphere.position.x -= 0.5;
} else if (keyCode == 68) { // right
sphere.position.x += 0.5;
} else if (keyCode == 32) { //space = return to centre
sphere.position.x = 0.0;
sphere.position.y = 0.0;
sphere.position.z = 0.0;
}
}
}
DistanceTo(x,z) {
let dist = Math.abs ( Math.sqrt(
(( this.mesh.position.x - x)* (this.mesh.position.x - x ))+
((this.mesh.position.z - z)* (this.mesh.position.z - z ))));
return dist;
}
IsCollidedWith(that){
let collidedWith = (this.size + that.size) > this.DistanceTo(that.mesh.position.x, that.mesh.position);
return collidedWith;
}
CollidedWithObstacle (){
for(var n=0; n<obstacle.length; n++){
if (obstacleList[n].collidable == true){
if (this.IsCollidedWith(obstacleList[n])==true){
return true;
}
}
}
return false;
}
Reset(){
}
}
var obstacleList4 = [];
var ball = new sphere( 1, 22, 52, -20);
//var ball1 = new sphere( 3, 22, 52, -20);
obstacleList4.push(ball);
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
for (let i = 0; i < obstacleList.length; i++){
obstacleList[i].update();
}
for (let i = 0; i < obstacleList2.length; i++){
obstacleList2[i].update();
}
for (let i = 0; i < obstacleList3.length; i++){
obstacleList3[i].update();
}
// for (let i = 0; i < obstacleList4.length; i++){
// obstacleList4[i].update();
// }
}
animate();