three实现三维血色万圣节夜晚乌鸦群集飞翔动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维血色万圣节夜晚乌鸦群集飞翔动画效果代码
代码标签: three 三维 血色 万圣节 夜晚 乌鸦 群集 飞翔
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; background: url("//repo.bfw.wiki/bfwrepo/image/63495b36ed222.png"); background-size: cover; background-position: 20% 30%; } body:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(transparent 60%, black 120%); pointer-events: none; } canvas { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); } </style> </head> <body > <script type="module"> import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js"; import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js"; import { OBJLoader } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/loaders/OBJLoader.js"; import { Noise } from "//repo.bfw.wiki/bfwrepo/js/module/noisejs.js"; console.clear(); let maxSpeed = 0.2; let maxForce = 0.1; const perceptionRadius = 8; let sceneRadius = 100; const noiseX = new Noise(Math.random()); const noiseY = new Noise(Math.random()); const noiseZ = new Noise(Math.random()); /* SETUP */ const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 50; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); /* CONTROLS */ const controls = new OrbitControls(camera, renderer.domElement); const ambientLight = new THREE.AmbientLight(0x000000); scene.add(ambientLight); const light1 = new THREE.PointLight(0xffffff, 1, 0); light1.position.set(0, 200, 0); scene.add(light1); const light2 = new THREE.PointLight(0xffffff, 1, 0); light2.position.set(100, 200, 100); scene.add(light2); const light3 = new THREE.PointLight(0xffffff, 1, 0); light3.position.set(-100, -200, -100); scene.add(light3); /* BASIC BOX */ class Bat { constructor(mesh) { this.randFactor = Math.random() * 2; let scale = Math.random() * 0.5 + 0.3; this.scale = new THREE.Vector3(scale, scale, scale); this.position = new THREE.Vector3().random().subScalar(0.5).multiplyScalar(80); this.velocity = new THREE.Vector3().random().subScalar(0.5); this.velocity.setLength(Math.random() * 2 + 2); this.acceleration = new THREE.Vector3(); } align() { return alignment; } separation() { return separation; } cohesion() { return cohesion; } walls() { if (this.position.x < -sceneRadius) { this.position.x = sceneRadius; } else if (this.position.x > sceneRadius) { this.position.x = -sceneRadius; } else if (this.position.y < -sceneRadius) { this.position.y = sceneRadius; } else if (this.position.y > sceneRadius) { this.position.y = -sceneRadius; } else if (this.position.z < -sceneRadius) { this.position.z = sceneRadius; } else if (this.position.z > sceneRadius) { this.position.z = -sceneRadius; } } flock() { let alignment = new THREE.Vector3(); let c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0