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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0