Can you try a repro on the playground? It would help us determine where the issue comes from.
1 Like
// eslint-disable-next-line @typescript-eslint/no-var-requires
import {
Engine,
Texture,
StandardMaterial,
CubicEase,
EasingFunction,
CubeTexture,
Light,
FreeCamera,
Scene,
PBRMetallicRoughnessMaterial,
SceneLoader,
Color4,
ShadowGenerator,
AssetsManager,
Color3,
ArcRotateCamera,
Vector3,
DirectionalLight,
HemisphericLight,
Mesh,
Animation,
DefaultLoadingScreen,
AbstractMesh,
Material,
PBRMaterial,
AbstractScene,
PBRBaseMaterial,
} from "@babylonjs/core";
import "@babylonjs/materials";
import "@babylonjs/loaders";
// eslint-disable-next-line @typescript-eslint/no-var-requires
import {
AbstractButton3D,
AdvancedDynamicTexture,
Button,
} from "@babylonjs/gui";
// eslint-disable-next-line @typescript-eslint/no-var-requires
import { createCameras } from "./api/camera/createCamera";
import { mouseEngagementMeter } from "./api/sence/pointer";
import {
positionViewport,
setCameraFOV,
handleResize,
setCameraViewport,
updateCamera,
} from "./api/camera/updateCamera";
import { BabylonProps } from "./constans/type";
import { highlightSelectedParts } from "./api/model/highlightModel";
import * as qs from "querystring";
import { configureShadows, addShadows, setShadows } from "./api/light/update";
import { createLight } from "./api/light/create";
import { createLoading } from "./utils/loading";
import {
loadTextureAsync,
loadModel,
setPosition,
} from "./api/model/loadModel";
import { CameraCoordinates } from "./schema/pointer";
import { cloneMaterial } from "./api/material";
import { ScreenshotTools } from "./api/tools/screenTools";
import { aliOSS } from "./utils/oss";
import { createSence } from "./api/sence";
import { SpotLight } from "@babylonjs/core";
// import * as LOADER from "@babylonjs/loaders";
// import * as GUI from "@babylonjs/gui";
type Data = {
[key: string]: any;
};
export default class Game {
public engine: Engine;
public scene: Scene;
public materialList: string[];
public camera: ArcRotateCamera;
public light: DirectionalLight;
public light2: HemisphericLight;
public shadowGenerator: ShadowGenerator;
public elem: HTMLCanvasElement;
public babylonProps: BabylonProps;
public currentMeshList: Array<AbstractMesh>;
constructor(elem: HTMLCanvasElement) {
//canvas
this.elem = elem;
this.engine = new Engine(elem, true);
this.scene = new Scene(this.engine);
// 设置颜色环境颜色
// var color = Color3.FromHexString("#dadee1");
// this.scene.clearColor = Color4.FromColor3(color, 1);
this.scene.clearColor = new Color4(0, 0, 0, 0);
this.scene.environmentIntensity = 1;
this.currentMeshList = [];
// this.babylonProps['engine'] = this.engine;
// this.scene.debugLayer.show();
}
_init(): void {
createLoading();
this.engine.displayLoadingUI();
this.createCamera();
this.light = createLight(this.scene);
this.createLight();
this.shadowGenerator = setShadows(this.light);
// this.loadModle();
this.effect();
this.scene.onPointerObservable.add(mouseEngagementMeter({}));
}
private effect(): void {
// this.scene.onBeforeRenderObservable.add(() => {});
this.scene.registerBeforeRender(() => {
if (this.scene.isReady()) {
setTimeout(() => {
this.engine.hideLoadingUI();
}, 1000);
} else {
this.engine.displayLoadingUI();
}
});
}
isReadyAll() {
let flag = this.scene.meshes?.every(
(mesh) => mesh.material && mesh.material.isReady(mesh)
);
return flag;
}
//创建灯光
createLight() {
this.light2 = new HemisphericLight(
"HemiLight",
new Vector3(1, 1, 0),
this.scene
);
let light3 = new HemisphericLight(
"HemiLight",
new Vector3(-4, 1, 1),
this.scene
);
var light4 = new SpotLight(
"spot1",
new Vector3(0, 1, 0),
new Vector3(0, 10, 0),
1,
2,
this.scene
);
light4.intensity = 1;
light4.angle = 3.6;
light3.intensity = 0.95;
//灯光强度
this.light2.intensity = 0.95;
}
async changeMaterial(name, id) {
let mesh = this.scene.getMeshByName(name) as any;
let data = (await this.get(
"https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/data/data.json"
)) as Data;
let list = data.data.reduce((result, current) => {
if (current.id == id) {
result.push(...current.list);
}
return result;
}, []);
try {
let albedoTexture = await loadTextureAsync(this.scene, list[0]);
let bumpTexture = await loadTextureAsync(this.scene, list[1]);
let metallicTexture = await loadTextureAsync(this.scene, list[2]);
mesh.material = new PBRMaterial("pbr", this.scene);
mesh.material.metallic = 0.0;
mesh.material.roughness = 0.75;
mesh.material.alpha = 1;
mesh.material.metallicF0Factor = 0;
mesh.material.albedoTexture = albedoTexture;
mesh.material.bumpTexture = bumpTexture;
mesh.material.metallicTexture = metallicTexture;
mesh.material.metallicTexture.useAmbientOcclusionFromMetallicTextureRed =
false;
mesh.material.metallicTexture.useRoughnessFromMetallicTextureGreen = true;
mesh.material.metallicTexture.metallic = 0;
const uScale = 16;
const vScale = 16;
mesh.material.albedoTexture.uScale = uScale;
mesh.material.albedoTexture.vScale = vScale;
mesh.material.bumpTexture.uScale = uScale;
mesh.material.bumpTexture.vScale = vScale;
mesh.material.metallicTexture.uScale = uScale;
mesh.material.metallicTexture.vScale = vScale;
mesh.material.invertNormalMapX = true;
mesh.material.invertNormalMapY = true;
} catch (error) {
console.log(error);
}
}
async loadModle(url) {
this.engine.loadingScreen.displayLoadingUI();
let response = await loadModel(url, this.scene);
this.engine.runRenderLoop(() => {
if (this.scene) {
this.scene.render();
}
});
return response;
// SceneLoader.LoadAssetContainer(
// url,
// "",
// this.scene,
// (container) => {
// this.scene.executeWhenReady(() => {
// if (!this.scene.activeCamera) {
// throw new Error(
// "No camera defined in the scene. Please add at least one camera in the project or create one yourself in the code."
// );
// }
// container.meshes.forEach((mesh: any) => {
// // mesh.position.x = -5;
// cloneMaterial(mesh);
// addShadows(this.shadowGenerator, mesh);
// // this.shadowGenerator.getShadowMap().renderList.push(mesh);
// });
// // this.scene.getMeshByName("shadow_plane").dispose();
// container.addAllToScene();
// this.engine.runRenderLoop(() => {
// if (this.scene) {
// this.scene.render();
// }
// });
// });
// },
// null,
// function (err) {
// console.log("err", err);
// }
// );
}
async _setPostion(
mesh: Mesh,
fromLeft: number,
fromTop: number,
meshWidthInPixels: number
) {
setPosition(
mesh,
fromLeft,
fromTop,
meshWidthInPixels,
this.camera,
this.scene
);
}
get(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.onload = function () {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(null);
}
};
xhr.onerror = function () {
reject(null);
};
xhr.send(null);
});
}
//选择高亮
highlightSelectedParts = (name, other) => {
let oherMesh = other.reduce((result, current) => {
result.push(this.scene.getMeshByName(current));
return result;
}, []);
highlightSelectedParts([this.scene.getMeshByName(name)], oherMesh);
};
//创建摄像头
createCamera() {
this.camera = createCameras(this.scene, this.elem);
this.babylonProps = {
scene: this.scene,
camera: this.camera,
engine: this.engine,
};
setCameraFOV(this.engine, this.camera);
}
createShot() {
this.setCameraViewport(100);
// enableStencilBuffer
setTimeout(() => {
ScreenshotTools.CreateScreenshotUsingRenderTarget(
this.engine,
this.camera,
{
width: 100,
height: 120,
precision: 10,
},
(data) => {
aliOSS(data, (res) => {
console.log("上传");
});
console.log(data);
}
);
}, 1200);
}
public setCameraViewport(val) {
setCameraViewport(this.camera, { viewportHeightPercent: val });
}
setCameraRotate(cameraCoordinates) {
updateCamera(cameraCoordinates);
}
setup(): void {
// this.scene.createDefaultCameraOrLight(false, true, true);
this._init();
}
run(): void {
this.engine.runRenderLoop(() => this.scene.render());
}
handleResize(babylonProps: BabylonProps, canvasRef) {
console.log(Engine.LastCreatedScene);
handleResize(babylonProps, canvasRef);
}
bindEvents(): void {
window.addEventListener("resize", () => {
this.handleResize(this.babylonProps, { current: this.elem });
// this.engine.resize()
});
}
}
@haoguang_shen this is way to much code and impossible to go through in the forum.
We need a small repro in the playground targeting the issue in order to efficiently help.
1 Like
Is the github address okay?
This would still require anyone trying to help to go through your entire project and understand what is project specific code and what is actually related to graphics. One of the first steps of problem solving is always trying reproduce the behavior in the simplest way, which many times instantly leads to discovering the problem. I recommend trying the Babylon.js Playground (babylonjs.com) first and seeing if it happens there. If not, since your code seems to use react, I would try CodeSandbox: Online Code Editor and IDE for Rapid Web Development.
1 Like
This is still your entire apps which is way too big for a simple bug repro 
Would be really great if you could isolate the issue ?
1 Like
ok, Ok i try again
1 Like
Hi @haoguang_shen just checking if you still have this problem and if so, if you can provide us with a playground repro so we can help you further.