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(new BABYLON.Vector3(0, -10, 0), plugin); var skybox = BABYLON.MeshBuilder.CreateBox( "skyBox", { size: SKYBOX_SIZE }, scene ); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; var files = [ TEXTURE_FOLDER + "Space/space_left.jpg", TEXTURE_FOLDER + "Space/space_up.jpg", TEXTURE_FOLDER + "Space/space_front.jpg", TEXTURE_FOLDER + "Space/space_right.jpg", TEXTURE_FOLDER + "Space/space_down.jpg", TEXTURE_FOLDER + "Space/space_back.jpg" ]; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture( TEXTURE_FOLDER + "skybox", scene ); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; var spotLight = new BABYLON.SpotLight( "spotLight", new BABYLON.Vector3(0, GROUND_SIZE * 3, 0), new BABYLON.Vector3(0, -1, 0), Math.PI, 1, scene ); spotLight.range = GROUND_SIZE * 5; spotLight.diffuse = BABYLON.Color3.FromHexString("#e25822"); spotLight.diffuse = new BABYLON.Color3.FromHexString("#F96229"); //(1, 1, 1); spotLight.specular = new BABYLON.Color3.FromHexString("#FCE13D"); var ambientLight = new BABYLON.HemisphericLight( "ambientLight", new BABYLON.Vector3(0, -1, 0), scene ); ambientLight.diffuse = new BABYLON.Color3.FromHexString("#F96229"); ambientLight.specular = new BABYLON.Color3.FromHexString("#FCE13D"); ambientLight.intensity = 5; var camera = new BABYLON.ArcRotateCamera( "camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene ); camera.setTarget(new BABYLON.Vector3(0, ropeLength / 2, 0)); camera.attachControl(canvas, true); camera.setPosition(new BABYLON.Vector3(0, GROUND_SIZE, -GROUND_SIZE)); camera.upperRadiusLimit = SKYBOX_SIZE / 2; var light = new BABYLON.HemisphericLight( "hemi", new BABYLON.Vector3(1, 1, 0), scene ); var wood = new BABYLON.StandardMaterial("wood", scene); wood.diffuseTexture = new BABYLON.Texture( "//repo.bfw.wiki/bfwrepo/image/5f14d32694ad3.png" ); var blackMat = new BABYLON.StandardMaterial("blackMat", scene); blackMat.diffuseTexture = new BABYLON.Texture( "//repo.bfw.wiki/bfwrepo/image/6032e554eeb71.png" ); va.........完整代码请登录后点击上方下载按钮下载查看
网友评论0