<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>粒子地图</title> <!-- 来自three.js文件包 --> <script src="../js/three.js" type="text/javascript" charset="utf-8"></script> <script src="../js/OrbitControls.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } #cityInfo { background-color: #F3E9B4; position: absolute; z-index: 10; top: 100px; left: 375px; } </style> </head> <body> <div id="app"></div> <div id="cityInfo">全国</div> <script type="text/javascript"> var scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); render = new THREE.WebGLRenderer({ antialias: true }); render.setPixelRatio(window.devicePixelRatio); render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app"); app.appendChild(render.domElement); /********************************************************/ var group = new THREE.Group(); // 创建组对象，包含所有精灵对象 var loader = new THREE.FileLoader().setResponseType('json'); // 文件加载对象 let texture = new THREE.TextureLoader().load("../img/sprite/sprite.png"); // 粒子贴图 // 进行光线投射来获取鼠标坐标点 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 加载json文件资料 loader.load('../img/sprite/chinaCity.json', function(data) { //遍历数据 for (let elem in data) { if (elem.indexOf('北京') > -1) { var color = '#FF0000' } else { var color = '#1A41E5' } // 精灵材质 let spriteMaterial = new THREE.SpriteMaterial({ color: color, transparent: true, opacity: 0.6, map: texture,//设置精灵纹理贴图 }) let sprite = new THREE.Sprite(spriteMaterial); // 创建精灵模型对象 sprite.title = elem; // 给精灵模型添加title属性 group.add(sprite); sprite.scale.set(0.5, 0.5, 1); //获得城市坐标设置精灵模型对象的位置 sprite.position.set(data[elem][0], data[elem][1], 0) } scene.add(group);//把精灵群组插入场景中 // 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移 group.position.set(-110, -30, 0); let hainanSpriteMaterial = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load("../img/sprite/hainan9.jpg"),//设置精灵纹理贴图 }) let hainanSprite = new THREE.Sprite(hainanSpriteMaterial); hainanSprite.position.set(120, 16, 0); hainanSprite.scale.set(8, 8); hainanSprite.title = '海南九段图' group.add(hainanSprite); }) function onMouseMove( event ) { // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1) mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } window.addEventListener( 'mousemove', onMouseMove, false ); scene.background = new THREE.Color('#fff'); //设置场景颜色 camera.position.set(20, 20, 60); //设置相机位置 camera.lookAt(new THREE.Vector3(0, 0, 0)) // 鼠标控件 var controls = new THREE.OrbitControls(camera, render.domElement); /********************************************************/ let currentSprite = null, currentSpriteTitle = ''; function animate(){ // 通过摄像机和鼠标位置更新射线 raycaster.setFromCamera( mouse, camera ); // 计算物体和射线的焦点 true代表包括后代模型 let intersects = raycaster.intersectObjects( scene.children, true ); if (intersects.length > 0) { //判断鼠标移动到的模型数量 if (currentSprite != intersects && currentSprite) { for (let i = 0; i < currentSprite.length; i++ ) { if (currentSprite[i].object.title.indexOf('北京') > -1) { currentSprite[i].object.material.color.set( '#FF0000' ); } else { currentSprite[i].object.material.color.set( '#1A41E5' ); } if (currentSprite[i].object.title == '海南九段图') currentSprite[i].object.material.color.set('#FFF') } } for (let i = 0; i < intersects.length; i++ ) { if (intersects[i].object.title == '海南九段图') intersects[i].object.material.color.set('#FFF') else intersects[i].object.material.color.set( '#F7AA07' ); } currentSprite = intersects; if (!currentSpriteTitle || currentSpriteTitle != currentSprite[0].object.title) { // 判断是否在城市上，和城市名是否改变 currentSpriteTitle = currentSprite[0].object.title; showCity(currentSpriteTitle, true) } } render.render(scene, camera); window.requestAnimationFrame(animate); } function showCity(name, flag) { //显示当前鼠标移动到的城市名称 if (flag) { document.getElementById('cityInfo').style.visibility = 'visible'; document.getElementById('cityInfo').innerText = name; } else document.getElementById('cityInfo').style.visibility = 'hidden'; } animate(); </script> </body></html>
评论