这是我用来实现Torus和Sphere游戏的基本THREE.js代码。我正要检测球体和圆环之间的碰撞。
如前所述，它显示错误消息Uncaught TypeError：
无法读取未定义的属性“位置”。
@第130行- this.mesh.position.z + = this.rate; // this.rate;
＆@ 523行-障碍物[i] .Update（）;
为什么this.mesh不正确？另外，为什么我的for循环不循环我的云？
//var scene = new THREE.Scene(); // Create the scene and a camera to view it`enter code here`
//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 listener = new THREE.AudioListener();
// camera.add( listener );
// var sound = new THREE.Audio( listener );
// var audioLoader = new THREE.AudioLoader();
// audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
// sound.setBuffer( buffer );
// sound.setLoop( true );
// sound.setVolume( 0.5 );
// sound.play();
// });
var objects = [];
var obstacles = [];
var renderer = new THREE.WebGLRenderer();
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 );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
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.castShadow = false;
plane.receiveShadow = true;
scene.add( plane );
plane.rotation.x = -3.14159 * 0.5;
scene.add(plane);
plane.position.x = 0;
plane.position.y = 30;
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() {
}
Update() {
}
Reset() {
}
}
class Ring1 extends Entity{
Constructor() {
// super();
this.collidable = true;
this.size = 5;
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 = 10;
this.mesh.position.y = 20;
this.mesh.position.z = -50;
//
// this.originalz = z;
// this.rate = rate;
this.speed = 0.2;
scene.add(this.mesh);
}
Update() {
super.Update();
// console.log("oops");
this.mesh.position.z += this.rate;//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();
}
}
for (i =0; i <3; i++){
var Donuts = new Ring1();
obstacles.push(Donuts);
}
var obstacleList = [];
var myTorus = new Ring1(-10, 1, -160, -1);
var myTorus1 = new Ring1(-5, 1, -30, -1);
var myTorus2 = new Ring1(0, 1, -90, -1);
var myTorus3 = new Ring1(0, 1, -120, -1);
var myTorus4 = new Ring1(10, 1, -60, -1);
obstacleList.push(myTorus1, myTorus2, myTorus3, myTorus4, myTorus );
class Obstacle extends Entity {
Constructor(x,y,z, rate) {
//super();
this.size = 5; // 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.ring = new THREE.Mesh( this.geometry, this.material );
this.ring.castShadow = true;
this.ring.receiveShadow = true;
this.ring.position.x = x;
this.ring.position.y = y;
this.ring.position.z = z;
this.origionalz = z;// this.rate = rate;
this.speed = 0.2;
scene.add(this.ring);
}
Update() {
this.ring.position.z += this.speed;//this.rate;
if(this.ring.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.ring.position.z = this.origionalz;
this.speed += 0.025; // 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, Villian5);
class Service{ //like the idea of manager - they set tasks but dont do them personally
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{ // declliration of keyboard serive
Constructor(){
// super();
document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keyup", onDocumentKeyUp, false);
this.keys=[];
}
Update(){
}
IsKeydown(keyCode){
return this.keys[keyCode];
}
DocumentKeyDOwn(event){
var keyCode = event.keycode;
keyboard.keys[keyCode] = true;
}
DocumentKeyUp(event){
var keyCode = event.keyCode;
keybaord.key[keycode] = false;
}
};
var keyboard = new KeyboardService();
class Clouds extends Entity {
Constructor(x,y,z, rate) {
// super();
//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.material = new THREE.MeshLambert({color:0xffffff});
this.geometry = new THREE.Geometry();
this.cloud1 = new THREE.SphereGeometry(7,3,2); //indiviual cloud
this.cloud1.translate(-9,0,0);
this.geometry.merge(this.cloud1)
this.cloud2 = new THREE.SphereGeometry(9,3,2);
this.cloud2.translate(0,0,0);
this.geometry.merge(this.cloud2)
this.cloud3 = new THREE.SphereGeometry(7,3,2);
this.cloud3.translate(9,0,0);
this.geometry.merge(this.cloud3)
this.cloud = new THREE.Mesh(this.geometry,this.material);
this.cloud.position.x = 10;
this.cloud.position.y = 20;
this.cloud.position.z = -20; //whole cloud meshed group positions
//PUT GET RANDOM
//this.mesh.position.x = x
//this.mesh.position.y = y
//this.mesh.position.z = z
// this.mesh.castShadow = true;
// this.mesh.receiveShadow = true;
scene.add(this.cloud);
}
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
document.getElementById('hud_distance').innerHTML = (this.mesh.position.z/1000).toFixed(2) + " km";
super.update();
}
}
Reset(){
super.reset();
}
}
//for (i = 0; i < 3; i++){ //UNCOMMENT & ADD GET RADNOM TO LINE 300
//var clouds = new Clouds
// objects.push(cloud)
//}
//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 extends Entity{
constructor(x,y,z, rate) {
console.log("SPHERE CONS");
super();
this.collidable = false;
this.geometry1 = new THREE.SphereGeometry( 1, 22, 52, 0);
this.material1 = new THREE.MeshPhongMaterial( {color: 0xffff00} );
this.mesh = new THREE.Mesh( this.geometry1, this.material1 );
this.mesh.position.x = x
this.mesh.position.y = y
this.mesh.position.z = z
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.speed = rate;
this.speed = 0.0;
//this.origionalz = z;
scene.add(this.mesh);
}
update() {
// console.log("ball");
// console.log(this.mesh.position.x);
// console.log(this.mesh.position.y);
// console.log(this.mesh.position.z);
if (keyboard.IsKeydown(38) == true) {
this.mesh.position.y += 0.25;
}
if (keyboard.IsKeydown(40) == true) {
this.mesh.position.y -= 0.25;
}
if (keyboard.IsKeydown(37) == true) {
this.mesh.position.x -= 0.25;
}
if (keyboard.IsKeydown(39) == true) {
this.mesh.position.x += 0.25;
}
if (keyboard.IsKeydown(32) == true) {
this.mesh.position.x = 0;
this.mesh.position.y = 0;
this.mesh.position.z = 0;
}
if ( this.CollidedWithObstacle())
{
console.log(" ----- CRASH ---- ");
}
// {
// 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;
// }
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if sphere reaches 0.3 of z axis then return to origional position
this.mesh.position.z = this.origionalz;
// this.speed += 0.015; // speeds up sphere each refresh of position
}
if ( this.CollidedWithObstacle()){
console.log("BANG");
//this.sheild --- BANG---
}
}
Move(){
}
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.z);
return collidedWith;
}
CollidedWithObstacle (){
for(var n=0; n<obstacles.length; n++){
if (obstacles[n].collidable == true){
if (this.IsCollidedWith(obstacles[n])==true){
return true;
}
}
}
return false;
}
Reset(){
}
}
var obstacleList4 = [];
var ball = new Sphere( 0, 0, 0, -0.01);
//var ball1 = new sphere( 3, 22, 52, -20);
obstacleList4.push(ball);
var cloud = new Clouds;
var avatar = new Sphere;
var rings = new Ring1;
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();
}
cloud.Update(); //constantly pushing update
avatar.Update();
rings.Update();
}
for (let i = 0; i < obstacles.length; i++){
obstacles[i].Update();
}
for (let i = 0; i <objects.lenght; i++){
objects[i].update();
}
animate();