Skip to content

Commit

Permalink
addRingEffect
Browse files Browse the repository at this point in the history
  • Loading branch information
lwy committed Jul 31, 2020
1 parent cdeef91 commit 44a20f5
Showing 1 changed file with 240 additions and 0 deletions.
240 changes: 240 additions & 0 deletions demo/custom-ringEffect.html
View file
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html>

<head>
<title>Customize your own components </title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<script type="text/javascript" src="./js/maptalks.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.117.0/build/three.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks.three/dist/maptalks.three.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.117.0/examples/js/libs/stats.min.js">
</script>
<style>
html,
body {
margin: 0px;
height: 100%;
width: 100%;
}

#map {
width: 100%;
height: 100%;
background-color: #000;
}

</style>
</head>

<body>
<div id="map"></div>
<script>
var map = new maptalks.Map("map", {
center: [122.05868611616324, 37.38234727127778],
zoom: 16,
pitch: 60,
centerCross: true,
doubleClickZoom: false,
baseLayer: new maptalks.TileLayer('tile', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c', 'd'],
attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
})
});

var threeLayer = new maptalks.ThreeLayer('t', {
forceRenderOnMoving: true,
forceRenderOnRotating: true,
// animation: true
});


threeLayer.prepareToDraw = function (gl, scene, camera) {
stats = new Stats();
stats.domElement.style.zIndex = 100;
document.getElementById('map').appendChild(stats.domElement);

var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, -10, 10).normalize();
scene.add(light);
addRingEffect();

};
threeLayer.addTo(map);

var ringObj, material;

function addRingEffect() {
material = getMaterial(0);
ringObj = new ringEffect(map.getCenter(), {
radius: 2
}, material, threeLayer)
threeLayer.addMesh(ringObj);
initGui();
animation();
}

function animation() {
// layer animation support Skipping frames
if (threeLayer._needsUpdate) {
threeLayer.renderScene();
}
stats.update();
requestAnimationFrame(animation);
}

function getMaterial(type = 0) {
var ringShield = {
uniforms: {
color: {
type: "c",
value: new THREE.Color("#9999FF")
},
time: {
type: "f",
value: -1.5
},
type: {
type: "f",
value: type || 0
},
num: {
type: "f",
value: 4
}
},
vertexShaderSource: `
varying vec2 vUv;
void main(){
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`,
fragmentShaderSource: `
uniform float time;
uniform vec3 color;
uniform float type;
uniform float num;
varying vec2 vUv;
void main(){
float alpha = 1.0;
float dis = distance(vUv,vec2(0.5));//0-0.5
if(dis > 0.5){
discard;
}
if(type ==0.0){
float y = (sin(6.0 * num *(dis-time)) + 1.0)/2.0;
alpha = smoothstep(1.0,0.0,abs(y-0.5)/0.5) * (0.5 -dis) * 2.;
}else if(type ==1.0){
float step = fract(time* 4.)* 0.5;
if(dis<step){
// alpha = smoothstep(1.0,0.0,abs(step-dis)/0.15);
alpha =1.- abs(step-dis)/0.15;
}else{
alpha = smoothstep(1.0,0.0,abs(step-dis)/0.05);
}
alpha *= (pow((0.5 -dis)* 3.0,2.0));
}
gl_FragColor = vec4(color,alpha );
}`
};
let material = new THREE.ShaderMaterial({
uniforms: ringShield.uniforms,
defaultAttributeValues: {},
vertexShader: ringShield.vertexShaderSource,
fragmentShader: ringShield.fragmentShaderSource,
blending: THREE.AdditiveBlending,
depthWrite: !1,
depthTest: !0,
side: THREE.DoubleSide,
transparent: !0,
fog: !0
});
return material;
}



function initGui() {
var params = {
add: true,
color: material.uniforms.color.value.getStyle(),
show: true,
altitude: 0,
speed: ringObj.getOptions().speed
};

var gui = new dat.GUI();
gui.add(params, 'add').onChange(function () {
if (params.add) {
threeLayer.addMesh(ringObj);
} else {
threeLayer.removeMesh(ringObj);
}
});
gui.addColor(params, 'color').name('circle color').onChange(function () {
material.uniforms.color.value.setStyle(params.color);
});
gui.add(params, 'altitude', 0, 3000).onChange(function () {
ringObj.setAltitude(params.altitude);
});
gui.add(params, 'speed', 0.001, 0.3, 0.00001).onChange(function () {
ringObj.options.speed = params.speed;
});
}


//default values
var OPTIONS = {
speed: 0.005,
radius: 1,
altitude: 0,
interactive: false
};

/**
* custom component
*
* you can customize your own components
* */

class ringEffect extends maptalks.BaseObject {
constructor(coordinate, options, material, layer) {
options = maptalks.Util.extend({}, OPTIONS, options, {
layer,
coordinate
});
super();
//Initialize internal configuration
// https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
this._initOptions(options);
const {
altitude,
radius
} = options;
//generate geometry
// const r = layer.distanceToVector3(radius, radius).x;
const geometry = new THREE.RingBufferGeometry(0.001, radius, 20, 5, 0, Math.PI * 2);

//Initialize internal object3d
// https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
// this._createMesh(geometry, material);
this._createGroup();
const mesh = new THREE.Mesh(geometry, material); this.getObject3d().add(mesh);
//set object3d position
const z = layer.distanceToVector3(altitude, altitude).x;
const position = layer.coordinateToVector3(coordinate, z); this.getObject3d().position
.copy(position);
}

_animation() {
const ring = this.getObject3d().children[0];
const speed = this.getOptions().speed;
ring.material.uniforms.time.value += speed;
}
}

</script>
</body>

</html>

0 comments on commit 44a20f5

Please sign in to comment.