Skip to content

Commit

Permalink
增加球体掩膜
Browse files Browse the repository at this point in the history
  • Loading branch information
@FengFengmomo
FengFengmomo committed Jul 18, 2024
1 parent b75e37c commit 101f5f3
Show file tree
Hide file tree
Showing 22 changed files with 5,614 additions and 17,700 deletions.
6,537 changes: 655 additions & 5,882 deletions build/wegeo.cjs
View file

Large diffs are not rendered by default.

6,539 changes: 656 additions & 5,883 deletions build/wegeo.js
View file

Large diffs are not rendered by default.

6,538 changes: 655 additions & 5,883 deletions build/wegeo.module.js
View file

Large diffs are not rendered by default.

1,694 changes: 1,694 additions & 0 deletions examples/js/THREEi_ONLY_SphereWithSomeHoles.js
View file

Large diffs are not rendered by default.

1,663 changes: 1,663 additions & 0 deletions examples/js/createhole.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions examples/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,14 @@ <h1><a href="">wegeo基于threejs</a></h1>
<div class="title">特效/边框线</div>
</a>
</div>
<div class="card selected">
<a href="./sphereEarth/mask/mask.html" target="viewer" onclick="init(this)">
<div class="cover">
<img src="screenshots/mask.png" loading="lazy" width="400">
</div>
<div class="title">特效/境界掩膜</div>
</a>
</div>
</div>
</div>

Expand Down
Binary file added examples/screenshots/mask.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
141 changes: 141 additions & 0 deletions examples/sphereEarth/mask/mask.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style></style>
</head>
<body>
<div style="float: left; position: absolute; top: 0px; left: 0px; z-index: 2;">
掩膜的设计主要是参考了<a href="https://github.com/hofk/THREEi.js">https://github.com/hofk/THREEi.js</a>这个代码，我将代码改成es module的形式了。
<p>其他在几何体添加孔洞的方法：</p>
<p>https://github.com/manthrax/THREE-CSGMesh 用于物体求交、减、加。</p>
<p>https://threejs.org/examples/#webgl_geometry_convex 和这个示例。</p>
<p>思路：通过境界经纬度构造ConvexGeometry几何体，然后再使用csg对球体和ConvexGeometry求减。</p>
<p>cesium也有相应的构造掩膜的方法，但我不知道他们怎么做的，哎！汗颜~~~！</p>
<p>如果有其他优雅的方式欢迎各位大佬讨论交流，或者提交pr。</p>
<p>境界服务的数据来自阿里的datav，如果境界有误请及时联系我进行修改删除，谢谢！</p>
</div>
<div id="mapContainer">

</div>
<!-- GUI -->
<!-- <div id="mapContainer">
<div id="map">
<canvas id="canvas" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></canvas>
</div>
<div id="layers">
<div>
<canvas id="canvas1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></canvas>
</div>
<div>
<canvas id="canvas2" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></canvas>
</div>
</div>
</div> -->

<!-- Code -->
<!-- <script src="./js/wegeo.js"></script> -->
<!-- "three": "../build/three.module.js", -->
<!-- "three/addons/": "../build/jsm/", -->
<!-- <script src="./js/THREEi_ONLY_SphereWithSomeHoles.js"></script> -->
<script type="importmap">
{
"imports": {
"three": "../../../build/three.module.js",
"three/addons/": "../../../build/jsm/",
"Geo": "../../../build/wegeo.module.js",
"THREEi":"../../js/createhole.js"
}
}
</script>

<script type="module">
// 需要全量构建geo，目前不能把threejs排除在外
import {WegeoMap,MapView, TianDiTuProvider, Config, BingMapsProvider, AngleUtils} from 'Geo';
import * as THREE from 'three';
import * as THREEi from 'THREEi';
let provider = new BingMapsProvider();
// 地名服务
// let nameprovider = new TianDiTuProvider({
// service:'cva_w',
// token: '588e61bc464868465169f209fe694dd0'
// });

// // map.addView(provider);
// let edgeprovider = new TianDiTuProvider({
// service:'ibo_w',
// token: '588e61bc464868465169f209fe694dd0'
// });
// Config.outLine.on = true;
const map = new WegeoMap();
map.addBaseSphereMap({
providers: [provider]
});
map.moveToByLL(44.266119,90.139228, 6371008);
window.onresize = () => { map.resize(); }
map.resize();
map.animate();
// 解析geojson
// const geojson = await fetch('./examples/data/xinjiang.json').then( res => res.json() );
let points = [];
await fetch('/examples/data/xinjiang.json').then(res => res.json())
.then(data => {
let features = data.features;

features.forEach(feature=>{
let properties = feature.properties;
let geometry = feature.geometry;
let type = feature.type;
let coordinates = geometry.coordinates;
let typeGeometry = geometry.type;
if (typeGeometry === "MultiPolygon") { // 目前暂时仅仅支持行政区划方向的数据进行解析
for(let multiPolygon of coordinates){
const shapePonit = [];
let polygon = multiPolygon[0]; // 每次取第一个图形，geojson里面是这样设置的
for(let point of polygon){
// 先维度后经度
let phi = AngleUtils.degToRad(point[0]);
let theta = AngleUtils.degToRad(90-point[1]);
shapePonit.push(theta);
shapePonit.push(phi);
}
points.push(shapePonit);
}
}
});
});

const g = new THREE.BufferGeometry( );
const parameters = {
// d: 509680, // rough side length of the triangles, radius calculated from d and div4
d: 403090, // rough side length of the triangles, radius calculated from d and div4
div4: 25, // division of the quarter of the great circle (orthodrome)
holes: points
// [
// // circular hole, 3 elements: [ theta, phi, div4Hole ], div4Hole <= div4
// // [ 1.57, -0.25, 9 ],
// // [ 0.44, 4.84, 18 ],
// // [ 1.23, 1.62, 11 ],
// // points hole,: array of points theta, phi, ... (last point is connected to first)
// [ 1.7,-1.2, 1.7,-2.1, 2.6,-2.1 ]
// ]
}

g.createSphereWithHoles = THREEi.createSphereWithHoles;
g.createSphereWithHoles( parameters ); // parameter object

const material = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, color: 0x450089, wireframe: false } );
const mesh = new THREE.Mesh( g, material );
material.transparent = true;
material.opacity = 0.5;
map.baseMap.add( mesh );
let scale =0.995;
// let scale =0.9939;
// let scale =0.99385;
mesh.scale.set( scale,scale,scale );


// map.addModelLayer('3dtiles', './s228_checkpoint_3dtiles/tileset.json');
</script>
</body>
</html>
91 changes: 77 additions & 14 deletions examples/wegeo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,40 +27,103 @@
<!-- <script src="./js/wegeo.js"></script> -->
<!-- "three": "../build/three.module.js", -->
<!-- "three/addons/": "../build/jsm/", -->
<!-- <script src="../build/three.js"></script> -->
<!-- <script src="./js/THREEi_ONLY_SphereWithSomeHoles.js"></script> -->
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "../build/jsm/",
"Geo": "../build/wegeo.module.js"
"Geo": "../build/wegeo.module.js",
"THREEi":"./js/createhole.js"
}
}
</script>

<script type="module">
// 需要全量构建geo，目前不能把threejs排除在外
import {WegeoMap,MapView, TianDiTuProvider, Config, BingMapsProvider} from 'Geo';
import {WegeoMap,MapView, TianDiTuProvider, Config, BingMapsProvider, AngleUtils} from 'Geo';
import * as THREE from 'three';
import * as THREEi from 'THREEi';
let provider = new BingMapsProvider();
// 地名服务
let nameprovider = new TianDiTuProvider({
service:'cva_w',
token: '588e61bc464868465169f209fe694dd0'
});
// let nameprovider = new TianDiTuProvider({
// service:'cva_w',
// token: '588e61bc464868465169f209fe694dd0'
// });

// map.addView(provider);
let edgeprovider = new TianDiTuProvider({
service:'ibo_w',
token: '588e61bc464868465169f209fe694dd0'
});
// // map.addView(provider);
// let edgeprovider = new TianDiTuProvider({
// service:'ibo_w',
// token: '588e61bc464868465169f209fe694dd0'
// });
// Config.outLine.on = true;
const map = new WegeoMap();
map.addBaseSphereMap({
providers: [provider,nameprovider, edgeprovider]
providers: [provider]
});

window.onresize = () => { map.resize(); }
map.resize();
map.animate();
// 解析geojson
// const geojson = await fetch('./examples/data/xinjiang.json').then( res => res.json() );
let points = [];
await fetch('./data/xinjiang.json').then(res => res.json())
.then(data => {
let features = data.features;

features.forEach(feature=>{
let properties = feature.properties;
let geometry = feature.geometry;
let type = feature.type;
let coordinates = geometry.coordinates;
let typeGeometry = geometry.type;
if (typeGeometry === "MultiPolygon") { // 目前暂时仅仅支持行政区划方向的数据进行解析
for(let multiPolygon of coordinates){
const shapePonit = [];
let polygon = multiPolygon[0]; // 每次取第一个图形，geojson里面是这样设置的
for(let point of polygon){
// 先维度后经度
let phi = AngleUtils.degToRad(point[0]);
let theta = AngleUtils.degToRad(90-point[1]);
shapePonit.push(theta);
shapePonit.push(phi);
}
points.push(shapePonit);
}
}
});
});

const g = new THREE.BufferGeometry( );
const parameters = {
// d: 509680, // rough side length of the triangles, radius calculated from d and div4
d: 403090, // rough side length of the triangles, radius calculated from d and div4
div4: 25, // division of the quarter of the great circle (orthodrome)
holes: points
// [
// // circular hole, 3 elements: [ theta, phi, div4Hole ], div4Hole <= div4
// // [ 1.57, -0.25, 9 ],
// // [ 0.44, 4.84, 18 ],
// // [ 1.23, 1.62, 11 ],
// // points hole,: array of points theta, phi, ... (last point is connected to first)
// [ 1.7,-1.2, 1.7,-2.1, 2.6,-2.1 ]
// ]
}

g.createSphereWithHoles = THREEi.createSphereWithHoles;
g.createSphereWithHoles( parameters ); // parameter object

const material = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, color: 0x450089, wireframe: false } );
const mesh = new THREE.Mesh( g, material );
material.transparent = true;
material.opacity = 0.5;
map.baseMap.add( mesh );
let scale =0.995;
// let scale =0.9939;
// let scale =0.99385;
mesh.scale.set( scale,scale,scale );


// map.addModelLayer('3dtiles', './s228_checkpoint_3dtiles/tileset.json');
</script>
</body>
Expand Down
12 changes: 9 additions & 3 deletions src/WegeoMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Layer } from './layers/Layer';
import {D3TilesLayer} from './layers/3DTilesLayer';
import { Element } from './utils/Element';
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'
import { OrbitControls } from './jsm/controls/OrbitControls';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import {BingMapsProvider} from './providers/BingMapsProvider';
import { Listener } from './listener/listener';
import { RaycasterUtils } from './raycaster/utils';
Expand Down Expand Up @@ -184,11 +184,17 @@ export class WegeoMap {
this.baseMap.moveToByCoords(coords);
}

moveToByLL(lat, lon){
/**
* 跳转到指定位置，用于球形地图
* @param {*} lat
* @param {*} lon
* @returns
*/
moveToByLL(lat, lon, distance = 384720){
if(!this.baseMap){
return;
}
this.baseMap.moveToByLL(lat, lon);
this.baseMap.moveToByLL(lat, lon, distance);
}

// 鼠标点击获取模型
Expand Down
2 changes: 1 addition & 1 deletion src/animation/Animate.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as TWEEN from '../jsm/libs/tween.module.js';
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
// import TWEEN from '@tweenjs/tween.js';
/**
* 相机移动控制
Expand Down
12 changes: 6 additions & 6 deletions src/effect/outline.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { EffectComposer } from '../jsm/postprocessing/EffectComposer.js';
import { RenderPass } from '../jsm/postprocessing/RenderPass.js';
import { ShaderPass } from '../jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from '../jsm/postprocessing/OutlinePass.js';
import { OutputPass } from '../jsm/postprocessing/OutputPass.js';
import { FXAAShader } from '../jsm/shaders/FXAAShader.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
import { Vector2 } from 'three';
import { Config} from '../environment/config.js';
// 上述几个包是做outline效果必须的几个包
Expand Down
6 changes: 3 additions & 3 deletions src/examples/3dtiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import {
MeshBasicMaterial
} from 'three';

import { OrbitControls } from '../jsm/controls/OrbitControls';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { Loader3DTiles } from 'three-loader-3dtiles';
import { TilesRenderer } from '3d-tiles-renderer';
import { GLTFLoader } from '../jsm/loaders/GLTFLoader.js';
import Stats from '../jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';

const queryParams = new URLSearchParams(document.location.search);

Expand Down
2 changes: 1 addition & 1 deletion src/examples/basic.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-nocheck

import {WebGLRenderer, Scene, Color, AmbientLight, PerspectiveCamera, LinearSRGBColorSpace} from 'three';
import {MapControls} from '../jsm/controls/MapControls.js';
import {MapControls} from 'three/examples/jsm/controls/MapControls.js';
import {MapView, BingMapsProvider, UnitsUtils} from '../main';

var canvas = document.getElementById('canvas');
Expand Down
4 changes: 2 additions & 2 deletions src/layers/3DTilesLayer.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// 多个canvas并没有id，只有父节点
import { Element } from "../utils/Element";
import {MapControls} from '../jsm/controls/MapControls.js';
import {MapControls} from 'three/examples/jsm/controls/MapControls.js';
import {UnitsUtils} from '../utils/UnitsUtils.js';
import { PerspectiveCamera, WebGLRenderer, Scene, Color, Raycaster, Vector3, Vector2, Clock } from 'three';
import * as TWEEN from '../jsm/libs/tween.module.js';
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
import {EffectOutline} from '../effect/outline';
import {Config} from '../environment/config';
import { Loader3DTiles } from 'three-loader-3dtiles';
Expand Down
8 changes: 4 additions & 4 deletions src/layers/Layer.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// 多个canvas并没有id，只有父节点
import { Element } from "../utils/Element";
import {MapControls} from '../jsm/controls/MapControls.js';
import { OrbitControls } from '../jsm/controls/OrbitControls';
import {MapControls} from 'three/examples/jsm/controls/MapControls.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import {UnitsUtils} from '../utils/UnitsUtils.js';
import { PerspectiveCamera, WebGLRenderer, Scene, Color, Raycaster,
Vector3, Vector2, ACESFilmicToneMapping, BoxGeometry, MeshBasicMaterial , Mesh, TextureLoader,
PMREMGenerator, MathUtils, AmbientLight, DirectionalLight, PointLight, MOUSE } from 'three';
import * as TWEEN from '../jsm/libs/tween.module.js';
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
import {EffectOutline} from '../effect/outline';
import {Config} from '../environment/config'
import BasLayer from "./basLayer";
import { Sky } from '../jsm/objects/Sky.js';
import { Sky } from 'three/examples/jsm/objects/Sky.js';


export class Layer extends BasLayer{
Expand Down
8 changes: 4 additions & 4 deletions src/loader/ModelLoader.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { GLTFLoader } from '../jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '../jsm/loaders/DRACOLoader.js';
import { OBJLoader } from '../jsm/loaders/OBJLoader.js';
import { SVGLoader } from '../jsm/loaders/SVGLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
import { Config } from '../environment/config';
import { ObjectLoader } from 'three';

Expand Down
Loading

0 comments on commit 101f5f3

Please sign in to comment.