babylonJs微信小程序，学习代码资源-CSDN下载

共117个文件

html：58个

js：19个

png：15个

微信小程序

babylon

79 浏览量 2024-08-22 08:51:41 上传评论收藏 38.63MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

babylonJs 微信小程序，学习代码（117个子文件）

dude.babylon 2.63MB

car.babylon 34KB

scene.babylon 5KB

Runyon_Canyon_A_2k_cube_specular.dds 8MB

.gitignore 37B

valleyvillage.glb 9.05MB

village.glb 1.57MB

car.glb 163KB

01.html 10KB

07.html 8KB

06.html 8KB

01.html 7KB

05.html 7KB

02.html 7KB

04.html 7KB

04.html 6KB

07.html 6KB

05.html 6KB

03_b.html 6KB

05.html 6KB

01.html 6KB

04.html 6KB

03.html 6KB

06.html 5KB

03.html 5KB

01.html 5KB

02.html 5KB

01.html 5KB

04.html 5KB

02.html 5KB

03.html 5KB

01.html 5KB

03.html 4KB

06.html 4KB

03.html 4KB

01.html 4KB

02.html 4KB

05.html 4KB

06.html 4KB

05.html 4KB

04.html 4KB

05.html 4KB

03.html 4KB

03.html 3KB

04.html 3KB

02.html 3KB

04.html 3KB

02.html 3KB

01.html 3KB

04.html 3KB

02.html 3KB

01.html 3KB

05.html 2KB

02.html 2KB

03.html 2KB

05.html 2KB

08.html 1KB

07.html 947B

06.html 929B

02.html 882B

01.html 856B

1.jpeg 243KB

2.jpeg 237KB

3.jpeg 186KB

0.jpeg 182KB

roof.jpg 656KB

skybox_nx.jpg 20KB

skybox_px.jpg 19KB

skybox_nz.jpg 17KB

skybox_pz.jpg 16KB

skybox_py.jpg 9KB

skybox_ny.jpg 1KB

babylon.viewer.js 4.34MB

babylon.js 4.29MB

ammo.js 1.72MB

babylon.inspector.bundle.js 1.1MB

babylon.gui.min.js 612KB

babylonjs.loaders.js 592KB

cannon.js 384KB

babylonjs.materials.min.js 191KB

babylonjs.loaders.min.js 178KB

Oimo.js 152KB

Assets.js 141KB

babylonjs.serializers.min.js 92KB

HavokPhysics_umd.js 64KB

dat.gui.min.js 56KB

pep.js 41KB

babylonjs.proceduralTextures.min.js 32KB

babylonjs.postProcess.min.js 11KB

earcut.min.js 6KB

car.js 3KB

babylon.js.map 16.26MB

babylon.gui.min.js.map 1.7MB

babylonjs.loaders.min.js.map 776KB

babylonjs.proceduralTextures.min.js.map 91KB

共 117 条

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animation</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 70%; height: 70%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; touch-action: none; } #canvasZone { width: 100%; height: 100%; } h2 { text-align: center; margin: 0; padding: 0; line-height: 150%; } </style> <script src="../js/babylon.js"></script> <script src="../js/babylonjs.loaders.min.js"></script> <script src="../js/earcut.min.js"></script> <script src="../js/pep.js"></script> </head> <body> <h2>alt+鼠标单击 - 暂停/播放汽车动画</h2> <h2>shift+鼠标单击 - 暂停/播放车轮动画</h2> <canvas id="renderCanvas" touch-action="none"></canvas> <script> const canvas = document.getElementById("renderCanvas"); const engine = new BABYLON.Engine(canvas, true); //声明2个变量，方便控制动画 let wheelAnimatables, carAnimatable; const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 2, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0)); const car = buildCar(); const wheels = buildWheels(car); car.rotation.x = -Math.PI / 2; wheelAnimatables = wheelAnimation(scene, wheels); carAnimatable = carAnimation(scene, car); showAxis(0.5, scene); return scene; } const buildCar = () => { //base const outline = [ new BABYLON.Vector3(-0.3, 0, -0.1), new BABYLON.Vector3(0.2, 0, -0.1), ] //curved front for (let i = 0; i < 20; i++) { outline.push(new BABYLON.Vector3(0.2 * Math.cos(i * Math.PI / 40), 0, 0.2 * Math.sin(i * Math.PI / 40) - 0.1)); } //top outline.push(new BABYLON.Vector3(0, 0, 0.1)); outline.push(new BABYLON.Vector3(-0.3, 0, 0.1)); //car face UVs const faceUV = []; faceUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1); faceUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5); faceUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5); //car material const carMat = new BABYLON.StandardMaterial("carMat"); carMat.diffuseTexture = new BABYLON.Texture("../assets/img/car.png"); //back formed automatically const car = BABYLON.MeshBuilder.ExtrudePolygon("car", { shape: outline, depth: 0.2, faceUV: faceUV, wrap: true }); car.material = carMat; return car; } const buildWheels = (car) => { //wheel face UVs const wheelUV = []; wheelUV[0] = new BABYLON.Vector4(0, 0, 1, 1); wheelUV[1] = new BABYLON.Vector4(0, 0.5, 0, 0.5); wheelUV[2] = new BABYLON.Vector4(0, 0, 1, 1); //car material const wheelMat = new BABYLON.StandardMaterial("wheelMat"); wheelMat.diffuseTexture = new BABYLON.Texture("../assets/img/wheel.png"); const wheelRB = BABYLON.MeshBuilder.CreateCylinder("wheelRB", { diameter: 0.125, height: 0.05, faceUV: wheelUV }) wheelRB.material = wheelMat; wheelRB.parent = car; wheelRB.position.z = -0.1; wheelRB.position.x = -0.2; wheelRB.position.y = 0.035; const wheelRF = wheelRB.clone("wheelRF"); wheelRF.position.x = 0.1; const wheelLB = wheelRB.clone("wheelLB"); wheelLB.position.y = -0.2 - 0.035; const wheelLF = wheelRF.clone("wheelLF"); wheelLF.position.y = -0.2 - 0.035; const wheels = []; wheels.push(wheelRB); wheels.push(wheelRF); wheels.push(wheelLB); wheels.push(wheelLF); return wheels; } //轮子转动 const wheelAnimation = (scene, wheels) => { //定义一个动画，每秒30帧，绕y轴转动 const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); //动画关键帧 const wheelKeys = []; //起始帧 wheelKeys.push({ frame: 0, value: 0 }); //截止帧(即：第30帧，转到360度) wheelKeys.push({ frame: 30, value: 2 * Math.PI }); //设置关键帧 animWheel.setKeys(wheelKeys); let result = []; for (let i = 0; i < wheels.length; i++) { //将wheel与动画关联 wheels[i].animations = []; wheels[i].animations.push(animWheel); //开始动画,最后的true表示循环播放 result.push(scene.beginAnimation(wheels[i], 0, 30, true)); } return result; } //car运动 const carAnimation = (scene, car) => { const animCar = new BABYLON.Animation("carAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); //动画关键帧 const carKeys = []; //起始帧 carKeys.push({ frame: 0, value: -1 }); carKeys.push({ frame: 30, value: -0.9 }); //截止帧(即：第120帧，走到x=8) carKeys.push({ frame: 120, value: 0.9 }); carKeys.push({ frame: 150, value: 1 }); //设置关键帧 animCar.setKeys(carKeys); car.animations = []; car.animations.push(animCar); //开始动画 return scene.beginAnimation(car, 0, 150, true); } /***********Create and Draw Axes**************************************/ const showAxis = (size, scene) => { const makeTextPlane = (text, color, size) => { const dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true); dynamicTexture.hasAlpha = true; dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true); const plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true); plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene); plane.material.backFaceCulling = false; plane.material.specularColor = new BABYLON.Color3(0, 0, 0); plane.material.diffuseTexture = dynamicTexture; return plane; }; const axisX = BABYLON.Mesh.CreateLines("axisX", [ new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0) ]);

评论收藏

内容反馈