three实现一个三维迷宫闯关游戏代码
代码语言:html
所属分类:游戏
代码描述:three实现一个三维迷宫闯关游戏代码,方向盘键移动小球位置找出口。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow:hidden; user-select:none; } canvas { display: block; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/" } } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; let scene, camera, renderer, controls, composer, clock; let cube, vaisseau, labyrinth, minimap, exitPoint, fogColor; let mazeSize = 5; let exitPosition = mazeSize - mazeSize * .5 - 1; let enterPosition = -mazeSize * 0.5 + 1; init(); animate(); function init() { scene = new THREE.Scene(); fogColor = new THREE.Color(0x000000); // scene.fog = new THREE.Fog(fogColor, 5, 60); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, mazeSize * 1.1, 0); gsap.from(camera.position, { ease: "sine.inOut", duration: 2, x: 0, y: 40, z: 0 }); renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; const size = mazeSize * 8; const divisions = size * .25; const colorGrid = '#0000ff'; const colorCenterLine = '#0000ff'; const gridHelper = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid); gridHelper.position.set(-0.5, 0, -0.5); scene.add(gridHelper); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(25, 50, 25); scene.add(pointLight); const renderPass = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 1.4, 0.85); bloomPass.threshold = 0.21; bloomPass.strength = 0.6; bloomPass.radius = 0.35; composer = new EffectComposer(renderer); composer.addPass(renderPass); composer.addPass(bloomPass); clock = new THREE.Clock(); createLabyrinth(); createExitPoint(); createVaisseau(); createRestartButton(); window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); } function createLabyrinth() { labyrinth = new THREE.Group(); let geometry = new THREE.BoxGeometry(1, 1, 1); let material = new THREE.MeshStandardMaterial({ color: 0x00ff00, transparent: true, opacity: 0.2, side: THREE.DoubleSide }); let wallMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, transparent: true, opacity: 0.4, side: THREE.DoubleSide }); for (let i = 0; i < mazeSize; i++) { for (let j = 0; j < mazeSize; j++) { if (Math.random() > 0.7) { cube = new THREE.Mesh(geometry, material); cube.position.set(i, 0.5, j); labyrinth.add(cube); } } } for (let i = mazeSize - 2; i <= mazeSize; i++) { for (let j = mazeSize - 2; j <= mazeSize; j++) { labyrinth.children = labyrinth.children.filter(cube => !(cube.position.x === i && cube.position.z === j)); } } for (let i = enterPosition - 1; i <= enterPosition + 1; i++) { for (let j = enterPosition - 1; j <= enterPosition + 1; j++) { labyrinth.children = labyrinth.children.filter(cube => !(cube.position.x === i && cube.position.z === j)); } } let groundGeometry = new THREE.PlaneGeometry(mazeSize, mazeSize, mazeSize / 2, mazeSize / 2); let groundMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, wireframe: true }); let ground = new THREE.Mesh(groundGeometry, groundMaterial); for (let i = -1; i <= mazeSize; i++) { let wall1 = new THREE.Mesh(geometry, wallMaterial); wall1.position.set(i, 0, -1); wall1.scale.set(0.5, 0.5, 0.5); labyrinth.add(wall1); let wall2 = new THREE.Mesh(geometry, wallMaterial); wall2.position.set(i, 0, mazeSize); wall2.scale.set(0.5, 0.5, 0.5); labyrinth.add(wall2); let wall3 = new THREE.Mesh(geometry, wallMaterial); wall3.position.set(-1, 0, i); wall3.scale.set(0.5, 0.5, 0.5); labyrinth.add(wall3); let wall4 = new THREE.Mesh(geometry, wallMaterial); wall4.position.set(mazeSize, 0, i); wall4.scale.set(0.5, 0.5, 0.5); labyrinth.add(wall4); } ground.rotation.x = -Math.PI / 2; ground.position.set(mazeSize * 0.5 - 0.5, 0, mazeSize * 0.5 - 0.5); labyrinth.position.set(-mazeSize * 0.5, 0, -mazeSize * 0.5); labyrinth.add(ground); scene.add(labyrinth); } function createVaisseau() { let geometry = new THREE.SphereGeometry(0.5, 12, 12); let material = new THREE.MeshStandardMaterial({ color: "magenta" }); vaisseau = new THREE.Mesh(geometry, material); vaisseau.rotation.x = Math.PI / 2; vaisseau.position.set(enterPosition, 0.65, enterPosition); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0