I am creating a heatmap using the function below:
createHeatmap = () => {
const parentElement = this.containerCanvas;
const canvasH = document.createElement('canvas');
canvasH.id = 'heightmap';
canvasH.width = 256;
canvasH.height = 200;
canvasH.style.position = 'absolute';
canvasH.style.left = '0px';
canvasH.style.zIndex = '9999999999';
canvasH.style.backgroundColor = '#000000'; // Set your desired background color here
parentElement.append(canvasH);
const canvasG = document.createElement('canvas');
canvasG.id = 'heightgrd';
canvasG.width = 64;
canvasG.height = 200;
canvasG.style.position = 'absolute';
canvasG.style.left = '257px';
canvasG.style.zIndex = '9999999999';
canvasG.style.backgroundColor = '#e33a3a'; // Set your desired background color here
parentElement.append(canvasG);
const ctxH = canvasH.getContext('2d');
const ctxG = canvasG.getContext('2d');
const heightMap = new THREE.CanvasTexture(canvasH);
const gradientMap = new THREE.CanvasTexture(canvasG);
this.createHeightMap(ctxH, heightMap);
this.createGradMap(ctxG, gradientMap);
this.setupShader(heightMap, gradientMap);
canvasG.addEventListener("click", ()=>{
this.createGradMap(ctxG, gradientMap);
this.setupShader(heightMap, gradientMap);
}, false);
canvasH.addEventListener("click", () => {
this.createHeightMap(ctxH, heightMap);
this.setupShader(heightMap, gradientMap);
if (this.selectedFloor){
console.log(`808 -- this.floorsCache[this.selectedFloor] --->`, this.floorsCache[this.selectedFloor].size)
}
}, false);
};
createHeightMap = (ctx:any, heightMap:any) => {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 256, 256);
for (let i = 0; i < 100; i++) {
const x = Math.floor(Math.random() * 255);
const y = Math.floor(Math.random() * 255);
const radius = 50;
const grd = ctx.createRadialGradient(x, y, 1, x, y, radius);
const h8 = Math.floor(Math.random() * 255);
grd.addColorStop(0, 'rgb(' + h8 + ',' + h8 + ',' + h8 + ')');
grd.addColorStop(1, 'transparent');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 256, 256);
}
heightMap.needsUpdate = true;
this.camera.updateMatrixWorld(true)
this.scene.updateMatrixWorld(true)
};
createGradMap = (ctx:any, gradientMap:any) => {
console.log('grad');
const grd = ctx.createLinearGradient(0, 255, 0, 0);
const colorAmount = 3 + THREE.MathUtils.randInt(0, 3);
const colorStep = 1 / colorAmount;
for (let i = 0; i <= colorAmount; i++) {
const r = THREE.MathUtils.randInt(0, 255);
const g = THREE.MathUtils.randInt(0, 255);
const b = THREE.MathUtils.randInt(0, 255);
grd.addColorStop(colorStep * i, 'rgb(' + r + ',' + g + ',' + b + ')');
}
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 64, 256);
gradientMap.needsUpdate = true;
this.camera.updateMatrixWorld(true)
this.scene.updateMatrixWorld(true)
};
setupShader = (canvasH:any, canvasG:any) => {
const heatVertex = `
uniform sampler2D heightMap;
uniform float heightRatio;
uniform float heightBias;
varying vec2 vUv;
varying float hValue;
void main() {
vUv = uv;
vec3 pos = position;
hValue = texture2D(heightMap, vUv).r;
pos.y = hValue * heightRatio;
pos.y += heightBias;
vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
gl_PointSize = 30. * (1. / - mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
`;
const heatFragment = `
uniform sampler2D gradientMap;
varying float hValue;
void main() {
float v = clamp(hValue, 0., 1.);
vec3 col = texture2D(gradientMap, vec2(0, v)).rgb;
gl_FragColor = vec4(col, 1.) ;
}
`;
// Use heightMap and gradientMap textures from canvas elements
const planeGeometry = new THREE.PlaneGeometry(39.29856, 16.026444, 500, 500);
planeGeometry.rotateX(-Math.PI * 0.5);
// planeGeometry.scale(1,0.001,1)
if(this.heat){
this.scene.remove(this.heat)
this.heat.geometry.dispose();
this.camera.updateMatrixWorld(true)
this.scene.updateMatrixWorld(true)
}
const heat = new THREE.Points(
planeGeometry,
new THREE.ShaderMaterial({
uniforms: {
heightMap: { value: canvasH },
heightRatio: { value: 1},
heightBias: { value: 0 },
gradientMap: { value: canvasG },
},
side: THREE.DoubleSide,
vertexShader: heatVertex,
fragmentShader: heatFragment,
depthTest: true,
depthWrite: true,
})
);
this.heat = heat
this.heat.renderOrder = 0
this.heat.material.isOrthographicCamera = true
this.camera.updateProjectionMatrix();
heat.material.needsUpdate = true;
this.scene.add(this.heat)
};
when rotating the camera (OrthographicCamera) at certain angles it cuts the view
my camera is configured this way
this.camera = new THREE.OrthographicCamera(
// Left
this.cameraWidth / -2,
// Right
this.cameraWidth / 2,
// Top
this.cameraHeight / 2,
// Bottom
this.cameraHeight / -2,
// Near
-320,
// Far
400
);
Could someone explain to me what could be happening please?