雷达效果

​飘扬的红旗

光柱效果

OD线

下雪

下雨

光墙效果

能源球

烟火效果

光圈效果

 function initScene() {scene = new THREE.Scene();}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(30, 40, 80)camera.lookAt(new THREE.Vector3(0, 0, 0));}function initLight() {//添加环境光var ambientLight = new THREE.AmbientLight(0xffffff);scene.add(ambientLight);var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(5, 10, 20);spotLight.castShadow = true;scene.add(spotLight);}function initModel() {//创建60个立方体模拟楼宇for (let i = 0; i < 60; i++) {const height = Math.random() * 10 + 2const width = 3
let cubeGeom;
if(i%2==0) cubeGeom = new THREE.BoxGeometry(width, height, width);
else cubeGeom = new THREE.CylinderGeometry( width/2, width/2, height, 32 );cubeGeom.setAttribute('color', new THREE.BufferAttribute(new Float32Array(cubeGeom.attributes.position.count * 3), 3))const colors = cubeGeom.attributes.color
let lr = 1;//Math.random()let r = lr * 0.2,g = lr * 0.2,b = lr * 0.5//设置立方体六个面24个顶点的颜色for (let i = 0; i < cubeGeom.attributes.color.count; i++) {colors.setXYZ(i, r, g, b)}//重置立方体顶部四边形的四个顶点的颜色// const k = 2// colors.setXYZ(k * 4 + 0, .0, g, 1.0)// colors.setXYZ(k * 4 + 1, .0, g, 1.0)// colors.setXYZ(k * 4 + 2, .0, g, 1.0)// colors.setXYZ(k * 4 + 3, .0, g, 1.0)const cube = new THREE.Mesh(cubeGeom, material)cube.position.set(Math.random() * 100 - 50, height / 2, Math.random() * 100 - 50)scene.add(cube)//绘制边框线const lineGeom = new THREE.EdgesGeometry(cubeGeom)const lineMaterial = new THREE.LineBasicMaterial({color: 0x018BF5,linewidth: 1,linecap: 'round',linejoin: 'round'})const line = new THREE.LineSegments(lineGeom, lineMaterial)line.scale.copy(cube.scale)line.rotation.copy(cube.rotation)line.position.copy(cube.position)scene.add(line)}}function initRender() {renderer = new THREE.WebGLRenderer({antialias: true,alpha: true})renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0x0f2d48, 1) // 设置背景颜色renderer.toneMapping = THREE.ACESFilmicToneMapping;document.getElementById("WebGL-output").appendChild(renderer.domElement);}