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; background: black; 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; } main { position: relative; } section { position: relative; width: 100vw; min-height: 100vh; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <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/159/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/159/jsm/" } } </script> <!-- partial --> <script type="module" > "use strict"; import * as THREE from "three"; import { OrbitControls as e } from "three/addons/controls/OrbitControls.js"; import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js"; import { ParametricGeometry as t } from "three/addons/geometries/ParametricGeometry.js"; import { ParametricGeometries as o } from "three/addons/geometries/ParametricGeometries.js"; !(function () { function s(e, t, o) { H.subVectors(t.position, e.position); const s = H.length(); if (0 === s) return; const n = H.multiplyScalar(1 - o / s).multiplyScalar(0.5); e.position.add(n), t.position.sub(n); } function n() { (b.aspect = window.innerWidth / window.innerHeight), b.updateProjectionMatrix(), g.setSize(window.innerWidth, window.innerHeight); } function i(e) { requestAnimationFrame(i), (function (e) { T.set(100, 0, Math.sin(e / 1e3)), T.normalize(), T.multiplyScalar(300); const t = y.particles; if (a.enableWind) { let e; const o = new THREE.Vector3(), s = G.index, n = G.attributes.normal; for (let i = 0, a = s.count; i < a; i += 3) for (let a = 0; a < 3; a++) (e = s.getX(i + a)), o.fromBufferAttribute(n, e), R.copy(o).normalize().multiplyScalar(o.dot(T)), t[e].addForce(R); } for (let e = 0, o = t.length; e < o; e++) { const o = t[e]; o.addForce(w), o.integrate(u); } const o = y.constraints, n = o.length; for (let e = 0; e < n; e++) { const t = o[e]; s(t[0], t[1], t[2]); } for (let e = 0, o = m.length; e < o; e++) { let o = Math.round(m[e] * c + e); o > t.length && (o = t.length), o < 0 && (o = 0); const s = t[o]; s.position.copy(s.original), s.previous.copy(s.original); } })(e), v.update(), (function () { const e = y.particles; for (let t = 0, o = e.length; t < o; t++) { const o = e[t].position; G.attributes.position.setXYZ(t, o.x, o.y, o.z); } (G.attributes.position.needsUpdate = !0), G.computeVertexNormals(), (A.rotation.z -= 0.001), g.render(S, b); })(); } const a = { enableWind: !0 }, r = 0.97, l = 0.1, h = 25, c = 10, E = ((d = h * c), (p = 10 * h), function (e, t, o) { const s = (e - 0.5) * d, n = (t + 0.5) * p; o.set(s, n, 0); }); var d, p; const w = new THREE.Vector3(0, -981 * 1.4, 0).multiplyScalar(l), u = 0.018 * 0.018; let m = []; const T = new THREE.Vector3(0, 0, 0), R = new THREE.Vector3(), H = new THREE.Vector3(); class M { constructor(e, t, o, s) { (this.position = new THREE.Vector3()), (this.previous = new THREE.Vector3()), (this.original = new THREE.Vector3()), (this.a = new THREE.Vector3(0, 0, 0)), (this.mass = s), (this.invMass = 1 / s), (this.tmp = new THREE.Vector3()), (this.tmp2 = new THREE.Vector3()), E(e, t, this.position), E(e, t, this.previous), E(e, t, this.original); } addForce(e) { this.a.add(this.tmp2.copy(e).multiplyScalar(this.invMass)); } integrate(e) { const t = this.tmp.subVectors(this.position, this.previous); t.multiplyScalar(r).add(this.position), t.add(this.a.multiplyScalar(e)), (this.tmp = this.previous), (this.previous = this.position), (this.position = t), this.a.set(0, 0, 0); } } const y = new (class { constructor(e = 10, t = 10) { function o(t, o) { return t + o * (e + 1); } (this.w = e), (this.h = t); const s = [], n = []; for (let o = 0; o <= t; o++) for (let n = 0; n <= e; n++) s.push(new M(n / e, o / t, 0, l)); for (let i = 0; i < t; i++) for (let t = 0; t < e; t++) n.push([s[o(t, i)], s[o(t, i + 1)], h]), n.push([s[o(t, i)], s[o(t + 1, i)], h]); for (let i = e, a = 0; a < t; a++) n.push([s[o(i, a)], s[o(i, a + 1)], h]); for (let i = t, a = 0; a < e; a++) n.push([s[o(a, i)], s[o(a + 1, i)], h]); (this.particles = s), (this.constraints = n), (this.index = o); } })(c, 10); let f, b, S, g, v, G, x, z, C, P, V, B, A, F, L; m = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const U = new THREE.TextureLoader(); U.load( "//repo.bfw.wiki/bfwrepo/image/6203b7f7cade8.png", function (s) { ((F = s).anisotropy = 16), (F.colorSpace = THREE.SRGBColorSpace), U.load( "//repo.bfw.wiki/bfwrepo/image/657f9d1654193.jpeg", function (s) { ((L = s).anisotropy = 16), (function () { (f = document.createElement("div")), document.body.appendChild(f), ((S = new THREE.Scene()).background = new THREE.Color( 1118481 )), (b = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 80 )).position.set(0, 0.5, 5), S.add(new THREE.AmbientLight("white")); const s = new THREE.DirectionalLight("white", 2); let i; (s.position.y = 2), (s.position.z = 2), (s.castShadow = !0), (s.shadow.mapSize.width = 1024), (s.shadow.mapSize.height = 1024), S.add(s), (P = new THREE.MeshPhongMaterial({ specular: "silver", shininess: 100 })), (G = new t(o.plane(y.w, y.h), 10, 10)).center(), (z = new THREE.MeshLambertMaterial({ map: F, side: THREE.DoubleSide })), (B = new THREE.Mesh(G, z)).position.set(0.39, 0.12, 0), B.scale.set(0.0013, 0.0013, 0.0013), (B.castShadow = !0), S.add(B), (x = new THREE.BoxGeometry(10, 700, 10)), (z = new THREE.MeshLambertMaterial()), ((C = new THREE.Mesh(x, z)).position.x = -125), (C.position.y = 25), (C.receiveShadow = !0), (C.castShadow = !0), B.add(C), (x = new THREE.BoxGeometry(20, 10, 20)), ((C = new THREE.Me.........完整代码请登录后点击上方下载按钮下载查看
网友评论0