HTML/CSS 및 Three.js를 사용하여 불을 뿜는 드래곤 게임을 만드는 방법을 알려주는 한 가지 요령(코드 공유)

 
 
 你点击的时间越长，它打喷嚏的力度越大
 - 按住并拖动可转身 -
 
 
Prints on haiyong | Game | haiyong.site 
 
 
00
 

#world { background: #652e37; position: absolute; width: 100%; height: 100%; overflow: hidden; }

#instructions { position: absolute; width: 100%; top: 50%; margin: auto; margin-top: 120px; font-family: "Open Sans", sans-serif; color: #fdde8c; font-size: 0.8em; text-transform: uppercase; text-align: center; line-height: 1.5; user-select: none; } .lightInstructions { color: #f89a78; font-size: 1.6em; }

@media screen and (max-width:600px) { #instructions { top: 50%; } .lightInstructions { font-size: 1.5em; } } @media screen and (max-width:470px) { #instructions { top: 60%; } .lightInstructions { font-size: 1.3em; } }

function init() { powerField = document.getElementById("power"); scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x652e37, 350, 500); HEIGHT = window.innerHeight; WIDTH = window.innerWidth; aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 2000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane ); camera.position.x = -300; camera.position.z = 300; camera.position.y = 100; camera.lookAt(new THREE.Vector3(0, 0, 0)); renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(WIDTH, HEIGHT); renderer.shadowMapEnabled = true; container = document.getElementById("world"); container.appendChild(renderer.domElement); windowHalfX = WIDTH / 2; windowHalfY = HEIGHT / 2; window.addEventListener("resize", onWindowResize, false); document.addEventListener("mouseup", handleMouseUp, false); document.addEventListener("touchend", handleTouchEnd, false); //* controls = new THREE.OrbitControls(camera, renderer.domElement); controls.minPolarAngle = -Math.PI / 2; controls.maxPolarAngle = Math.PI / 2; controls.noZoom = true; controls.noPan = true; //*/ }