threejs webgl效果 功能特效 光柱效果 雷达效果 OD线 雪 雨 光墙效果 能量球 烟火效果 光圈效果

雷达效果

​飘扬的红旗

光柱效果

OD线

下雪

下雨

光墙效果

能源球

烟火效果

threejs烟花效果

光圈效果

threejs 光圈 波动

管道动画1

管道动画2

 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 + 2
         const 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);
 }