我正在尝试将一个开源项目编译到我的本地角度,它会引发以下错误
src / app / blu_src / items / item.ts(111,29)中的错误:错误TS2345:类型“ this”的参数不能分配给类型“ Item”的参数。 类型“项目”不可分配给类型“项目”。存在两种使用此名称的不同类型,但是它们是无关的。 类型具有私有属性“场景”的单独声明。
打字稿版本:2.7.2
代码是:
scene.ts
public removeItem(item: Item, dontRemove?: boolean) {
dontRemove = dontRemove || false;
// use this for item meshes
this.itemRemovedCallbacks.fire(item);
item.removed();
this.scene.remove(item);
if (!dontRemove) {
Utils.removeValue(this.items, item);
}
}
item.ts
private scene: Scene;
public remove() {
this.scene.removeItem(this);
};
实际代码为:
item.ts
import * as THREE from 'three';
import {Utils} from "../core/utils";
import {Model} from "../model/model";
import {Metadata} from "../items/metadata";
import {Scene} from "../model/scene";
/**
* An Item is an abstract entity for all things placed in the scene,
* e.g. at walls or on the floor.
*/
export abstract class Item extends THREE.Mesh {
/** */
private scene: Scene;
/** */
private errorGlow = new THREE.Mesh();
/** */
private hover = false;
/** */
private selected = false;
/** */
private highlighted = false;
/** */
private error = false;
/** */
private emissiveColor = 0x444444;
/** */
private errorColor = 0xff0000;
/** */
private resizable: boolean;
/** Does this object affect other floor items */
protected obstructFloorMoves = true;
/** */
protected position_set: boolean;
/** Show rotate option in context menu */
protected allowRotate = true;
/** */
public fixed = false;
/** dragging */
private dragOffset = new THREE.Vector3();
/** */
protected halfSize: THREE.Vector3;
geometry:any;
material:any;
castShadow:any;
receiveShadow:any;
position:any;
rotation:any;
scale:any;
constructor(protected model: Model, public metadata: Metadata, geometry: THREE.Geometry, material: THREE.MeshFaceMaterial, position: THREE.Vector3, rotation: number, scale: THREE.Vector3) {
super();
this.scene = this.model.scene;
this.geometry = geometry;
this.material = material;
this.errorColor = 0xff0000;
this.resizable = metadata.resizable;
this.castShadow = true;
this.receiveShadow = false;
this.geometry = geometry;
this.material = material;
if (position) {
this.position.copy(position);
this.position_set = true;
} else {
this.position_set = false;
}
// center in its boundingbox
this.geometry.computeBoundingBox();
this.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(
- 0.5 * (this.geometry.boundingBox.max.x + this.geometry.boundingBox.min.x),
- 0.5 * (this.geometry.boundingBox.max.y + this.geometry.boundingBox.min.y),
- 0.5 * (this.geometry.boundingBox.max.z + this.geometry.boundingBox.min.z)
));
this.geometry.computeBoundingBox();
this.halfSize = this.objectHalfSize();
if (rotation) {
this.rotation.y = rotation;
}
if (scale != null) {
this.setScale(scale.x, scale.y, scale.z);
}
};
/** */
public remove() {
this.scene.removeItem(this);
};
/** */
public resize(height: number, width: number, depth: number) {
var x = width / this.getWidth();
var y = height / this.getHeight();
var z = depth / this.getDepth();
this.setScale(x, y, z);
}
/** */
public setScale(x: number, y: number, z: number) {
var scaleVec = new THREE.Vector3(x, y, z);
this.halfSize.multiply(scaleVec);
scaleVec.multiply(this.scale)
this.scale.set(scaleVec.x, scaleVec.y, scaleVec.z);
this.resized();
this.scene.needsUpdate = true;
};
/** */
public setFixed(fixed: boolean) {
this.fixed = fixed;
}
/** Subclass can define to take action after a resize. */
protected abstract resized();
/** */
public getHeight = function () {
return this.halfSize.y * 2.0;
}
/** */
public getWidth = function () {
return this.halfSize.x * 2.0;
}
/** */
public getDepth = function () {
return this.halfSize.z * 2.0;
}
/** */
public abstract placeInRoom();
/** */
public initObject = function () {
this.placeInRoom();
// select and stuff
this.scene.needsUpdate = true;
};
/** */
public removed() {
}
/** on is a bool */
public updateHighlight() {
var on = this.hover || this.selected;
this.highlighted = on;
var hex = on ? this.emissiveColor : 0x000000;
console.log("printing the this.material",this.material);
(<THREE.MeshFaceMaterial>this.material).forEach((material) => {
// TODO_Ekki emissive doesn't exist anymore?
(<any>material).emissive.setHex(hex);
});
}
/** */
public mouseOver() {
this.hover = true;
this.updateHighlight();
};
/** */
public mouseOff() {
this.hover = false;
this.updateHighlight();
};
/** */
public setSelected() {
this.selected = true;
this.updateHighlight();
};
/** */
public setUnselected() {
this.selected = false;
this.updateHighlight();
};
/** intersection has attributes point (vec3) and object (THREE.Mesh) */
public clickPressed(intersection) {
this.dragOffset.copy(intersection.point).sub(this.position);
};
/** */
public clickDragged(intersection) {
if (intersection) {
this.moveToPosition(
intersection.point.sub(this.dragOffset),
intersection);
}
};
/** */
public rotate(intersection) {
if (intersection) {
var angle = Utils.angle(
0,
1,
intersection.point.x - this.position.x,
intersection.point.z - this.position.z);
var snapTolerance = Math.PI / 16.0;
// snap to intervals near Math.PI/2
for (var i = -4; i <= 4; i++) {
if (Math.abs(angle - (i * (Math.PI / 2))) < snapTolerance) {
angle = i * (Math.PI / 2);
break;
}
}
this.rotation.y = angle;
}
}
/** */
public moveToPosition(vec3, intersection) {
this.position.copy(vec3);
}
/** */
public clickReleased() {
if (this.error) {
this.hideError();
}
};
/**
* Returns an array of planes to use other than the ground plane
* for passing intersection to clickPressed and clickDragged
*/
public customIntersectionPlanes() {
return [];
}
/**
* returns the 2d corners of the bounding polygon
*
* offset is Vector3 (used for getting corners of object at a new position)
*
* TODO: handle rotated objects better!
*/
public getCorners(xDim, yDim, position) {
position = position || this.position;
var halfSize = this.halfSize.clone();
var c1 = new THREE.Vector3(-halfSize.x, 0, -halfSize.z);
var c2 = new THREE.Vector3(halfSize.x, 0, -halfSize.z);
var c3 = new THREE.Vector3(halfSize.x, 0, halfSize.z);
var c4 = new THREE.Vector3(-halfSize.x, 0, halfSize.z);
var transform = new THREE.Matrix4();
//console.log(this.rotation.y);
transform.makeRotationY(this.rotation.y); // + Math.PI/2)
c1.applyMatrix4(transform);
c2.applyMatrix4(transform);
c3.applyMatrix4(transform);
c4.applyMatrix4(transform);
c1.add(position);
c2.add(position);
c3.add(position);
c4.add(position);
//halfSize.applyMatrix4(transform);
//var min = position.clone().sub(halfSize);
//var max = position.clone().add(halfSize);
var corners = [
{ x: c1.x, y: c1.z },
{ x: c2.x, y: c2.z },
{ x: c3.x, y: c3.z },
{ x: c4.x, y: c4.z }
];
return corners;
}
/** */
public abstract isValidPosition(vec3): boolean;
/** */
public showError(vec3) {
vec3 = vec3 || this.position;
if (!this.error) {
this.error = true;
this.errorGlow = this.createGlow(this.errorColor, 0.8, true);
this.scene.add(this.errorGlow);
}
this.errorGlow.position.copy(vec3);
}
/** */
public hideError() {
if (this.error) {
this.error = false;
this.scene.remove(this.errorGlow);
}
}
/** */
private objectHalfSize(): THREE.Vector3 {
var objectBox = new THREE.Box3();
objectBox.setFromObject(this);
return objectBox.max.clone().sub(objectBox.min).divideScalar(2);
}
/** */
public createGlow(color, opacity, ignoreDepth): THREE.Mesh {
ignoreDepth = ignoreDepth || false
opacity = opacity || 0.2;
var glowMaterial = new THREE.MeshBasicMaterial({
color: color,
blending: THREE.AdditiveBlending,
opacity: 0.2,
transparent: true,
depthTest: !ignoreDepth
});
var glow = new THREE.Mesh(<THREE.Geometry>this.geometry.clone(), glowMaterial);
glow.position.copy(this.position);
glow.rotation.copy(this.rotation);
glow.scale.copy(this.scale);
return glow;
};
}
scene.ts
import * as THREE from 'three';
import {Utils} from "../core/utils";
import {Item} from "../Items/item";
import {Factory} from "../items/factory";
import {Model} from "../model/model";
declare var $: any;
/**
* The Scene is a manager of Items and also links to a ThreeJS scene.
*/
export class Scene {
/** The associated ThreeJS scene. */
private scene: THREE.Scene;
/** */
private items: Item[] = [];
/** */
public needsUpdate = false;
/** The Json loader. */
private loader: THREE.JSONLoader;
/** */
private itemLoadingCallbacks = $.Callbacks();
/** Item */
private itemLoadedCallbacks = $.Callbacks();
/** Item */
private itemRemovedCallbacks = $.Callbacks();
/**
* Constructs a scene.
* @param model The associated model.
* @param textureDir The directory from which to load the textures.
*/
constructor(private model: Model, private textureDir: string) {
this.scene = new THREE.Scene();
// init item loader
this.loader = new THREE.JSONLoader();
this.loader.crossOrigin = "";
}
/** Adds a non-item, basically a mesh, to the scene.
* @param mesh The mesh to be added.
*/
public add(mesh: THREE.Mesh) {
this.scene.add(mesh);
}
/** Removes a non-item, basically a mesh, from the scene.
* @param mesh The mesh to be removed.
*/
public remove(mesh: THREE.Mesh) {
this.scene.remove(mesh);
Utils.removeValue(this.items, mesh);
}
/** Gets the scene.
* @returns The scene.
*/
public getScene(): THREE.Scene {
return this.scene;
}
/** Gets the items.
* @returns The items.
*/
public getItems(): Item[] {
return this.items;
}
/** Gets the count of items.
* @returns The count.
*/
public itemCount(): number {
return this.items.length
}
/** Removes all items. */
public clearItems() {
var items_copy = this.items
var scope = this;
this.items.forEach((item) => {
scope.removeItem(item, true);
});
this.items = []
}
/**
* Removes an item.
* @param item The item to be removed.
* @param dontRemove If not set, also remove the item from the items list.
*/
public removeItem(item: Item, dontRemove?: boolean) {
dontRemove = dontRemove || false;
// use this for item meshes
this.itemRemovedCallbacks.fire(item);
item.removed();
this.scene.remove(item);
if (!dontRemove) {
Utils.removeValue(this.items, item);
}
}
/**
* Creates an item and adds it to the scene.
* @param itemType The type of the item given by an enumerator.
* @param fileName The name of the file to load.
* @param metadata TODO
* @param position The initial position.
* @param rotation The initial rotation around the y axis.
* @param scale The initial scaling.
* @param fixed True if fixed.
*/
public addItem(itemType: number, fileName: string, metadata, position: THREE.Vector3, rotation: number, scale: THREE.Vector3, fixed: boolean) {
itemType = itemType || 1;
var scope = this;
var loaderCallback = function (geometry: THREE.Geometry, materials: THREE.Material[]) {
var item = new (Factory.getClass(itemType))(
scope.model,
metadata, geometry,
new THREE.MeshFaceMaterial(materials),
position, rotation, scale
);
item.fixed = fixed || false;
scope.items.push(item);
scope.add(item);
item.initObject();
scope.itemLoadedCallbacks.fire(item);
}
this.itemLoadingCallbacks.fire();
this.loader.load(
fileName,
loaderCallback,
undefined // TODO_Ekki
);
}
}