홈>
모든 다각형을 채우는 것이 실제입니까? 코드 펜 . 내가
ThreeGeoJSON
를 얻을 때
다각형, 외곽선 만 채울 수 없습니다. 또한 삼각 측량을 위해 이어 컷 을 시도했습니다.
drawThreeGeo(data, radius, 'sphere', {color: 'yellow' // I want to edit fill color of lands, not outline color})
- 답변 # 1
- 답변 # 2
각 국가를 별도의 지오메트리로 분할하고, 레이 캐스터를 사용하여 마우스가 어느 국가에 있는지 확인한 다음
material.color
를 변경해야합니다 . 이 예제에서는 오른쪽 하단에서 소스 코드를 사용하여 레이 캐스팅을 볼 수 있습니다. 이 예의 주요 내용은 다음과 같습니다.function onDocumentMouseMove( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } function render() { // find intersections raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( scene.children ); if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = intersects[ 0 ].object; INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); INTERSECTED.material.emissive.setHex( 0xff0000 ); } } else { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = null; } renderer.render( scene, camera ); }
관련 질문
- javascript : 줄 바꿈을 만들거나 태그 순수 JS로 HTML에서 문자열을 얻는 방법
- javascript : 메뉴를 열 때 CSS 전환을 추가하는 방법은 무엇입니까?
- javascript : 웹 사이트에 여전히 반영되고있는 하나의 악성 링크
- javascript : 글꼴 크기를 div 크기에 맞게 자동으로 조정하는 방법
- javascript : ScrollMagic은 프로그램 code에서 지연되지만 code 펜에서는 그렇지 않습니까?
- 이벤트 위임이있는 여러 요소의 JavaScript addEventListener
- javascript : 두 개의 텍스트 상자 값을 대시를 사용하여 소문자로 된 다른 텍스트 상자에 결합
- javascript : 그리드 구조를 유지하면서 CSS 그리드 레이아웃에서 원하지 않는 공백을 제거하는 방법
- javascript : iPhone 및 iPad와 같은 Apple 제품에서 볼 때 웹 사이트의 갤러리 뒤에 이미지가 표시되지만 다른 모든 장치에서는 정상적으로 표시됩니다.
- javascript : git 자동 완성이 설치되었는지 확인하는 방법
당신이 더 나은지도를 사용하는 것이 좋습니다 : countries.geojson
솔루션은 각 모양에 대해 다음 단계로 구성됩니다.
<올>삼각형을 만들 때 지구 주위로 구부러 질 수 있도록 모양 안에 꼭짓점을 넣습니다.
https://github.com/mapbox/delaunator를 실행하여 삼각 메쉬를 빌드하십시오.
2 단계는 모양도외부에 삼각형을 생성합니다. 각 삼각형을 살펴보고 모양에 속하는지 여부를 결정하여 제거해야합니다.
convertCoordinates
로 삼각 망을 구부리십시오내 jsfiddle을 테스트 할 수 있습니다 : http://jsfiddle.net/mmalex/pg5a4132/
경고: 높은 수준의 입력 세부 사항으로 인해 속도가 매우 느립니다.
완벽한 해결책 :