three+matter实现模拟小球重力从上到下掉落动画效果代码
代码语言:html
所属分类:三维
代码描述:three+matter实现模拟小球重力从上到下掉落动画效果代码
代码标签: three matter 模拟 小球 重力 从上 到下 掉落 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; background: black; display: flex; align-items: center; justify-content: center; } canvas { max-width: 100vw; max-height: 100vh; width: auto !important; height: auto !important; } </style> </head> <body > <canvas id="canvas"></canvas> <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.147.0/build/three.module.js", "three/examples/": "https://unpkg.com/three@0.147.0/examples/", "meshline": "https://unpkg.com/meshline@3.1.6/dist/index.js", "@callumacrae/utils/": "https://unpkg.com/@callumacrae/utils@0.3.6/built/", "seed-random": "https://cdn.skypack.dev/seed-random@2.2.0", "tweakpane": "https://cdn.skypack.dev/tweakpane@3.1.1", "@tweakpane/plugin-essentials": "https://cdn.skypack.dev/@tweakpane/plugin-essentials@0.1.5", "d3-ease": "https://cdn.skypack.dev/d3-ease@3.0.1", "matter-js": "https://cdn.skypack.dev/matter-js@0.18.0" } } </script> <script type="module"> import * as THREE from 'three'; import Matter from 'matter-js'; import { toVanillaCanvas } from '@callumacrae/utils/renderers/vanilla.js'; const sketchConfig = { cameraYOffset: 20, }; const sketchbookConfig = { type: 'threejs', // width: 720, // height: 720, capture: { enabled: false, duration: 6000, fps: 60, directory: 'rolling-sphere', }, sketchConfig, }; function initCamera(scene, { config, width, height }) { if (!config) throw new Error('???'); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100); camera.position.y = config.cameraYOffset; camera.position.z = 75; scene.add(camera); return camera; } const init = (props) => { if (!props.renderer || !props.config) throw new Error('???'); // props.initControls(({ pane, config }) => { // }); props.renderer.shadowMap.enabled = true; const scene = new THREE.Scene(); const camera = initCamera(scene, props); const pointLight = new THREE.PointLight(0xffffff, 0.15); pointLight.position.set(0, 30, 30); pointLight.castShadow = true; pointLight.shadow.radius = 10; pointLight.shadow.blurSamples = 16; scene.add(pointLight); // Duplicate the light so that the shadow is less intense const pointLightWithoutShadow = pointLight.clone(); pointLightWithoutShadow.intensity = 0.1; pointLightWithoutShadow.castShadow = false; scene.add(pointLightWithoutShadow); const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const engine = Matter.Engine.create(); engine.gravity.y = -0.8; const width = 40; const wallDepth = 12; const angle = 0.35; const xOffset = 15; const yOffset = 30; const w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0