three实现三维舞台小人招手粒子聚光灯效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维舞台小人招手粒子聚光灯效果代码
代码标签: three 三维 舞台 小人 招手 粒子 聚光灯
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: black; overscroll-behavior-x: none; overscroll-behavior-y: none; } body { font-family: "Asap", sans-serif; position: relative; width: 100vw; min-height: 100vh; text-align: center; overflow-x: hidden; color: white; } canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 0; } </style> </head> <body > <!-- particle spotlight https://codepen.io/wakana-k/pen/eYQjReV @wakana-k --> <!-- three.js --> <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/154/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/154/jsm/" } } </script> <script type="module"> /*! particle spotlight https://codepen.io/wakana-k/pen/eYQjReV @wakana-k */ function e(e) { const t = new THREE.SpotLight(e, 10); return ( t.castShadow = !0, t.angle = 0.3, t.penumbra = 0.2, t.decay = 2, t.distance = 50, t); } function t() { M.aspect = window.innerWidth / window.innerHeight, M.updateProjectionMatrix(), u.setSize(window.innerWidth, window.innerHeight); } function o(e) { new n.Tween(e.position). to( { x: 3 * Math.random() - 1.5, y: 1.5, z: 3 * Math.random() }, 2e3 * Math.random() + 2e3). easing(n.Easing.Quadratic.Out). start(); } import * as THREE from "three"; import n from "three/addons/libs/tween.module.js"; import { OrbitControls as a } from "three/addons/controls/OrbitControls.js"; import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; let s, i, r, l, E, d, h, c, w, p = []; const T = -Math.PI / 1.95, H = -Math.PI / 1.2; let R = 0.05, m = T; const u = new THREE.WebGLRenderer({ antialias: !0, canvas: canvas }); u.setPixelRatio(window.devicePixelRatio), u.setSize(window.innerWidth, window.innerHeight), u.useLegacyLights = !1; const M = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 500), y = new a(M, u.domElement), S = new THREE.Scene(), b = new THREE.MeshPhongMaterial({ color: 8421504 }), g = new THREE.MeshPhongMaterial({ color: 11184810 }), G = new THREE.PlaneGeometry(20, 20), f = new THREE.CylinderGeometry(0.3, 0.3, 0.05, 32), v = new THREE.Mesh(G, b); v.rotation.x = 0.5 * -Math.PI; const P = new THREE.Mesh(f, g), C = new THREE.AmbientLight(4473924), z = e("deeppink"), x = e("white"), A = e("royalblue"); let I, L, k; !function () { u.shadowMap.enabled = !0, u.shadowMap.type = THREE.PCFSoftShadowMap, M.position.set(0, 0.8, 4), z.position.set(2, 2, 2), x.position.set(0, 2, -2), A.position.set(-2, 2, -2), I = new THREE.SpotLightHelper(z), L = new THREE.SpotLightHelper(x), k = new THREE.SpotLightHelper(A), v.receiveShadow = !0, v.position.set(0, -0.5, 0), P.castShadow = !0, P.receiveShadow = !0, S.add(v), S.add(P), S.add(C), S.add(z, x, A), i = new THREE.PointsMaterial({ size: 0.02, sizeAttenuation: !0, transparent: !0, opacity: 0.3, blending: THREE.AdditiveBlending }); let e, o = new THREE.Vector3(), n = []; s = new THREE.BufferGeometry(); for (let t = 0; t < 2e4; t++) { const t = Math.acos(THREE.MathUtils.randFloatSpread(2)), a = THREE.MathUtils.randFloatSpread(360); o.x = 1 * Math.sin(t) * Math.cos(a), o.y = 5 * Math.abs(1 * Math.sin(t) * Math.sin(a)) - 5, o.z = 1 * Math.cos(t), e = Math.random(), o.copy(o).multiplyScalar(e), n.push(o.x, o.y, o.z); } s.setAttribute("position", new THREE.Float32Buffer.........完整代码请登录后点击上方下载按钮下载查看
网友评论0