Threejs3D地球标记中国地图位置

先看效果

用到的库

1. TweenJS (动画库)用来做相机转场的动画
2. Jquery(这里只用到一个 each 循环方法，可以使用 js 去写)
3. ThreeJS (3D 地球制作)
4. 100000.json(全国城市经纬度)
5. d3.v6.js用来设置平面转3D效果(本来考虑做成3D的中国地图板块，最后因效果看起来比较美观还是考虑用线条嵌入球体的方式去实现，这里有小伙伴考虑制作3D的地图板块可以下载这个库)

适用范围

用于获取地图的位置以及到下一个目的地的总路程，可以将实际路程转成自己配置的路程，以及正在路上的标识，可以用头像表示，经过的地方可以嵌入链接点击进行跳转

设置基础场景

<div id="map"><canvas id="c3d" class="c2d"></canvas>
</div>
<div id="demo"></div>

const Dom = document.querySelector("#c3d");
const width = Dom.clientWidth;
const height = Dom.clientHeight;

如果是 Vue 写的话需要从onMounted生命周期中获取 Dom 元素

// 纹理加载器
const loader = new THREE.TextureLoader();
// 渲染器
let renderer;
// 相机
let camera;
// 场景
let scene;
// 灯光
let light;
// 相机控制
let controls;
// 动画
let tween;
// 其他
let earthMesh,stars,radius,labelRenderer,label,labels,labelsable,labelimg;

/*** 初始化渲染器* */
function initRenderer() {// antialias: true, alpha: true 抗锯齿设置renderer = new THREE.WebGLRenderer({canvas: Dom,antialias: true,alpha: true,});// window.devicePixelRatio 设备像素比renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(width, height);labelRenderer = new CSS2DRenderer();labelRenderer.domElement.style.position = "absolute";labelRenderer.domElement.style.top = "0px";labelRenderer.domElement.style.pointerEvents = "none";labelRenderer.setSize(width, height);document.getElementById("map").appendChild(labelRenderer.domElement);
}/*** 初始化相机*/
function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);camera.position.set(0, 0, 10);camera.lookAt(0, 0, 0);window.camera = camera;
}
/*** 初始化场景*/
function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color(0x1c3262);// 雾// scene.fog = new THREE.Fog(0x020924, 200, 1000)window.scene = scene;
}/*** 初始化 相机控制*/
function initControls() {controls = new OrbitControls(camera, renderer.domElement);// 阻尼惯性controls.enableDamping = true;controls.dampingFactor = 0.1;controls.enableZoom = true;controls.autoRotate = false;controls.rotateSpeed = 0.1;controls.autoRotateSpeed = 1;controls.enablePan = true;controls.addEventListener("change", function () {//相机位置与目标观察点距离const dis = controls.getDistance();console.log(camera.position);});
}/*** 初始化光*/
function initLight() {// 环境光const ambientLight = new THREE.AmbientLight(0xcccccc, 0.2);scene.add(ambientLight);// 平行光let directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);directionalLight.position.set(1, 0.1, 0).normalize();// 平行光2let directionalLight2 = new THREE.DirectionalLight(0xff2ffff, 0.2);directionalLight2.position.set(1, 0.1, 0.1).normalize();scene.add(directionalLight);scene.add(directionalLight2);// 半球光let hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1);hemiLight.position.set(0, 1, 0);scene.add(hemiLight);// 平行光3let directionalLight3 = new THREE.DirectionalLight(0xffffff);directionalLight3.position.set(1, -200, -20);let directionalLight4 = new THREE.DirectionalLight(0xffffff);directionalLight4.position.set(0, 500, 500);// 开启阴影directionalLight3.castShadow = true;// 设置光边界directionalLight3.shadow.camera.top = 18;directionalLight3.shadow.camera.bottom = -10;directionalLight3.shadow.camera.left = -52;directionalLight3.shadow.camera.right = 12;scene.add(directionalLight3);
}

// 旋转队列
const rotateSlowArr = [];
// 放大并透明 队列
const bigByOpacityArr = [];
// 移动 队列
const moveArr = [];// 边界 绘制点集合
const lines = [];
// 炫光粒子 几何体
const geometryLz = new THREE.BufferGeometry();
// 炫光粒子 透明度
let opacitys = [];
/*** 渲染函数* */
function renders(time) {time *= 0.0;// 3D对象 旋转// _y 初始坐标 _s 旋转速度rotateSlowArr.forEach((obj) => {obj.rotation.y = obj._y + time * obj._s;});bigByOpacityArr.forEach(function (mesh) {//  目标 圆环放大 并 透明mesh._s += 0.01;mesh.scale.set(1 * mesh._s, 1 * mesh._s, 1 * mesh._s);if (mesh._s <= 2) {mesh.material.opacity = 2 - mesh._s;} else {mesh._s = 1;}});moveArr.forEach(function (mesh) {mesh._s += 0.01;let tankPosition = new THREE.Vector3();tankPosition = mesh.curve.getPointAt(mesh._s % 1);mesh.position.set(tankPosition.x, tankPosition.y, tankPosition.z);});if (geometryLz.attributes.position) {geometryLz.currentPos += geometryLz.pointSpeed;for (let i = 0; i < geometryLz.pointSpeed; i++) {opacitys[(geometryLz.currentPos - i) % lines.length] = 0;}for (let i = 0; i < 200; i++) {opacitys[(geometryLz.currentPos + i) % lines.length] =i / 50 > 2 ? 2 : i / 50;}geometryLz.attributes.aOpacity.needsUpdate = true;}renderer.clear();labelRenderer.render(scene, camera);renderer.render(scene, camera);// requestAnimationFrame(renders)// earthMesh.rotation.y += 0.01stars.rotation.y += 0.001;
}

动画渲染函数

用于制作开始场景镜头动画(由远到近并附带略微旋转)

let p1 = { x: 100, y: 200, z: 200 };
function initTWEEN() {let tweena = cameraCon({ x: 100, y: 200, z: 200 }, 1000);let tweenb = cameraCon({ x: 0, y: 0, z: 10 }, 4000);tweena.chain(tweenb);// tweenb.chain(tweenc);tweenb.onComplete(function () {console.log("结束");drawChart();//相机位置与观察目标点最小值controls.minDistance = 7;//相机位置与观察目标点最大值controls.maxDistance = 50;// 上下旋转范围/* 		controls.minPolarAngle = -Math.PI /6;controls.maxPolarAngle = Math.PI /4; */// 左右旋转范围controls.minAzimuthAngle = -Math.PI / 6;controls.maxAzimuthAngle = Math.PI / 6;});tweena.start();
}
function cameraCon(p2 = { x: p1.x, y: p1.y, z: p1.z }, time = 5000) {var tween1 = new TWEEN.Tween(p1).to(p2, time).easing(TWEEN.Easing.Sinusoidal.InOut);var update = function () {camera.position.set(p1.x, p1.y, p1.z);};tween1.onUpdate(update);return tween1;
}
function cameraCon2(p2 = { x: camera.position.x, y: camera.position.y, z: camera.position.z },time = 2000
) {var tween1 = new TWEEN.Tween(camera.position).to(p2, time).easing(TWEEN.Easing.Sinusoidal.Out);var update = function () {camera.position.set(camera.position.x,camera.position.y,camera.position.z);};tween1.onUpdate(update);return tween1;
}
function animate() {window.requestAnimationFrame((time) => {if (controls) controls.update();TWEEN.update();renders(time);animate();});
}

cameraCon2这个动画在后面会用到，是根据滚动下方内容进行左右镜头旋转的动画效果

星空背景

/*** 创建 方形纹理* */
function generateSprite() {const canvas = document.createElement("canvas");canvas.width = 16;canvas.height = 16;const context = canvas.getContext("2d");// 创建颜色渐变const gradient = context.createRadialGradient(canvas.width / 2,canvas.height / 2,0,canvas.width / 2,canvas.height / 2,canvas.width / 2);gradient.addColorStop(0, "rgba(255,255,255,1)");gradient.addColorStop(0.2, "rgba(0,255,255,1)");gradient.addColorStop(0.4, "rgba(0,0,64,1)");gradient.addColorStop(1, "rgba(0,0,0,1)");// 绘制方形context.fillStyle = gradient;context.fillRect(0, 0, canvas.width, canvas.height);// 转为纹理const texture = new THREE.Texture(canvas);texture.needsUpdate = true;return texture;
}/*** 背景绘制* */
function bg() {const positions = [];const colors = [];// 创建 几何体const geometry = new THREE.BufferGeometry();for (let i = 0; i < 10000; i++) {let vertex = new THREE.Vector3();vertex.x = Math.random() * 2 - 1;vertex.y = Math.random() * 2 - 1;vertex.z = Math.random() * 2 - 1;positions.push(vertex.x, vertex.y, vertex.z);}// 对几何体 设置 坐标 和 颜色geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3));// 默认球体geometry.computeBoundingSphere();// ------------- 1 ----------// 星星资源图片// ParticleBasicMaterial 点基础材质var starsMaterial = new THREE.ParticleBasicMaterial({map: generateSprite(),size: 2,transparent: true,opacity: 1,//true：且该几何体的colors属性有值，则该粒子会舍弃第一个属性--color，而应用该几何体的colors属性的颜色// vertexColors: true,blending: THREE.AdditiveBlending,sizeAttenuation: true,});// 粒子系统 网格stars = new THREE.ParticleSystem(geometry, starsMaterial);stars.scale.set(300, 300, 300);scene.add(stars);
}

此时星空就已经搭建好了，可以左右旋转试试效果

搭建 3D 地球

其实也就是创建一个球，然后贴个准确的贴图放在圆上调整一些光感即可

// 地球，月亮 3D层
const landOrbitObject = new THREE.Object3D();
// 地球3D层
const earthObject = new THREE.Object3D();
// 月亮3D层
const moonObject = new THREE.Object3D();
// 地球半径
const globeRadius = 5;
/*** 球相关加载* */
function earth() {radius = globeRadius;const widthSegments = 100;const heightSegments = 100;const sphereGeometry = new THREE.SphereGeometry(radius,widthSegments,heightSegments);function shine() {var texture = loader.load("./images/blue.png");var spriteMaterial = new THREE.SpriteMaterial({map: texture,transparent: true,opacity: 0.5,depthWrite: false,});var sprite = new THREE.Sprite(spriteMaterial);sprite.scale.set(radius * 3, radius * 3, 1);sprite.rotation.set(-Math.PI / 2, 0, 0);scene.add(sprite);}shine();// 地球const earthTexture = loader.load("./images/微信图片_20230711093004 (1).jpg");const earthMaterial = new THREE.MeshStandardMaterial({map: earthTexture,});earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);// 月球const moonTexture = loader.load("./images/yueqiu.jpg");const moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture });const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);moonMesh.scale.set(0.1, 0.1, 0.1);moonMesh.position.x = 10;moonObject.add(moonMesh);// 加入动画队列moonObject._y = 0;moonObject._s = 1;rotateSlowArr.push(moonObject);// 地球加入 地球3D层earthObject.add(earthMesh);earthObject.rotation.set(0.5, 2.9, 0.1);earthObject._y = 2.0;earthObject._s = 0.1;// 加入动画队列// rotateSlowArr.push(earthObject)// 加入 地球3D层landOrbitObject.add(earthObject);// 加入 月亮3D层landOrbitObject.add(moonObject);scene.add(landOrbitObject);
}/*** 经维度 转换坐标* THREE.Spherical 球类坐标* lng:经度* lat:维度* radius:地球半径*/
function lglt2xyz(lng, lat, radius) {// 以z轴正方向为起点的水平方向弧度值const theta = (90 + lng) * (Math.PI / 180);// 以y轴正方向为起点的垂直方向弧度值const phi = (90 - lat) * (Math.PI / 180);return new THREE.Vector3().setFromSpherical(new THREE.Spherical(radius, phi, theta));
}

绘制红色圆点和点与点之间的飞线效果

/*** 绘制 目标点* */
function spotCircle(spot) {// 圆const geometry1 = new THREE.CircleGeometry(0.02, 100);const material1 = new THREE.MeshBasicMaterial({color: 0xff0000,side: THREE.DoubleSide,});const circle = new THREE.Mesh(geometry1, material1);circle.position.set(spot[0], spot[1], spot[2]);// mesh在球面上的法线方向(球心和球面坐标构成的方向向量)var coordVec3 = new THREE.Vector3(spot[0], spot[1], spot[2]).normalize();// mesh默认在XOY平面上，法线方向沿着z轴new THREE.Vector3(0, 0, 1)var meshNormal = new THREE.Vector3(0, 0, 1);// 四元数属性.quaternion表示mesh的角度状态//.setFromUnitVectors();计算两个向量之间构成的四元数值circle.quaternion.setFromUnitVectors(meshNormal, coordVec3);earthObject.add(circle);// 圆环const geometry2 = new THREE.RingGeometry(0.03, 0.04, 100);// transparent 设置 true 开启透明const material2 = new THREE.MeshBasicMaterial({color: 0xff0000,side: THREE.DoubleSide,transparent: true,});const circleY = new THREE.Mesh(geometry2, material2);circleY.position.set(spot[0], spot[1], spot[2]);// 指向圆心circleY.lookAt(new THREE.Vector3(0, 0, 0));earthObject.add(circleY);label.position.set(spot[0] - 0.15, spot[1] + 0.04, spot[2]);// 加入动画队列bigByOpacityArr.push(circleY);
}

/*** 绘制 两个目标点并连线* */
function lineConnect(posStart, posEnd) {const v0 = lglt2xyz(posStart[0], posStart[1], globeRadius);const v3 = lglt2xyz(posEnd[0], posEnd[1], globeRadius);// angleTo() 计算向量的夹角const angle = v0.angleTo(v3);let vtop = v0.clone().add(v3);// multiplyScalar 将该向量与所传入的 标量进行相乘vtop = vtop.normalize().multiplyScalar(globeRadius);let n;if (angle <= 1) {n = (globeRadius / 3) * angle;} else if (angle > 1 && angle < 2) {n = (globeRadius / 3) * Math.pow(angle, 2);} else {n = (globeRadius / 3) * Math.pow(angle, 1.5);}const v1 = v0.clone().add(vtop).normalize().multiplyScalar(globeRadius + n);const v2 = v3.clone().add(vtop).normalize().multiplyScalar(globeRadius + n);// 三维三次贝塞尔曲线(v0起点，v1第一个控制点，v2第二个控制点，v3终点)const curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);// 绘制 目标位置spotCircle([v0.x, v0.y, v0.z]);spotCircle([v3.x, v3.y, v3.z]);//   线上移动物体moveSpot(curve);const lineGeometry = new THREE.BufferGeometry();// 获取曲线 上的50个点var points = curve.getPoints(50);var positions = [];var colors = [];var color = new THREE.Color();// 给每个顶点设置演示 实现渐变for (var j = 0; j < points.length; j++) {if (j < 25 || j == 25) {color.set(0xffffff); // 粉色} else if (j < 50 && j > 25) {color.set(0xfffdaa); // 粉色}colors.push(color.r, color.g, color.b);positions.push(points[j].x, points[j].y, points[j].z);}// 放入顶点 和 设置顶点颜色lineGeometry.addAttribute("position",new THREE.BufferAttribute(new Float32Array(positions), 3, true));lineGeometry.addAttribute("color",new THREE.BufferAttribute(new Float32Array(colors), 3, true));const material = new THREE.LineBasicMaterial({vertexColors: true,side: THREE.DoubleSide,});const line = new THREE.Line(lineGeometry, material);earthObject.add(line);
}

/*** 线上移动物体* */
function moveSpot(curve) {// 线上的移动物体const aGeo = new THREE.SphereGeometry(0.04, 0.04, 0.04);const aMater = new THREE.MeshPhongMaterial({color: 0xff0000,side: THREE.DoubleSide,});const aMesh = new THREE.Mesh(aGeo, aMater);// 保存曲线实例aMesh.curve = curve;aMesh._s = 0;moveArr.push(aMesh);earthObject.add(aMesh);
}

用画布渲染城市信息以及每个点到点的路程的总距离

/*** 画图* */function drawChart() {const loader = new THREE.FileLoader();let centers;loader.load("./js/100000_full.json", (data) => {// 点与点let objName = [{ name: "黑龙江省", url: "https://www.baidu.com" },{ name: "内蒙古自治区" },{ name: "四川省" },{ name: "" },];// 线与线let city = [{ to: "黑龙江省" }, { to: "内蒙古自治区" }, { to: "四川省" }];// 当前所在地let location = [{ type: 0 }];const jsondata = JSON.parse(data);let transformedData = [];// 循环$.each(jsondata.features, function (index, item) {const { centroid, center, name } = item.properties;/*    const point = centroid || center || [0, 0];const depth = Math.random() * 0.3 + 0.3; */let proName = item.properties.name;let proName1 = item.properties.name;centers = item.properties.center;objName.forEach((v) => {if (v.name == proName) {labels = createLabel(name, v.url);earthObject.add(labels);if (centers != undefined) {let markPos = lglt2xyz(centers[0], centers[1], 5);spotCircle([markPos.x, markPos.y, markPos.z]);}// lineConnect(item.properties.center,[150,100,100])}});let lastIndex = city.length - 2;city.map((v, index) => {if (v.to == proName1) {v.tojwd = item.properties.center;let indexNum = index + 1;if (indexNum < city.length) {let formCity = city[index];let toCity = city[index + 1];setTimeout(() => {let combinedCity = {to: formCity.to,tojwd: v.tojwd,form: toCity.to,formjwd: toCity.tojwd,};if (combinedCity.formjwd != []) {let distance = getDistance(combinedCity.tojwd[0],combinedCity.tojwd[1],combinedCity.formjwd[0],combinedCity.formjwd[1]);combinedCity.dist = distance;transformedData.push(combinedCity);const coordinates = kilometersToCoordinates(distance,combinedCity.tojwd[1],combinedCity.tojwd[0]);console.log("从" +combinedCity.to +"到" +combinedCity.form +"的距离为" +distance +"公里"); // 输出两个坐标之间的距离，单位为公里// 示例用法if (index == lastIndex) {sessionStorage.setItem("last", JSON.stringify(combinedCity));let par = JSON.parse(sessionStorage.getItem("last"));} else {lineConnect(combinedCity.tojwd, combinedCity.formjwd);}// lineConnect(transformedData[0].tojwd, transformedData[0].formjwd)}}, 100);}}});location.forEach((i) => {if (i.type == item.properties.subFeatureIndex) {setTimeout(() => {let last = JSON.parse(sessionStorage.getItem("last"));console.log(last.dist);// 更换自定义路线(公里)last.dist = 300;// 将经纬度转换为三维坐标const point1 = last.tojwd;const point2 = last.formjwd;// 个人的总步数(公里)let lucheng = 100;let bfb = lucheng / last.dist;let s = point1[0] + (point2[0] - point1[0]) * bfb * 1;let d = point1[1] + (point2[1] - point1[1]) * bfb * 1;const div = document.createElement("div");div.style.color = "#fff";div.style.fontSize = "14px";div.style.textShadow = "1px 1px 2px #047cd6";div.innerHTML = `<img style="width:30px;border-radius:50%" src="./images/head.jpg" />`;labelimg = new CSS2DObject(div);labelimg.scale.set(0.01, 0.01, 0.01);let markPos = lglt2xyz(s, d, 5);labelimg.position.set(markPos.x - 0.1, markPos.y + 0.04, markPos.z);earthObject.add(labelimg);// 定义距离为1000公里setTimeout(() => {lineConnect(point1, [s, d]);}, 101);}, 200);}});});});
}
function getDistance(lat1, lon1, lat2, lon2) {const R = 6371; // 地球半径，单位为公里const rLat1 = toRadians(lat1);const rLat2 = toRadians(lat2);const deltaLat = toRadians(lat2 - lat1);const deltaLon = toRadians(lon2 - lon1);const a =Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +Math.cos(rLat1) *Math.cos(rLat2) *Math.sin(deltaLon / 2) *Math.sin(deltaLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = R * c;return distance;
}
function kilometersToCoordinates(distance, latitude, longitude) {const earthRadius = 6371.393; // 地球半径，单位为公里// 计算纬度差值const latDiff = distance / earthRadius;// 根据纬度计算经度差值const lonDiff =distance / (earthRadius * Math.cos((Math.PI * latitude) / 180));// 计算新的经度和纬度const newLatitude = latitude + latDiff * (180 / Math.PI);const newLongitude = longitude + lonDiff * (180 / Math.PI);// 返回经度和纬度return { latitude: newLatitude, longitude: newLongitude };
}

// 将角度转换为弧度
function toRadians(degree) {return degree * (Math.PI / 180);
}

创建可点击跳转的 url

const createLabel = (name, url) => {const div = document.createElement("div");div.style.color = "#fff";div.style.fontSize = "10px";div.style.textShadow = "1px 1px 2px #047cd6";div.textContent = name;div.style.pointerEvents = "auto";div.style.cursor = "pointer";label = new CSS2DObject(div);div.addEventListener("click", function (event) {if (url != undefined) {window.location.href = url;} else {return;}});label.scale.set(0.01, 0.01, 0.01);return label;
};

创建描边炫光路径

const vertexShader = `attribute float aOpacity;uniform float uSize;varying float vOpacity;void main(){gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);gl_PointSize = uSize;vOpacity=aOpacity;}`;
const fragmentShader = `varying float vOpacity;uniform vec3 uColor;float invert(float n){return 1.-n;}void main(){if(vOpacity <=0.2){discard;}vec2 uv=vec2(gl_PointCoord.x,invert(gl_PointCoord.y));vec2 cUv=2.*uv-1.;vec4 color=vec4(1./length(cUv));color*=vOpacity;color.rgb*=uColor;gl_FragColor=color;}`;/*** 边界炫光路径* */
function dazzleLight() {const loader = new THREE.FileLoader();loader.load("./js/100000.json", (data) => {const jsondata = JSON.parse(data);console.log(jsondata);// 中国边界const feature = jsondata.features[0];const province = new THREE.Object3D();province.properties = feature.properties.name;// 点数据const coordinates = feature.geometry.coordinates;coordinates.forEach((coordinate) => {// coordinate 多边形数据coordinate.forEach((rows) => {// 绘制线// const line = lineDraw(rows, 0xaa381e)const line = lineDraw(rows, 0xaa381e);province.add(line);});});// 添加地图边界earthObject.add(province);// 拉平 为一维数组const positions = new Float32Array(lines.flat(1));// 设置顶点geometryLz.setAttribute("position",new THREE.BufferAttribute(positions, 3));// 设置 粒子透明度为 0opacitys = new Float32Array(positions.length).map(() => 0);geometryLz.setAttribute("aOpacity", new THREE.BufferAttribute(opacitys, 1));geometryLz.currentPos = 0;// 炫光移动速度geometryLz.pointSpeed = 10;// 控制 颜色和粒子大小const params = {pointSize: 2.0,pointColor: "#4ec0e9",};// 创建着色器材质const material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,transparent: true, // 设置透明uniforms: {uSize: {value: params.pointSize,},uColor: {value: new THREE.Color(params.pointColor),},},});const points = new THREE.Points(geometryLz, material);earthObject.add(points);});
}/*** 边框 图形绘制* @param polygon 多边形 点数组* @param color 材质颜色* */
let indexBol = true;
function lineDraw(polygon, color) {const lineGeometry = new THREE.BufferGeometry();const pointsArray = new Array();polygon.forEach((row) => {// 转换坐标const xyz = lglt2xyz(row[0], row[1], globeRadius);// 创建三维点pointsArray.push(xyz);if (indexBol) {// 为了好看 这里只要内陆边界lines.push([xyz.x, xyz.y, xyz.z]);}});indexBol = false;// 放入多个点lineGeometry.setFromPoints(pointsArray);const lineMaterial = new THREE.LineBasicMaterial({color: color,});return new THREE.Line(lineGeometry, lineMaterial);
}

最后当 ul 中的 li 发生滚动时调用前面所执行的相机转场动画的效果

let { scrollY } = window;
let currentSection = 0;
window.addEventListener("scroll", () => {scrollY = window.scrollY;const newSection = Math.round(scrollY / height);console.log(newSection);console.log(camera.position);if (newSection !== currentSection) {currentSection = newSection;console.log(currentSection);if (currentSection == 0) {currentSection = newSection;// console.log('changed', currentSection)let tweena = cameraCon2(camera.position, 1000);console.log(camera.position);let tweenb = cameraCon2({ x: 0, y: 1, z: 10 }, 1000);tweena.chain(tweenb);tweena.start();} else {currentSection = newSection;// console.log('changed', currentSection)let tweena = cameraCon2(camera.position, 1000);console.log(camera.position);let tweenb = cameraCon2({ x: 0, y: -1, z: 10 }, 1000);tweena.chain(tweenb);tweena.start();}}
});

全局初始化

window.onload = () => {// 初始化initTWEEN();initRenderer();initCamera();initScene();initLight();initControls();// 绘制bg();earth();dazzleLight();// 渲染animate();
};

完整代码地址 earthling ，此项目仅用于交流学习