babylonjs实现三维天空下草地上摇动的秋千效果代码
代码语言:html
所属分类:三维
代码描述:babylonjs实现三维天空下草地上摇动的秋千效果代码,点击秋千可摇动。
代码标签: babylonjs 三维 天空 草地 摇动 秋千
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #renderCanvas { position: absolute; width: 100%; height: 100%; touch-action: none; left: 0%; right: 0%; bottom: 0%; top: 0%; } html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Rajdhani", sans-serif; color: white; font-size: large; } a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } .container { position: relative; height: 100%; width: 100%; } .header { position: absolute; left: 0; right: 0; top: 0; padding-left: 10px; text-align: center; } .footer { position: absolute; right: 0; bottom: 0; margin: 5px; padding: 5px; } a:hover, a:active { background-color: red; } .center { position: absolute; background-color: #00bfa5; left: 0%; right: 0%; bottom: 0%; top: 0%; margin: 10px; padding: 10px; } #fps { position: absolute; background-color: black; border: 2px solid red; text-align: center; font-size: 16px; color: white; top: 15px; right: 10px; width: 60px; height: 20px; } </style> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap" rel="stylesheet"> <!-- Babylon.js --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ammo.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cannon.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Oimo.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/earcut.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylon.5.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.materials.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.proceduralTextures.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.postProcess.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.loaders.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.serializers.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylon.gui.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylon.inspector.bundle.js"></script> </head> <body> <div class="container"> <div class="container"><canvas id="renderCanvas" class="container" /></div> <div class="footer"></div> <div class="header"> </div> </div> <div id="fps">0</div> <script > const TEXTURE_FOLDER = "//repo.bfw.wiki/bfwrepo/images/three/sky/"; const GROUND_SIZE = 50; const SKYBOX_SIZE = GROUND_SIZE * 10.0; const nbPoints = 10; const ropeLength = 35; const radius = 0.2; // States var g_timer = null; var shouldAnimateCamera = true; let config = { animateCamera: true }; // Views const divFps = document.getElementById("fps"); const canvas = document.getElementById("renderCanvas"); async function loadDemo() { // Essential const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); const scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3.Black(); await Ammo(); var plugin = new BABYLON.AmmoJSPlugin(false); plugin.setTimeStep(1 / 10); plugin.setFixedTimeStep(1 / 10); plugin.setMaxSteps(1); scene.enablePhysics(ne.........完整代码请登录后点击上方下载按钮下载查看
网友评论0