threejs打造一个鼠标跟随点击跳跃的三维山羊效果代码
代码语言:html
所属分类:三维
代码描述:threejs打造一个鼠标跟随点击跳跃的三维山羊效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700); .app { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; cursor: pointer; overflow: hidden; } * { -webkit-tap-highlight-color: transparent; } .scene-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgb(85,121,56); background-image: linear-gradient(0deg, #7cb64c 0%, #81a459 100%); } .infos { position: fixed; bottom: 0; left: 0; width: 100%; height: 84px; z-index: 1; text-align: center; pointer-events: none; color: #fff; font-family:'Roboto', sans-serif; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } .instructions { margin-bottom: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 1.3; padding: 0 50px; } .infos .link { pointer-events: all; cursor: pointer; text-decoration: none; color: #000000; font-weight: bold; transition: all 0.5s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .infos .link:hover { color: #fff; } </style> </head> <body > <div class='scene-background'></div> <canvas class='app'></canvas> <div class='infos'> <p class='instructions'> Click and hold to make the sheep jump the highest. </p> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/BufferGeometryUtils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script > //THREEJS Variables let renderer, camera, scene, background, floor, cameraTarget = new THREE.Vector3(), shadowLight, keyLight, hemiLight, sheepGroup, spaceGroup, cloudsGroup, treeGroup, head, poo, corps, eyeLeft, eyeRight, pupilleLeft, pupilleRight; let isDown = false, downCounter = 0, pooCounter = 0, status = 'default', mouse = { x: 0, y: 0 }, currentJumpStemp = 0; // Whole config const CONFIG = { CAMERA: { fov: 45, nearPlane: 1, farPlane: 20 }, PHYSICS: { gravity: 0.1, falling: false, colorize: false, force: 0, forceTarget: 0 }, BLINK: { delay: THREE.MathUtils.randInt(100, 300), counter: 0, length: 7, double: false }, STEPS: [ { altitude: 2, impulse: 0.2, angle: 10, diffStart: 0, flyingLerp: 0.05, colorStart: '#cfe1e3', colorEnd: '#cfe1e3' }, { altitude: 6, impulse: 0.15, angle: 22, diffStart: 0, flyingLerp: 0.05, colorStart: '#51c7ab', colorEnd: '#51b1c7' }, { altitude: 12, impulse: 0.1, angle: 30, diffStart: 1.5, flyingLerp: 0.03, colorStart: '#6eaceb', colorEnd: '#4f9be8' }, { altitude: 30, impulse: 0.05, angle: 40, diffStart: 3, flyingLerp: 0.015, colorStart: '#0f0d1c', colorEnd: '#000000' }], COLORS: { clouds: 0xfefae0, floor: 0x4b6b30, tree: 0x1a1412, leaf: 0x133019, poo: 0x402e2a, white: new THREE.Color(1, 1, 1), red: new THREE.Color(0xf71735) } }; //Backgrounds colors const backgrounds = []; // INIT THREEJS function init() { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x4b6b30, CONFIG.CAMERA.nearPlane, CONFIG.CAMERA.farPlane * 0.5); camera = new THREE.PerspectiveCamera(CONFIG.CAMERA.fov, window.innerWidth / window.innerHeight, CONFIG.CAMERA.nearPlane, CONFIG.CAMERA.farPlane); camera.position.set(0, 2, 5); renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: document.querySelector(".app") }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); window.addEventListener("resize", onResize); window.addEventListener("mousedown", onDown); window.addEventListener("touchstart", onDown); window.addEventListener("mouseup", onUp); window.addEventListener("touchend", onUp); window.addEventListener("mousemove", onMove); window.addEventListener("touchmove", onTouchMove); window.addEventListener("keydown", onKeyDown); window.addEventListener("keyup", onKeyUp); } function addFloor() { floor = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: CONFIG.COLORS.floor })); floor.rotation.x = -Math.PI / 2; floor.position.z = 1; floor.receiveShadow = true; floor.scale.set(20, 10, 1); scene.add(floor); } function addSheep() { const loader = new THREE.GLTFLoader(); loader.load( '//repo.bfw.wiki/bfwrepo/threemodel/sheep.gltf', gltf => { sheepGroup = gltf.scene; sheepGroup.position.set(0, 0, 0.8); sheepGroup.scale.set(0.5, 0.5, 0.5); sheepGroup.receiveShadow = true; sheepGroup.castShadow = true; sheepGroup.rotation.y = THREE.MathUtils.degToRad(-50); scene.add(sheepGroup); poo = new THREE.Mesh(new THREE.BoxGeometry(0.25, 0.25, 0.25), new THREE.MeshLambertMaterial({ fog: false, color: CONFIG.COLORS.poo })); poo.name = "poo"; poo.position.set(0, -0.2, 0); poo.userData.position = poo.position.clone(); sheepGroup.add(poo); const exceptions = ['corps', 'Head', 'Nose', 'Face', 'EyeLeft', 'EyeRight']; sheepGroup.traverse(child => { if (child.isMesh) { child.material.fog = false; child.userData.position = child.position.clone(); child.userData.scale = child.scale.clone(); child.castShadow = true; if (exceptions.indexOf(child.name) === -1) child.receiveShadow = true; } }); corps = sheepGroup.getObjectByName('corps'); head = sheepGroup.getObjectByName('Head'); eyeLeft = head.getObjectByName("EyeLeft"); eyeRight = head.getObjectByName("EyeRight"); pupilleLeft = head.getObjectByName("PupilleLeft"); pupilleRight = head.getObjectByName("PupilleRight"); pateBottomLeft = sheepGroup.getObjectByName("pateBottomLeft"); pateBottomRight = sheepGroup.getObjectByName("pateBottomRight"); pateFrontLeft = sheepGroup.getObjectByName("pateFrontLeft"); pateFrontRight = sheepGroup.getObjectByName("pateFrontRight"); }); } function addDecor() { //------ TREES treeGroup = new THREE.Group(); treeGroup.position.set(3, 1, 0); scene.add(treeGroup); const treeGeom = new THREE.CylinderGeometry(.2, .2, 6, 3); const tree = new THREE.Mesh(treeGeom, new THREE.MeshToonMaterial({ fog: false, color: CONFIG.COLORS.tree })); tree.castShadow = true; tree.position.x = -0.15; tree.position.z = 1.2; tree.rotation.y = Math.PI / 2; treeGroup.add(tree); const leafGeom = new THREE.SphereGeometry(2, 4, 4); const leaf = new THREE.Mesh(leafGeom, new THREE.MeshToonMaterial({ fog: false, color: CONFIG.COLORS.leaf })); leaf.position.set(0, 3, 0); leaf.scale.set(0.75, 0.75, 0.75); tree.add(leaf); const treeLeft = tree.clone(); treeLeft.rotation.y = -Math.PI / 2; treeLeft.position.set(-6, -1.25, -0.5); treeGroup.add(treeLeft); //---- CLOUDS cloudsGroup = new THREE.Group(); cloudsGroup.position.set(0, 8, 0); scene.add(cloudsGroup); const cloudPart1 = new THREE.BoxGeometry(1.5, 1.5, 1.5); const cloudPart2 = new THREE.BoxGeometry(1.5, 1.5, 1.5); const cloudPart3 = new THREE.BoxGeometry(1.5, 1.5, 1.5); cloudPart1.translate(-0.5, 0, 0); cloudPart2.translate(0, 0.5, 0); cloudPart3.translate(1, -0.5, 0); const cloudGeom = THREE.BufferGeometryUtils.mergeBufferGeometries([cloudPart1, cloudPart2, cloudPart3]); const cloud = new THREE.Mesh(cloudGeom, new THREE.MeshLambertMaterial({ fog: false, color: CONFIG.COLORS.clouds }, 500)); cloud.scale.set(1, 0.7, 0.8); cloud.rotation.y = -Math.PI / 8; cloud.position.set(6, 4, -10); cloudsGroup.add(cloud); const cloudLeft = cloud.clone(); cloudLeft.scale.set(1.2, 0.8, 0.5); cloudLeft.position.set(-8, 1, -7); cloudLeft.rotation.y = -Math.PI / 12; cloudsGroup.add(cloudLeft); //---- SPACE spaceGroup = new THREE.Group(); spaceGroup.position.set(0, 30, 0); const vertices = []; for (let i = 0; i < 1000; i++) { const x = THREE.MathUtils.randFloatSpread(10); const y = THREE.MathUtils.randFloatSpread(10); const z = THREE.MathUtils.randFloatSpread(10); vertices.push(x, y, z); } const spaceGeom = new THREE.BufferGeometry(); spaceGeom.setAttribute('position'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0