原生的Three.js Cesium.js的开源案例已获近1000Star

原创已于 2025-01-08 11:23:44 修改 · 877 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #智慧城市 #前端 #github #three

于 2025-01-08 11:20:49 首次发布

纯原生 three cesium 案例

由于前端得发展， three.js 和 cesium.js 越来越被越来越多得前端接触到，由于其学习路线比较复杂，且官网案例覆盖不全，因此在今年我们共同搭建了一个免费得 three 和 cesium 案例学习平台，未来将免费逐步的更新案例。
主要侧重于开发者的技术交流，每个开发者可以将自己拿手案例上传，大家之间可以互相学习借鉴, 以此减少大家在工作中的学习成本，方便技术交流学习，遇到不会的问题大家可以互相帮助解决。

方便技术交流学习，遇到不会的问题大家可以互相帮助解决。

在这个数字化时代，三维技术已经成为我们生活中不可或缺的一部分。无论是在游戏、电影制作、建筑设计还是虚拟现实中，三维技术都发挥着重要作用。今天，让我们一起探索开源的Three.js，一个强大的JavaScript库，它让我们能够轻松地在网页上创建和显示3D图形。

Three.js是一个基于WebGL的JavaScript库，它提供了一个直观的API来创建和显示动画3D图形在浏览器中。它支持多种3D对象和材质，以及复杂的光照和阴影效果。
Three.js的强大功能在各种案例中得到了充分的展示。以下是一些令人印象深刻的案例：
着色器：着色器是Three.js中用于渲染3D图形的程序。通过着色器，你可以创造出各种令人惊叹的视觉效果。

粒子系统：Three.js的粒子系统可以用来创建烟雾、火焰、爆炸等效果，为3D场景增添活力。

轮廓光：通过后期处理技术，Three.js可以为3D对象添加轮廓光，使其在场景中更加突出。

模型加载：Three.js支持加载多种格式的3D模型，如OBJ、FBX等，让你能够将复杂的3D模型轻松地集成到你的项目中。

高级案例：例如小米su7的展示，展示了Three.js在产品展示方面的应用。
智慧城市数字孪生常用功能列表
模型加载 - 使用three.js加载不同格式的模型。
轮廓光辉光后期处理得各种效果。
天空盒加载
环境贴图效果
相机视角动画
物体沿着路径运动动画
粒子效果
围墙着色器效果
类似echarts 的 three.js 3d 地图
城市白模建筑扫光
three 实现地球效果
飞线效果
烟雾着色器，报警着色器动画
css2D css3D 交互标签使用
3d 文字
模型动画播放
以及各种工具和各种案例效果 three.js 编辑器等各种 demo

每日更新作者更新到死

开发预览地址：https://z2586300277.github.io/three-cesium-examples

国内站点预览：http://threehub.cn

github地址: https://github.com/z2586300277/three-cesium-examples

在这里插入图片描述

import * as THREE from 'three';
import gsap from 'gsap';

window.addEventListener('load', init, false);
function init() {
  createWorld();
  createLights();
  createPrimitive();
  createParticleWord();
  animation();
}
var scene, camera, renderer;
var world = new THREE.Object3D();
var _width, _height;
function createWorld() {
  _width = window.innerWidth;
  _height= window.innerHeight;
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x000000, 4, 12);
  //scene.background = new THREE.Color(0xF00000);
  camera = new THREE.PerspectiveCamera(35, _width/_height, 1, 1000);
  camera.position.set(0,0,8);

  renderer = new THREE.WebGLRenderer({antialias:true, alpha:false});
  renderer.setSize(_width, _height);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
  _width = window.innerWidth;
  _height = window.innerHeight;
  renderer.setSize(_width, _height);
  camera.aspect = _width / _height;
  camera.updateProjectionMatrix();
  console.log('- resize -');
}
var _ambientLights, _lights;
function createLights() {
  _ambientLights = new THREE.HemisphereLight(0x111111, 0x000000, 5);
  _lights = new THREE.PointLight(0xF00555, 0.5);
  _lights.position.set(0, 0, 3);
  _lights.castShadow = true;
  scene.add(_ambientLights);
  scene.add(_lights);
}
var createParticleWord = function() {
  var geometry = new THREE.IcosahedronGeometry(0.7, 3);
  var circle_start = 10;
  
  for (var i = 0; i<120; i++) {
    var material = new THREE.MeshBasicMaterial( {
      color: 0xFFFF
   } );
    var circle = new THREE.Mesh( geometry, material );
    circle.castShadow  = true;
    circle.receivedShadow = true;
    
    circle.position.x = -Math.random()* circle_start + Math.random()* circle_start;
    circle.position.z = -Math.random()* circle_start + Math.random()* circle_start;
    circle.position.y = -Math.random()* circle_start + Math.random()* circle_start;
    var circle_scale = Math.random()* 1;
    var circle_random = Math.random() * 1;
    circle.scale.set(circle_scale, circle_scale, circle_scale);

    var object_pos = world.children[ 0 ];
    var object_pos_range = 0;
    setInterval(function(){  
      object_pos.position.x = -Math.random() * object_pos_range + Math.random() * object_pos_range;
      object_pos.position.y = -Math.random() * object_pos_range + Math.random() * object_pos_range;
      object_pos.position.z = -Math.random() * object_pos_range + Math.random() * object_pos_range;
    }, 1000);
    world.add( circle );
  }
  scene.add(world);
}
var primitiveElement = function() {
  this.mesh = new THREE.Object3D();
  var geo = new THREE.IcosahedronGeometry();
  var mat = new THREE.MeshBasicMaterial({color:0x500000});
  var mesh = new THREE.Mesh(geo, mat);

  //this.mesh.add(mesh);

}
var _primitive;
function createPrimitive() {
  _primitive = new primitiveElement();
  _primitive.mesh.scale.set(1,1,1);
  scene.add(_primitive.mesh);
}
function createGrid() {
  var gridHelper = new THREE.GridHelper(20, 20);
  gridHelper.position.y = -1;
  scene.add(gridHelper);
}

function animation() {
  var time = Date.now() * 0.003;
  _primitive.mesh.rotation.y += 0.003;
  world.rotation.y = Math.sin(time) * Math.PI / 180;
  world.rotation.z = Math.cos(time) * Math.PI / 180;
  var object_place = world.children[ 0 ];
  object_place.visible = false;

  for ( let i = 0, l = world.children.length; i < l; i ++ ) {
    var object = world.children[ i ];
    var object_left = world.children[ i-1 ];
    if (i>1) {

      gsap.to(object.position, 2, {
        x:Math.cos(object_left.position.x * Math.PI) * 1,
        y:Math.sin(object_left.position.y * Math.PI) * 1,
        z:Math.cos(object_left.position.z * Math.PI) * 1,
      });
    
    }
  }

  var object_speed = 0.6;
  var object_guide = world.children[ 1 ];
  object_guide.position.x += Math.sin(object_place.position.x) - object_guide.position.x * object_speed;
  object_guide.position.y += Math.cos(object_place.position.y) - object_guide.position.y * object_speed;
  object_guide.position.z += object_place.position.z - object_guide.position.z * object_speed;

  camera.lookAt(scene.position);

  requestAnimationFrame(animation);
  renderer.render(scene, camera);
}

/**
 * 名称: 圆泡吸附
 * 作者: 优雅永不过时 https://github.com/z2586300277
 * 参考来源：https://codepen.io/vcomics/pen/KBMyjE 
 */