Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Three.js to make a 3D map of China related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use Three.js to make a 3D map of China will have a harvest, let's take a look.

1. Create scene related / / create webGL renderer this.renderer = new THREE.WebGLRenderer ({antialias: true,alpha: true}); this.renderer.shadowMap.enabled = true; / / turn on shadows this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;this.renderer.toneMapping = THREE.ACESFilmicToneMapping;this.renderer.toneMappingExposure = 1.25; / / adjust the color mode / / this.renderer.outputEncoding = THREE.sRGBEncoding according to your own needs This.renderer.outputEncoding = THREE.sHSVEncoding;this.renderer.setPixelRatio (window.devicePixelRatio); / / clear background color, transparent background this.renderer.setClearColor (0xffffff, 0); this.renderer.setSize (this.width, this.height); / / scene this.scene = new THREE.Scene (); this.scene.background = null// camera Perspective camera this.camera = new THREE.PerspectiveCamera (45, this.width / this.height, 0.1,5000) This.camera.position.set (0,-40, 70); this.camera.lookAt (0,0,0); 1.2 Map based on json

Using THREE.Shape to draw the plane edge data of the map, and then using THREE.ExtrudeGeometry to pull up a surface into a 3D model, 3D pie chart can also be made in the same way.

Let jsonData = require ('. / json/china.json') this.initMap (jsonData); / / the main part of the initMap method initMap (chinaJson) {/ *. Omit... * / chinaJson.features.forEach ((elem, index) = > {/ / specify a province 3D object const province = new THREE.Object3D (); / / each coordinate array const {coordinates} = elem.geometry Const color = COLOR_ ARR [index% COLOR_ARR.length] / / cyclic coordinate array coordinates.forEach (multiPolygon = > {multiPolygon.forEach ((polygon) = > {const shape = new THREE.Shape (); for (let I = 0; I < polygon.length) If +) {let [x, y] = projection (Polygon [I]); if (I = 0) {shape.moveTo (x,-y);} shape.lineTo (x,-y) } const extrudeSettings = {depth: 4, bevelEnabled: true, bevelSegments: 1, bevelThickness: 0.2}; const geometry = new THREE.ExtrudeGeometry (shape, extrudeSettings) / / plane part material const material = new THREE.MeshStandardMaterial ({metalness: 1, color: color,}) / / pull up part material const material1 = new THREE.MeshStandardMaterial ({metalness: 1, roughness: 1, color: color,}) Const mesh = new THREE.Mesh (geometry, [material, material1]); / / sets the height to distinguish provinces from if (index% 2 = 0) {mesh.scale.set (1,1,1.2) } / / turn on shadows for mesh mesh.castShadow = true mesh.receiveShadow = true mesh._color = color province.add (mesh);})}) _ this.map.add (province);})}

The coordinates of geoJson need to be transformed into plane coordinates by Mercator projection, and d3 is needed here.

/ / Mercator projection conversion const projection = d3.geoMercator (). Center ([104.0]). Scale (80). Translate ([0,0]); 2. Increase the light

We put all kinds of light on, ambient light, hemispherical light, spot light, directional light. Take the directional light as an example, increase the projection and adjust the projection resolution to avoid mosaics.

Const light = new THREE.DirectionalLight (0xffffff, 0.5); light.position.set (20,-50,20); light.castShadow = true;light.shadow.mapSize.width = 1024th light.shadow.mapSize.height = 1024th this.scene.add (light)

CastShadow = true means to turn on projection

3. Increase shadow blur

The default shadow has no blurring effect and looks like an incandescent lamp, without a sense of softness. Use csm in the official example to increase shadow blur

Import {CSM} from 'three/examples/jsm/csm/CSM.js';this.csm = new CSM ({maxFar: params.far, cascades: 4, mode: params.mode, parent: this.scene, shadowMapSize: 1024, lightDirection: new THREE.Vector3 (params.lightX, params.lightY, params.lightZ). Normalize (), camera: this.camera}); 4. Add mouse events

In 3D space, mouse events mainly obtain the location of the mouse through rays, which can be imagined as a ray emitted by the mouse, and the first object irradiated is the location of the mouse. At this time, the Raycaster of threejs is used to add mouse-in highlighting effect and provincial civil suspension display effect to the corresponding provinces through Raycaster.

This.raycaster = new THREE.Raycaster (); / / all objects under the group,group that need to be detected will be detected. If it is caught by a ray, intersects has a value, indicating that the mouse is currently const intersects = this.raycaster.intersectObject (this.group, true) on these objects; / / if there is too much code, see GitHub source code 5. Render

Threejs rendering usually calls the native requestAnimationFrame, and the main thing to do is to call the render method of renderer. Of course, because we have done shadow blurring, there are other things that need to be done:

This.camera.updateMatrixWorld (); this.csm.update (); this.renderer.render (this.scene, this.camera); 6. Animation effect

If there are some animation effects on the map, you can use the TWEEN.js,github address, such as the animation of the appearance of the map annotation:

This is the end of the article on "how to make a 3D map of China with Three.js". Thank you for reading! I believe that everyone has a certain understanding of "how to use Three.js to make a 3D map of China". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.