three实现三维立方体盒子内粒子重力滚动动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维立方体盒子内粒子重力滚动动画效果代码
代码标签: three 三维 立方体 盒子 粒子 重力 滚动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { padding: 0; margin: 0; } .container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } </style> </head> <body > <div class="container"> <canvas id="canvas"></canvas> </div> <script type="importmap">{ "imports": { "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.145.0/three.module.min.js", "three/addons/": "https://threejs.org/examples/jsm/" } } </script> <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> <script type="module"> import * as CANNON from "https://cdn.skypack.dev/cannon-es"; import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js"; const canvasEl = document.querySelector("#canvas"); const containerEl = document.querySelector(".container"); let renderer,scene,camera,orbit,physicsWorld,boxMaterial,dummy,instancedBoxesMesh,boxesBodies = []; const params = { boxesNumber: 100, boxSize: .03, containerSize: 1, gravity: 10 }; initPhysics(); initScene(); throwBoxes(); boxMaterial.visible = true; render(); window.addEventListener("resize", updateSceneSize); containerEl.addEventListener("dblclick", throwBoxes); function initScene() { renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvasEl }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); camera = new THREE.PerspectiveCamera(45, containerEl.clientWidth / containerEl.clientHeight, .1, 100); camera.position.set(0, 1, .5).multiplyScalar(5); updateSceneSize(); dummy = new THREE.Object3D(); orbit = new OrbitControls(camera, canvasEl); orbit.enableZoom = false; orbit.enablePan = false; orbit.minPolarAngle = .1 * Math.PI; orbit.maxPolarAngle = .9 * Math.PI; orbit.autoRotate = true; orbit.autoRotateSpeed = 19; orbit.enableDamping = true; for (let i = 0; i < 6; i++) { const body = new CANNON.Body({ mass: 0, shape: new CANNON.Plane() }); physicsWorld.addBody(body); const posSign = i % 2 ? 1 : -1; if (i < 2) { body.position.x = posSign * .5 * params.contai.........完整代码请登录后点击上方下载按钮下载查看
网友评论0