首页 / JAVASCRIPT / three.js绘制地球、飞机与轨迹的效果示例

three.js绘制地球、飞机与轨迹的效果示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了three.js绘制地球、飞机与轨迹的效果示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16877字，纯文字阅读大概需要25分钟。

内容图文

对于three.js不太熟悉的朋友们可以参考这篇文章，threejs官网：https://threejs.org/

首先我们来看下要实现的效果

three.js绘制地球、飞机与轨迹的效果示例 - 文章图片

这个缩小后的图片，下面我们来看下近距离的动态效果。。

three.js绘制地球、飞机与轨迹的效果示例 - 文章图片

效果比较简陋，需要后期再处理。。。

下面进入主题，代码篇。。

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>全球航班</title>
 
 <style>
 html{overflow: hidden;}
 body { margin: 0;}
 </style>

 <script src="js/jquery.min.js"></script>
</head>
<body>
 <!-- 地国 -->
 <div id="zh_globe_container"></div> <!-- 容器 -->
 
 <script src="js/threejs/Detector.js"></script> <!-- webGL浏览器支持检测 -->
 <script src="js/threejs/three.min.js"></script> <!-- 核心js -->
 <script src="js/threejs/stats.min.js"></script> <!-- 性能测试 -->
 <script src="js/threejs/OrbitControls.js"></script> <!-- 地球控制 -->
 <script src="js/socketio-1.4.5.js"></script> <!-- socket -->

 <script src="js/globe.js"></script> <!-- -->
</body>
</html>

JS部分(globe.js)

1、实现地球

地球贴图(可以在网上下载)

three.js绘制地球、飞机与轨迹的效果示例 - 文章图片

// 地球
function globe() {
 var globeTextureLoader = new THREE.TextureLoader();
 globeTextureLoader.load('images/textures/earth.jpg', function (texture) {
 var globeGgeometry = new THREE.SphereGeometry(200, 100, 100);
 var globeMaterial = new THREE.MeshStandardMaterial({map: texture});
 var globeMesh = new THREE.Mesh(globeGgeometry, globeMaterial);
 group.add(globeMesh);
 group.rotation.x = THREE.Math.degToRad(35);
 group.rotation.y = THREE.Math.degToRad(170);
 });
}

2、添加球面光源(这里使用的是半球光)

// 光
function lights() {
 var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x333333, 2);
 hemisphereLight.position.x = 0;
 hemisphereLight.position.y = 0;
 hemisphereLight.position.z = -200;
 group.add(hemisphereLight);
}

3、添加星点

// 星点
function stars() {
 var starsGeometry = new THREE.Geometry();
 for (var i = 0; i < 2000; i ++) {
 var starVector = new THREE.Vector3(
 THREE.Math.randFloatSpread(2000),
 THREE.Math.randFloatSpread(2000),
 THREE.Math.randFloatSpread(2000)
 );
 starsGeometry.vertices.push(starVector);
 }
 var starsMaterial = new THREE.PointsMaterial({color: 0x888888})
 var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
 group.add(starsPoint);
}

4、添加飞机

这里需要我们把经纬度坐标转成 xyz 坐标

// 获取position
function getPosition(lng, lat, alt) {
 var phi = (90-lat)*(Math.PI/180),
 theta = (lng+180)*(Math.PI/180),
 radius = alt+200,
 x = -(radius * Math.sin(phi) * Math.cos(theta)),
 z = (radius * Math.sin(phi) * Math.sin(theta)),
 y = (radius * Math.cos(phi));
 return {x: x, y: y, z: z};
}

画飞机

// 飞机形状(不想画的，可以下载个 飞机模型 使用加载器加载进来)
var planeShape = new THREE.Shape();
planeShape.moveTo( 0, 0);
planeShape.lineTo(0.2, -0.2);
planeShape.lineTo(0.2, -1.3);
planeShape.lineTo(1.6,-2.7);
planeShape.lineTo(1.6,-3);
planeShape.lineTo(0.2, -2.1);
planeShape.lineTo(0.2, -3);
planeShape.lineTo(0.5, -3.4);
planeShape.lineTo(0.5, -3.7);
planeShape.lineTo(0, -3.3);
planeShape.lineTo(-0.5, -3.7);
planeShape.lineTo(-0.5, -3.4);
planeShape.lineTo(-0.2, -3);
planeShape.lineTo(-0.2, -2.1);
planeShape.lineTo(-1.6,-3);
planeShape.lineTo(-1.6,-2.7);
planeShape.lineTo(-0.2, -1.3);
planeShape.lineTo(-0.2, -0.2);
var planeGeometry = new THREE.ShapeGeometry(planeShape);
// 飞机材质
var planeMaterial = new THREE.MeshPhongMaterial({color: 0x0FB4DD, side: THREE.DoubleSide, depthTest: true});

depthTest作用是能否透过球体看到飞机，如果是false则旋转到球体另一面也能看到飞机

添加飞机

// 添加飞机
function addPlane(item) {
 if(item.anum && item.lng && item.lat) {
 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 // 旋转
 plane.rotation.z = THREE.Math.degToRad(item.ang);
 // 定位
 var position = getPosition(item.lng, item.lat, 5);
 plane.position.set(position.x, position.y, position.z);
 // 显示/隐藏
 // plane.visible = false;
 // 保存
 planeMarkers[item.anum] = plane;
 // 添加到场景
 group.add(plane);
 // 绘制历史轨迹
 drawHistoryTrack(item.anum);
 }
}

绘制轨迹(使用socket来获取的飞行轨迹经纬度坐标点)

// 时间段
var curTime = Date.parse(new Date())/1000;
var depTime = curTime - 30*60;
// 轨迹线质
var trackMaterial = new THREE.LineBasicMaterial({color : 0x1B94B1});
// 绘制历史轨迹
function drawHistoryTrack(anum) {
 socket.emit("fullPath", anum, depTime, curTime, function(status, data){
 if(status) {
 var dLength = data.length;
 if(dLength>=2) {
 var trackCoordArr = [];
 for(var i=0; i<dLength; i++) {
  if(data[i].lng && data[i].alt) {
  trackCoordArr.push({lng: data[i].lng, lat: data[i].lat});
  }
 }

 var tcaLength = trackCoordArr.length;
 if(tcaLength>=2) {
  var tcaHalfLength = Math.ceil(tcaLength/2),
  vertexArr = [];

  // 这里只取了三个点(起点、中点、终点)
  var p1 = getPosition(trackCoordArr[0].lng, trackCoordArr[0].lat, 0),
  p2 = getPosition(trackCoordArr[tcaHalfLength].lng, trackCoordArr[tcaHalfLength].lat, tcaLength*0.01),
  p3 = getPosition(trackCoordArr[tcaLength-1].lng, trackCoordArr[tcaLength-1].lat, 0);

  var trackCurve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(p1.x, p1.y, p1.z),
  new THREE.Vector3(p2.x, p2.y, p2.z),
  new THREE.Vector3(p3.x, p3.y, p3.z)
  ]);

  var trackGeometry = new THREE.Geometry(),
  verticesArr = trackCurve.getPoints(tcaLength);

  trackGeometry.vertices = verticesArr;
  
  var trackLine = new THREE.Line(trackGeometry, trackMaterial);
  group.add(trackLine);

  // 动画点
  addLightPoint(p1, tcaLength, verticesArr);
 }
 }
 }
 });
}

如果要绘制所有点，且头尾是在球面上的曲线，则需要两次循环

var tcaRemainLength = tcaLength-tcaHalfLength
for(var j=0; j<tcaHalfLength; j++) { // 前一半
 var p1 = getPosition(trackCoordArr[j].lng, trackCoordArr[j].lat, j*0.05);
 vertexArr.push(new THREE.Vector3(p1.x, p1.y, p1.z)); 
}
for(var k=tcaRemainLength; k>0; k--) { // 后一半
 var p2 = getPosition(trackCoordArr[tcaLength-k].lng, trackCoordArr[tcaLength-k].lat, k*0.05);
 vertexArr.push(new THREE.Vector3(p2.x, p2.y, p2.z)); 
}

var trackCurve = new THREE.CatmullRomCurve3(vertexArr);

这个部分看看就行了。。

光点动画

// 点动画
var pointGeometry = new THREE.SphereGeometry(0.2, 20, 20);
var pointMaterial = new THREE.MeshBasicMaterial({color: 0x40E0D0});
function addLightPoint(pos, coordsNum ,verArr) { 
 var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
 pointMesh.position.set(pos.x, pos.y, pos.z);
 group.add(pointMesh);

 var index = 0;
 function pointAnimate() {
 index++;
 if(index>coordsNum) {
 index = 0;
 }
 pointMesh.position.set(verArr[index].x, verArr[index].y, verArr[index].z);
 requestAnimationFrame(pointAnimate);
 }
 pointAnimate();
}

这个点使用的是sphere，，当然也可以用顶点来实现，如下

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0))
geometry.colors.push(new THREE.Color(0xffffff));

var material = new THREE.PointsMaterial({size: 1, vertexColors: THREE.VertexColors, opacity: 0.75, sizeAttenuation: true, transparent: true});
var point = new THREE.Points(geometry, material);
point.position.set(x, y, z);
group.add(point);

另外不想用光点动画的话，也可以用线动画，实现原理是不断更新顶点坐标，如下

var curveGeometry = new THREE.Geometry(); 
var curveData = new THREE.CatmullRomCurve3(verArr.slice(0, 10)); 
curveGeometry.vertices = curveData.getPoints(10);

var curveMaterial = new THREE.LineBasicMaterial({color: 0x40E0D0});
var curveLine = new THREE.Line(curveGeometry, curveMaterial);
group.add(curveLine);

var index = 0;
function lineAnimate() {
 index++;
 if(index>coordsNum-10) {
 index = 0;
 }
 var offsetData = verArr.slice(index, 10+index);
 if(offsetData.length > 0) {
 curveData = new THREE.CatmullRomCurve3(offsetData); 
 curveLine.geometry.vertices = curveData.getPoints(10);
 curveLine.geometry.verticesNeedUpdate = true;
 }
 requestAnimationFrame(lineAnimate);
}
lineAnimate();

最后就是布置场景和事件了

// 初始化
function init() {
 container = document.getElementById('zh_globe_container');

 scene = new THREE.Scene();
 var bgTexture = new THREE.TextureLoader().load("images/textures/starfield.jpg");
 scene.background = bgTexture;

 camera = new THREE.PerspectiveCamera(50, winWth/winHgt, 1, 2000);
 camera.up.x = 0;
 camera.up.y = 1;
 camera.up.z = 0;
 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 400;
 camera.lookAt(0,0,0);

 group = new THREE.Group();
 scene.add(group);

 // 地球 
 globe();

 // 飞机
 plane();

 // 星点
 stars();

 // 半球光
 lights();

 // 渲染器
 renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(winWth, winHgt);
 container.appendChild(renderer.domElement);

 // 盘旋控制
 var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
 orbitControl.minDistrance = 20;
 orbitControl.maxDistrance = 50;
 orbitControl.maxPolarAngle = Math.PI/2;

 // 性能测试
 stats = new Stats();
 container.appendChild(stats.dom);

 // resize事件
 window.addEventListener('resize', onWindowResize, false);
}

// 窗口大小改变
function onWindowResize() {
 camera.aspect = window.innerWidth/window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(window.innerWidth, window.innerHeight);
}

// 渲染
function render() {
 group.rotation.y -= 0.0005;
 renderer.render(scene, camera);
}

// 动画
function animate() {
 requestAnimationFrame(animate);
 render();
 stats.update();
}

init();
animate();

完整代码：

var log = console.log.bind(console);

var globeObj = (function() {
 'use strict';

 // 判断浏览器是否支持webgl
 if(!Detector.webgl) Detector.addGetWebGLMessage();

 var container, stats;
 var camera, scene, renderer;
 var group;
 var mouseX = 0, mouseY = 0;
 var winWth = window.innerWidth, winHgt = window.innerHeight;

 // 获取position
 function getPosition(lng, lat, alt) {
 var phi = (90-lat)*(Math.PI/180),
 theta = (lng+180)*(Math.PI/180),
 radius = alt+200,
 x = -(radius * Math.sin(phi) * Math.cos(theta)),
 z = (radius * Math.sin(phi) * Math.sin(theta)),
 y = (radius * Math.cos(phi));
 return {x: x, y: y, z: z};
 }

 // 飞机
 function plane() {
 var socket = io('https://loc.variflight.com/*****此处接口地址不能给了', {transports: ['websocket']});

 var clientBounds = [52.793056,72.427908,2.970897,135.181814];

 // 连接
 socket.on('connect', function() {
 socket.emit("sub", clientBounds, -1, '', function(){});
 });

 // 飞机标记
 var planeMarkers = {};

 // 飞机形状
 var planeShape = new THREE.Shape();
 planeShape.moveTo( 0, 0);
 planeShape.lineTo(0.2, -0.2);
 planeShape.lineTo(0.2, -1.3);
 planeShape.lineTo(1.6,-2.7);
 planeShape.lineTo(1.6,-3);
 planeShape.lineTo(0.2, -2.1);
 planeShape.lineTo(0.2, -3);
 planeShape.lineTo(0.5, -3.4);
 planeShape.lineTo(0.5, -3.7);
 planeShape.lineTo(0, -3.3);
 planeShape.lineTo(-0.5, -3.7);
 planeShape.lineTo(-0.5, -3.4);
 planeShape.lineTo(-0.2, -3);
 planeShape.lineTo(-0.2, -2.1);
 planeShape.lineTo(-1.6,-3);
 planeShape.lineTo(-1.6,-2.7);
 planeShape.lineTo(-0.2, -1.3);
 planeShape.lineTo(-0.2, -0.2);
 var planeGeometry = new THREE.ShapeGeometry(planeShape);
 // 飞机材质
 var planeMaterial = new THREE.MeshPhongMaterial({color: 0x0FB4DD, side: THREE.DoubleSide, depthTest: true});
 // 添加飞机
 function addPlane(item) {
 if(item.anum && item.lng && item.lat) {
 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 // 旋转
 plane.rotation.z = THREE.Math.degToRad(item.ang);
 // 定位
 var position = getPosition(item.lng, item.lat, 5);
 plane.position.set(position.x, position.y, position.z);
 // 显示/隐藏
 // plane.visible = false;
 // 保存
 planeMarkers[item.anum] = plane;
 // 添加到场景
 group.add(plane);
 // 绘制历史轨迹
 drawHistoryTrack(item.anum);
 }
 }

 // 时间段
 var curTime = Date.parse(new Date())/1000;
 var depTime = curTime - 30*60;
 // 轨迹线质
 var trackMaterial = new THREE.LineBasicMaterial({color : 0x1B94B1});
 // 绘制历史轨迹
 function drawHistoryTrack(anum) {
 socket.emit("fullPath", anum, depTime, curTime, function(status, data){
 if(status) {
  var dLength = data.length;
  if(dLength>=2) {
  var trackCoordArr = [];
  for(var i=0; i<dLength; i++) {
  if(data[i].lng && data[i].alt) {
  trackCoordArr.push({lng: data[i].lng, lat: data[i].lat});
  }
  }

  var tcaLength = trackCoordArr.length;
  if(tcaLength>=2) {
  var tcaHalfLength = Math.ceil(tcaLength/2),
  tcaRemainLength = tcaLength-tcaHalfLength,
  vertexArr = [];

  /* 所有点
  for(var j=0; j<tcaHalfLength; j++) {
  var p1 = getPosition(trackCoordArr[j].lng, trackCoordArr[j].lat, j*0.05);
  vertexArr.push(new THREE.Vector3(p1.x, p1.y, p1.z)); 
  }
  for(var k=tcaRemainLength; k>0; k--) {
  var p2 = getPosition(trackCoordArr[tcaLength-k].lng, trackCoordArr[tcaLength-k].lat, k*0.05);
  vertexArr.push(new THREE.Vector3(p2.x, p2.y, p2.z)); 
  }
  
  var trackCurve = new THREE.CatmullRomCurve3(vertexArr);
  */

  // 三个点
  var p1 = getPosition(trackCoordArr[0].lng, trackCoordArr[0].lat, 0),
  p2 = getPosition(trackCoordArr[tcaHalfLength].lng, trackCoordArr[tcaHalfLength].lat, tcaLength*0.01),
  p3 = getPosition(trackCoordArr[tcaLength-1].lng, trackCoordArr[tcaLength-1].lat, 0);

  var trackCurve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(p1.x, p1.y, p1.z),
  new THREE.Vector3(p2.x, p2.y, p2.z),
  new THREE.Vector3(p3.x, p3.y, p3.z)
  ]);

  var trackGeometry = new THREE.Geometry(),
  verticesArr = trackCurve.getPoints(tcaLength);

  trackGeometry.vertices = verticesArr;
  
  var trackLine = new THREE.Line(trackGeometry, trackMaterial);
  group.add(trackLine);

  // 动画点
  addLightPoint(p1, tcaLength, verticesArr);
  }
  }
 }
 });
 }

 // 点动画
 var pointGeometry = new THREE.SphereGeometry(0.2, 20, 20);
 var pointMaterial = new THREE.MeshBasicMaterial({color: 0x40E0D0});
 function addLightPoint(pos, coordsNum ,verArr) {
 var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
 pointMesh.position.set(pos.x, pos.y, pos.z);
 group.add(pointMesh);

 var index = 0;
 function pointAnimate() {
 index++;
 if(index>coordsNum) {
  index = 0;
 }
 pointMesh.position.set(verArr[index].x, verArr[index].y, verArr[index].z);
 requestAnimationFrame(pointAnimate);
 }
 pointAnimate();

 /*var curveGeometry = new THREE.Geometry(); 
 var curveData = new THREE.CatmullRomCurve3(verArr.slice(0, 10)); 
 curveGeometry.vertices = curveData.getPoints(10);

 var curveMaterial = new THREE.LineBasicMaterial({color: 0x40E0D0});
 var curveLine = new THREE.Line(curveGeometry, curveMaterial);
 group.add(curveLine);

 var index = 0;
 function lineAnimate() {
 index++;
 if(index>coordsNum-10) {
  index = 0;
 }
 var offsetData = verArr.slice(index, 10+index);
 if(offsetData.length > 0) {
  curveData = new THREE.CatmullRomCurve3(offsetData); 
  curveLine.geometry.vertices = curveData.getPoints(10);
  curveLine.geometry.verticesNeedUpdate = true;
 }
 requestAnimationFrame(lineAnimate);
 }
 lineAnimate();*/
 }

 // 监听数据(添加并更新)
 socket.on('~', function(res) {
 if($.isEmptyObject(planeMarkers)) {
 $.each(res, function(i, item) {
  addPlane(item);
 });
 } else {
 $.each(res, function(i, item) {
  if(planeMarkers[item.anum]) {
  if(item.lng && item.lat) {
  var pos = getPosition(item.lng, item.lat, 5);
  planeMarkers[item.anum].position.set(pos.x, pos.y, pos.z);
  }
  } else {
  addPlane(item);
  }
 });
 }
 });
 }

 // 地球
 function globe() {
 var globeTextureLoader = new THREE.TextureLoader();
 globeTextureLoader.load('images/textures/earth.jpg', function (texture) {
 var globeGgeometry = new THREE.SphereGeometry(200, 100, 100);
 var globeMaterial = new THREE.MeshStandardMaterial({map: texture});
 var globeMesh = new THREE.Mesh(globeGgeometry, globeMaterial);
 group.add(globeMesh);
 group.rotation.x = THREE.Math.degToRad(35);
 group.rotation.y = THREE.Math.degToRad(170);
 });
 }

 // 星点
 function stars() {
 var starsGeometry = new THREE.Geometry();
 for (var i = 0; i < 2000; i ++) {
 var starVector = new THREE.Vector3(
 THREE.Math.randFloatSpread(2000),
 THREE.Math.randFloatSpread(2000),
 THREE.Math.randFloatSpread(2000)
 );
 starsGeometry.vertices.push(starVector);
 }
 var starsMaterial = new THREE.PointsMaterial({color: 0x888888})
 var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
 group.add(starsPoint);
 }

 // 光
 function lights() {
 var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x333333, 2);
 hemisphereLight.position.x = 0;
 hemisphereLight.position.y = 0;
 hemisphereLight.position.z = -200;
 group.add(hemisphereLight);
 }

 // 初始化
 function init() {
 container = document.getElementById('zh_globe_container');

 scene = new THREE.Scene();
 var bgTexture = new THREE.TextureLoader().load("images/textures/starfield.jpg");
 scene.background = bgTexture;

 camera = new THREE.PerspectiveCamera(50, winWth/winHgt, 1, 2000);
 camera.up.x = 0;
 camera.up.y = 1;
 camera.up.z = 0;
 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 400;
 camera.lookAt(0,0,0);

 group = new THREE.Group();
 scene.add(group);

 // 地球 
 globe();

 // 飞机
 plane();

 // 星点
 stars();
 
 // 半球光
 lights();

 // 渲染器
 renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(winWth, winHgt);
 container.appendChild(renderer.domElement);

 // 盘旋控制
 var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
 orbitControl.minDistrance = 20;
 orbitControl.maxDistrance = 50;
 orbitControl.maxPolarAngle = Math.PI/2;

 // 性能测试
 stats = new Stats();
 container.appendChild(stats.dom);

 // resize事件
 window.addEventListener('resize', onWindowResize, false);
 }

 // 窗口大小改变
 function onWindowResize() {
 camera.aspect = window.innerWidth/window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(window.innerWidth, window.innerHeight);
 }
 
 // 渲染
 function render() {
 group.rotation.y -= 0.0005;
 renderer.render(scene, camera);
 }

 // 动画
 function animate() {
 requestAnimationFrame(animate);
 render();
 stats.update();
 }

 init();
 animate(); 
})();

场景背景图

three.js绘制地球、飞机与轨迹的效果示例 - 文章图片

总结

以上就是关于利用three.js绘制地球、飞机、轨迹的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

内容总结

以上是互联网集市为您收集整理的three.js绘制地球、飞机与轨迹的效果示例全部内容，希望文章能够帮你解决three.js绘制地球、飞机与轨迹的效果示例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/345725.html

来源：【匿名】

【上一篇】js仿淘宝评价评分功能【下一篇】javascript 怎么调用php方法

更多 ►

【three.js绘制地球、飞机与轨迹的效果示例】教程文章相关的互联网学习教程文章

javascript 侧边栏一键分享移入移出效果【图】

运动框架：先要清除定时器，防止多次点击或者移入移出时，开启多个定时器，元素的运动会是所有定时器中运动的总和当达到目的时，要清除定时器（使用if/else 实现）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</tit...

Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制【代码】【图】

加载中，请等待div: <div id="load" class="center-in-center" style="display:none;"> <img src="../resources/images/loader.gif" />加载中，请等待... </div>确定重置按钮:<div class="form-group row"><div class="conf" style="float: left" onclick="conf()" id="conf">确定</div><div class="reset" style="float: left" onclick="reset()" id="reset">重置</div></div>加载中，请等待效果图的CSS样式，设置其至页面中央：...

JavaScript+css+ div HTML遮罩層效果【代码】

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><script src="jquery.1.11.0.min.js"></script><script type="text/javascript">$(function () {settime_show();$(‘#btn‘).click(function () {});});function settime_show() {setTimeout(show, 2000);}function show() {$(‘.bg‘).show();$(‘.show‘).fadeIn(‘slow‘)//$(‘.show‘).show(‘slow‘); setTimeout(hide, 4000);//$(‘.show...

使用JavaScript实现使用鼠标画线的效果【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Untitled 1</title><style type="text/css"> .style1 { font-size: x-small;}</style><script type="text/javascript">/**画点 */function makedot(x, y){ pointDi...

JavaScript渐变效果的实现

鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。关键代码：咸宁市中心小学view source print?1varspeed = 0;2if(target>obj.alpha){3 speed = 5;4}else{5 speed = -5;6}根据目标值和当时值的对比，来决定是正向还是负向速度。view source print?01for(i=0; i < runs_li.length; i++){02 runs_li[i].timer = null;03 runs_li[i].alpha = 30;04 runs_li[i].onmouseover = function(){05 startrun(this,...

Javascript图片轮播效果

注意：图片的路径和图片的名字要改成1.jpg/2.jpg/3.jpg等格式，根据数组下标进行查询，亲测有效<html> <head> <meta charset="utf-8"> <style type="text/css"> body,div,ul,li,img{ margin: 0px; padding: 0px; } #menu{ width: 496px; margin: auto; } #head{ border: 1px solid blue; } #head img{ width: 100%; height: 300px; } #footer li{ list-style-type: none; float: l...

js返回顶部动画效果【代码】

// 返回顶部function goTop(){// 无动画效果document.body.scrollTop = 0;document.documentElement.scrollTop = 0;// 简单动画效果$("html,body").animate({scrollTop:0},500);// 由快到慢的效果scrollToptimer = setInterval(function () {console.log("定时循环回到顶部")var top = document.body.scrollTop || document.documentElement.scrollTop;var speed = top / 4;if (document.body.scrollTop!=0) {document.body.scroll...

原生 javaScript 百叶窗效果的实现及原理介绍【代码】【图】

百叶窗大家都见过吧！如图:原理:如图所示，空心格子就好比是每个li，给它设定相对定位属性，设置overflow:hidden；黑块为li子元素，高度为li的2倍，设置absolute属性，我们正是要改变它的top值从而获得变化！(右上角多余块与本图无关)布局分析：注意top值得变化！默认top=0时候，显示的“一楼上铺”，当top=-40px时候，li的子元素上移40px，这时候显示的内容就为“一楼下铺”注意p元素的包裹层div ...

JavaScript实现文字跑马灯效果【代码】

项目开发中若需要做系统公告，可在此Demo的基础上稍加修改实现一个简单的系统公告效果<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文字跑马灯</title><style>#race_notice_p{position:relative;margin:20px auto;width:800px;overflow:hidden;height:50px;}#race_notice_s{position:absolute;left:0;top:0;}#race_notice_s p span{margin:0 20px;line-height: 50px;}</style> </head> <body><div id=‘r...

巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果【代码】【图】

1. 仿站效果今天看到学步园网站右边有个文章推荐的滚动栏目，觉得挺有意思，效果如下：2. 原理猜想如此小动画的效果，首先想到的可能是一个长数据列表，不断变化列表的长度，利用外部边框的遮罩裁剪效果，从而做出就像是文章标题在滚动的效果。原理如下：图中，黑色边框代表显示区域，灰色边框代表 ul>li 列表项目，Time1~Time3 分别代表不同时刻的列表项运行高度。双倍内容的列表项目整体上移动，利用显示区域的遮罩效果，达到...

js实现文件上传，删除效果【图】

效果图：刚开始：点击按钮“选择更多后”，可以添加很多选择文件：点击按钮“删除”后：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选择文件</title> <style type="text/css"> *{ margin:0px; padding:0px; } div{ margin:10px; } </style> <script> //当点击添加更多时，增加一个DIV //先增加两个input function addFile(){ var fragment=document.creat...

Javascript动画效果（四）【代码】【图】

Javascript动画效果（四）前面我们自己写了一个小小的关于js动画的插件，下面我们来使用之前的框架来完成我们想要的动画效果。我们经常在淘宝网中看到，鼠标经过某一图片时，该图片有从上滚出而又从下滚入的效果，那么那种效果是如何实现的呢？首先我们我们完成该效果的html和css代码，代码如下：html部分代码: <div id="move"><a href="#"><i><img src="images/1.jpg"/></i><p>彩票</p></a><a href="#"><i><img src="images/2.jpg...

JS实例之滚动固定效果，实现顶部菜单固定效果。【代码】

1<head> 2<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3<title>无标题文档</title> 4<style type="text/css"> 5*{margin:0px auto; padding:0px;} 6#tou{width:100%; height:200px; background-color:#06C;} 7#menu{width:100%; height:80px; background-color:#666;} 8#neirong{width:100%; height:2000px;} 9</style>10</head>1112<body>13<div id="tou"></div>14<div id="menu"></div>15<div id="ne...

javascript动画效果【代码】

之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，js代码中，只运用了一个小功能进行了测试<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title></head><body><div class="main"><div class="scroll"><div class="info"><ul id="scro"><li><a href=""><span>1</span><span></span><span></span><span></span></a></li></ul></div></div><...

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName("li"); var oBox=oDiv.getElementsByTagName("div"); for(var i=0;i<oBtn.length;i++){ (function(index){ oBtn[i].addEventListener(event,function(){ for...

首页 / JAVASCRIPT / three.js绘制地球、飞机与轨迹的效果示例

three.js绘制地球、飞机与轨迹的效果示例

内容导读

内容图文

内容总结

内容备注

内容手机端

【three.js绘制地球、飞机与轨迹的效果示例】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程