Three.js 亮光标记教程
亮光标记 ·Light Icon· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么OrbitControls 相机轨道交互GSAP 时间轴与补间动画requestAnimationFrame渲染循环与resize自适应效果说明本案例演示亮光标记效果基于 WebGL 实现「亮光标记」可视化效果附完整可运行源码核心用到 OrbitControls、GSAP。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 OrbitControls 并处理 resizemixer.update(delta) 或 gsap.to 驱动属性搭建灯光与环境如有requestAnimationFrame 循环 update render代码要点import { Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, TextureLoader, WebGLRenderer } from threeimport * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import gsap from gsapconst size { width: window.innerWidth, height: window.innerHeight } const scene new Scene()const camera new PerspectiveCamera(45, size.width / size.height, 0.1, 1000) camera.position.set(30, 30, 30)const renderer new WebGLRenderer({ antialias: true }) renderer.setSize(size.width, size.height) renderer.setPixelRatio(window.devicePixelRatio) document.body.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)const circlePlane new PlaneGeometry(6, 6) const circleTexture new TextureLoader().load(FILE_HOST images/channels/label.png) const circleMaterial new MeshBasicMaterial({ color: 0xffffff, map: circleTexture, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }) const circleMesh new Mesh(circlePlane, circleMaterial) circleMesh.rotation.x -Math.PI / 2 gsap.to(circleMesh.scale, { duration: 1 Math.random() * 0.5, x: 1.5, y: 1.5, repeat: -1 })const lightPillarTexture new THREE.TextureLoader().load(FILE_HOST images/channels/light_column.png) const lightPillarGeometry new THREE.PlaneGeometry(3, 20) const lightPillarMaterial new THREE.MeshBasicMaterial({ color: 0xffffff, map: lightPillarTexture, alphaMap: lightPillarTexture, transparent: true, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, depthWrite: false }) const lightPillar new THREE.Mesh(lightPillarGeometry, lightPillarMaterial) lightPillar.add(lightPillar.clone().rotateY(Math.PI / 2)) circleMesh.position.set(0, -10, 0)lightPillar.add(circleMesh) scene.add(lightPillar)animate() function animate() { requestAnimationFrame(animate) renderer.render(scene, camera) }完整源码GitHub小结本文提供亮光标记完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
