three+rhill-voronoi实现柱状地图区域标识效果代码-html代码-BFW代码库

three+rhill-voronoi实现柱状地图区域标识效果代码

代码语言：html

所属分类：三维

代码描述：three+rhill-voronoi实现柱状地图区域标识效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Verdana;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#info {
  position: absolute;
  margin-left: 10px;
}

a {
  color: yellow;
  text-decoration: none;
}
</style>

  
  


</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.127.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rhill-voronoi-core.min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/paper-full.min.js"></script>
      <script  >
console.clear();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(55, 1, 1, 1000);
camera.position.set(0, 0, 200);
var renderer = new THREE.WebGLRenderer({
  antialias: true });

renderer.setClearColor(0x202020);
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, canvas);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

var size = { x: 200, z: 200 };
var radius = 100;
var pointsCount = 150;
var counter = 0;
var points2d = [];
var temp = new THREE.Vector2();
while (counter < pointsCount) {
  temp.
  random().
  subScalar(0.5).
  multiplyScalar(radius * 2);
  if (temp.length() < radius) {
    points2d.push({ x: temp.x, y: temp.y });
    counter++;
  }
}

var geom = new THREE.BufferGeometry().setFromPoints(points2d);
var cloud = new THREE.Points(
geom,
new THREE.PointsMaterial({
  color: 0x99ccff,
  size: 2,
  onBeforeCompile: shader => {
    console.log(shader.fragmentShader);
    shader.fragmentShader = shader.fragmentShader.replace(
    `#include <clipping_planes_fragment>`,
    `
          if (length(gl_PointCoord - 0.5) > 0.5) discard;
          
        #include <clipping_planes_fragment>`);

  } }));


scene.add(cloud);

var voronoi = new Voronoi();
var bbox = { xl: -radius, xr: radius, yt: -radius, yb: radius };
var diagram = voronoi.compute(points2d, bbox);
console.log(diagram.cells[0]);

let vCells = [];
let lineHolder = new THREE.Group();
let cellHolder = new THREE.Group();
scene.add(lineHolder, cellHolder);
diagram.cells.forEach(cell => {
  let cellData = processCell(cell, radius);
  if (cellData.isInside) {
    buildTestContour(cellData);
    buildHull(cellData, 10, 2);
  }
});

var gui = new dat.GUI();
gui.add(cloud, "visible").name("points");
gui.add(lineHolder, "visible").name("lines");
gui.add(cellHolder, "visible").name("cells");

let clock = new THREE.Clock();

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  r.........完整代码请登录后点击上方下载按钮下载查看