//粒子 import 'babel-polyfill'; import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import * as dat from 'dat.gui' import { AxesHelper } from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); window.camera = camera; camera.position.set(-35.36881978334946, -150.83434402135708, 158.45363289294562) scene.add(camera); const textureLoader = new THREE.TextureLoader(); const pointTexture = textureLoader.load('./textures/rain/smoke.png') let yunGroup = new THREE.Group(); const createPlan = (x, y, z) => { const planGeometry = new THREE.PlaneBufferGeometry(564, 300); const material = new THREE.MeshStandardMaterial({ map: pointTexture, alphaMap: pointTexture, transparent: true }); material.castShadow = true; const mesh = new THREE.Mesh(planGeometry, material); mesh.position.set(x, y, z) mesh.rotation.z = -Math.PI / 2 yunGroup.add(mesh) } for (let i = 0; i < 30; i++) { const x = Math.random() * 1000 - 460 const y = 600; const z = Math.random() * 500 - 400; createPlan(x, y, z) } scene.add(yunGroup); //下雨 const rainTexture = textureLoader.load('./textures/particles/rain.png') const pointBuffer = new THREE.BufferGeometry(); const count = 3000; const options = { x: 1100, y: 1000, z: 500 } //设置顶点缓冲区位置 const position = []; for (let i = 0; i <= count; i++) { position.push((Math.random() - 0.5) * options.x) position.push(Math.random() * options.y) position.push(Math.random() * 500 - 400) } pointBuffer.setAttribute('position', new THREE.Float32BufferAttribute(position, 3)) const pointMaterila = new THREE.PointsMaterial({ map: rainTexture, alphaMap: rainTexture, transparent: true, size: 10, opacity: 0.7 }); const point = new THREE.Points(pointBuffer, pointMaterila); scene.add(point) //加入环境光 const ambientLight = new THREE.AmbientLight(0x555555); scene.add(ambientLight) const gui = new dat.GUI(); //加入点光源 const lightning = new THREE.PointLight(0x062d89, 30, 500, 1.7); lightning.position.set(200, 300, 100); console.log(lightning.power); scene.add(lightning); gui.add(lightning, 'power').min(10).max(1000).step(10).name('power') const pointAxseHelper = new THREE.PointLightHelper(lightning, 1); scene.add(pointAxseHelper) const axseHelper = new AxesHelper(500); // scene.add(axseHelper) const render = new THREE.WebGLRenderer({ antialias: true }); render.shadowMap.enabled = true; const fog = new THREE.FogExp2(0x1c1c2a, 0.002) render.setClearColor(fog.color) render.setSize(window.innerWidth, window.innerHeight); const control = new OrbitControls(camera, render.domElement); control.enableDamping = true; const renderFun = () => { if (Math.random() > 0.92) { if (lightning.power < 100) { const x = Math.random() * 1000 - 460 const y = 600; const z = Math.random() * 500 - 400; lightning.position.set(x, y, z) } lightning.power = Math.random() * 150 } let positions = pointBuffer.attributes.position.array for (let i = 1; i < positions.length; i += 3) { //改变Y坐标,加速运动 let y = positions[i]; y -= 2; if (y < -50) { pointBuffer.attributes.position.array[i] = options.y; } else { pointBuffer.attributes.position.array[i] = y; } } pointBuffer.attributes.position.needsUpdate = true control.update(); render.render(scene, camera); requestAnimationFrame(renderFun) } renderFun(); document.body.appendChild(render.domElement);
正文
Threejs下雨效果
文章版权声明:除非注明,否则均为
譬如朝露博客原创文章,转载或复制请以超链接形式并注明出处。
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接