In addition to my question last night. I’m rendering with LineDashMaterial and I have very strong graininess and can’t see the dashed lines. Here is the code for creating a scene and line:
const ThreeSceneComponent = () => {
const cesium = useCesium();
const threeContainer = document.getElementById("threeContainer");
const threeScene = new Scene();
const threeCamera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 5500000);
const threeRenderer = new WebGLRenderer({ alpha: true, antialias: true, depth: false, powerPreference: "high-performance", precision: 'lowp' });
threeRenderer.setPixelRatio(window.devicePixelRatio);
const dummy = new Object3D()
const etDummy = new Object3D()
const aGroup = new Group();
const aInstancedGroup = new Group();
const etGroup = new Group();
const etInstancedGroup = new Group();
const wallAGroup = new Group();
const wallEtGroup = new Group();
const threeGltfLoader = new GLTFLoader();
const threeImageLoader = new TextureLoader();
let geometry = new PlaneGeometry(35, 35);
let etGeometry = geometry.clone()
let material = new MeshBasicMaterial();
let etMaterial = material.clone();
const raycaster = new Raycaster();
const mouse = new Vector2();
aGroup.name = DataSourceNames.A;
etGroup.name = DataSourceNames.Et;
wallAGroup.name = DataSourceNames.AWall;
wallEtGroup.name = DataSourceNames.EtWall;
threeScene.add(aGroup);
threeScene.add(wallAGroup);
threeScene.add(etGroup);
threeScene.add(wallEtGroup);
threeRenderer.setSize(window.innerWidth, window.innerHeight);
threeContainer?.appendChild(threeRenderer.domElement);
let controls = new OrbitControls( threeCamera, threeRenderer.domElement );
controls.enableDamping = true;
controls.minDistance = 1000;
controls.maxDistance = 5000000;
const imageUrls = getUrlsFromObject(_URLS)
loadImages(imageUrls).then(images => {
material.side = DoubleSide
material.transparent = true
material.map = new Texture(images);
material.onBeforeCompile = shader => {
shader.uniforms.atlasSize = { value: new Vector2(98, 1) };
shader.vertexShader = `
uniform vec2 atlasSize;
attribute float cameraHeight;
attribute vec2 uvOffset;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
`#include <uv_vertex>
vMapUv = ( mapTransform * vec3( (MAP_UV + uvOffset) / atlasSize, 2 ) ).xy;
`
).replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
transformed *= cameraHeight;
`
);
};
material.needsUpdate = true;
})
loadImages(imageUrls).then(images => {
etMaterial.side = DoubleSide
etMaterial.transparent = true
etMaterial.map = new Texture(images);
etMaterial.onBeforeCompile = shader => {
shader.uniforms.atlasSize = { value: new Vector2(98, 1) };
shader.vertexShader = `
uniform vec2 atlasSize;
attribute float cameraHeight;
attribute vec2 uvOffset;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
`#include <uv_vertex>
vMapUv = ( mapTransform * vec3( (MAP_UV + uvOffset) / atlasSize, 2 ) ).xy;
`
).replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
transformed *= cameraHeight;
`
);
};
etMaterial.needsUpdate = true;
})
const etInstanceMesh = new InstancedMesh(etGeometry, etMaterial, 10000);
etInstanceMesh.name = DataSourceNames.EtInstancedTexture;
etInstancedGroup.name = DataSourceNames.EthalonInstanced;
etInstancedGroup.add(ethalonInstanceMesh);
const aInstanceMesh = new InstancedMesh(geometry, material, 10000);
aInstanceMesh.name = DataSourceNames.AInstancedTexture;
aInstancedGroup.name = DataSourceNames.AInstanced
aInstancedGroup.add(aInstanceMesh)
const three = {
air: {
geometry: geometry,
material: material,
group: airGroup,
mesh: airInstancedGroup,
wall: wallAirGroup,
dummy: dummy,
select: null
},
ethalon: {
geometry: etGeometry,
material: etMaterial,
group: ethalonGroup,
mesh: ethalonInstancedGroup,
dummy: ethalonDummy,
wall: wallEthalonGroup,
select: null
},
core: {
scene: threeScene,
imageLoader: threeImageLoader,
gltfLoader: threeGltfLoader,
camera: threeCamera
}
}
aController.initThreeController(three)
etController.initThreeController(three)
let positionUp = Cartesian3.fromDegrees(37.0, 120.0, 100000.0);
let positionBottom = Cartesian3.fromDegrees(39.0, 125.0, 10000000.0);
const points = [];
const test = new Vector3(positionUp.x, positionUp.y, positionUp.z)
const test1 = new Vector3(positionBottom.x, positionBottom.y, positionBottom.z)
points.push(test);
points.push(test1);
const geometrys = new BufferGeometry().setFromPoints(points);
const materials = new LineDashedMaterial({
color: 0x00ffff,
dashSize: 3,
gapSize: 8,
linewidth: 12,
scale: 10
});
materials.side = DoubleSide;
const line = new Line(geometrys, materials);
line.computeLineDistances();
threeScene.add(line);
function updateThreeJS() {
threeCamera.fov = Cesium.Math.toDegrees(cesium.scene.camera.frustum.fovy);
threeCamera.updateProjectionMatrix();
const cesiumCamera = cesium.viewer.camera;
const cvm = cesiumCamera.viewMatrix;
const civm = cesiumCamera.inverseViewMatrix;
const cameraPosition = Cartesian3.fromElements(civm[12], civm[13], civm[14]);
const cameraDirection = new Cartesian3(-cvm[2], -cvm[6], -cvm[10]);
const cameraUp = new Cartesian3(cvm[1], cvm[5], cvm[9]);
const cameraPositionVec3 = new Vector3(cameraPosition.x, cameraPosition.y, cameraPosition.z);
const cameraDirectionVec3 = new Vector3(cameraDirection.x, cameraDirection.y, cameraDirection.z);
const cameraUpVec3 = new Vector3(cameraUp.x, cameraUp.y, cameraUp.z);
threeCamera.position.copy(cameraPositionVec3);
threeCamera.up.copy(cameraUpVec3);
threeCamera.lookAt(cameraPositionVec3.clone().add(cameraDirectionVec3));
const height = cesium.viewer.camera.positionCartographic.height;
updateCameraHeightAttribute(ethalonInstanceMesh, height);
updateCameraHeightAttribute(airInstanceMesh, height)
threeRenderer.render(threeScene, threeCamera);
}
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
threeRenderer.setSize(width, height);
threeCamera.aspect = width / height;
threeCamera.updateProjectionMatrix();
});
const onClick = (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, threeCamera);
const intersects = raycaster.intersectObjects(threeScene.children)
if (intersects.length < 1)
const intersectsObj = intersects.reduce((prev, curr) => (prev.distance < curr.distance ? prev : curr))
intersectsObj.object.parent.parent.name === DataSourceNames.Et ? stores.ethalonStore.setSelectedEntityID(intersectsObj.object.parent.parent.uuid) : stores.airStore.setSelectedEntityID(intersectsObj.object.parent.parent.uuid)
stores.mbuStore.setWindowPosition({ x: event.clientX, y: event.clientY })
};
document.addEventListener('contextmenu', onClick);
function renderLoop() {
requestAnimationFrame(renderLoop);
controls.update()
updateThreeJS();
}
renderLoop();
return <></>
};
export default ThreeSceneComponent;
