حالا لوازم کامل ساخت بازی را دارید.
از کد دکمه بازی به بعد یعنی کد تکسچر و کد skybox و کد تکرار تکسچر من فایل کامل نگذاشتم. نگران نباشید بعدا اینها اون قدر استفاده میشه که همه چی بدیهی می شود.
مجموع همه کدها در این فایل هست:
شامل skybox و تکرار تکسچر در چمن کردن زمین. تکسچر به کار رفته در سنگ. صفحه کلید کار می کند. دکمه بالا و پایین آن.دکمه هایarrow
همچنین در پایین صفحه 4 دکمه برای موبایل هست.
در بازی فوق می توانیم دوربین را عقب جلو ببریم.برای عقب رفتن دو دکمه گذاشتم. با نگاه به عقب و با نگاه به جلو.
با حرکت دوربین می توانیم اشیا صحنه را از تماشاکنیم.
برنامه پیچیده تر بود ولی خیلی چیزها را حذف کردم تا اولین برنامه پیچیده نباشد. چند شی متحرک هم داشت.
کد برنامه:
JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script src="js/three.js"></script>
<script>
var camera, scene, renderer;
var mesh;
//---- control camera ----
var my_control_x=0;
var my_control_z=0;
var rotation=0;
//-------------------------
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 35000 );
camera.position.z = 5400;
scene = new THREE.Scene();
//========================================================================
function my_draw(a, b , c , x, y , z ,material_x) {//function
var geometry_x = new THREE.BoxBufferGeometry( a, b, c );
mesh_x = new THREE.Mesh( geometry_x, material_x );
mesh_x.position.x = x;
mesh_x.position.y = y;
mesh_x.position.z = z;
scene.add( mesh_x );
}//function
//-------------------------- skybox -------------------
var skyGeo = new THREE.SphereGeometry(15000, 25, 25);
//First the geometry. I wanted it big and made it big
var texture_x = new THREE.TextureLoader().load( 'textures/cube/skyboxsun25deg/nx.jpg' );
var material_sky = new THREE.MeshBasicMaterial( { map: texture_x } );
//Set everything together and add it to the scene here.
var sky = new THREE.Mesh(skyGeo, material_sky);
sky.material.side = THREE.BackSide;
scene.add(sky);
//--------------------------- grass ------------------------
var loader = new THREE.TextureLoader();
var texture4 = loader.load( 'textures/terrain/grasslight-big.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 20, 35 );
// your code
} );
var material_zz4 = new THREE.MeshBasicMaterial( { map: texture4 } );
my_draw(8000,10,30000,0,-150,7000,material_zz4);
//-------------------- stone ------------
var geometry_stone = new THREE.BoxBufferGeometry( 200, 200, 200 );
var texture_stone = new THREE.TextureLoader().load( 'textures/terrain/stone.jpg' );
var material_stone = new THREE.MeshBasicMaterial( { map: texture_stone } );
mesh_stone = new THREE.Mesh( geometry_stone, material_stone );
mesh_stone.position.x = -650;
mesh_stone.position.y = -100;
mesh_stone.position.z = 5500;
scene.add( mesh_stone );
//======================================================================
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}// /init--------------------------------------------------------------------------------------------------
document.addEventListener('keydown',onKeyDown,false);
function onKeyDown(event){//onKeyDown
var delta =20;
//event = event || window.event;
var keycode = event.keyCode;
switch(keycode){
case 37 : //left arrow
camera.updateProjectionMatrix();
break;
case 38 : // up arrow
//
camera.position.z = camera.position.z - delta;
camera.updateProjectionMatrix();
break;
case 39 : // right arrow
camera.updateProjectionMatrix();
break;
case 40 : //down arrow
camera.position.z = camera.position.z + delta ;
camera.updateProjectionMatrix();
break;
}
}//onKeyDown
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
camera.rotation.y=rotation;
camera.position.x =camera.position.x - my_control_x;
camera.position.z =camera.position.z - my_control_z;
camera.updateProjectionMatrix();
renderer.render( scene, camera );
}
//======================================================================
function myFunction(x) {
if (x==1) {my_control_z=20; my_control_x=0; rotation=0; }
if (x==2) {my_control_z=-20; rotation=3.14159; }
if (x==3) {my_control_z=0; my_control_x=0; }
if (x==9) {my_control_z=-20; my_control_x=0; rotation=0; }
}
</script>
<center>
<img src="textures/buttons/up.png" height="120" size="120" alt="Img" onclick="myFunction('1')">
<img src="textures/buttons/stop.jpg" height="120" size="120" alt="Img" onclick="myFunction('3')">
<img src="textures/buttons/down.png" height="120" size="120" alt="Img" onclick="myFunction('9')">
<img src="textures/buttons/down.png" height="120" size="120" alt="Img" onclick="myFunction('2')">
</center>
</body>
</html>
در صفحه قبل با تابع ساختن در جاوا اسکریپت شما آشنا شدید.
در کد بالا من تابع my_draw را ساختم تا در ساخت اشیا پر تعداد در مقدار کد صرفه جویی شود.
ورودی های این تابع ابعاد شی و مختصات محل قرار گیری شی و متریال است.
یعنی پس از ایجاد متریال آن را به همراه 6 عدد به این تابع ارسال می کنیم تا شکل ساخته شود.
----------------------
قسمت skybox را مشخص کرده ام. و قسمت grass که چمن کاری تکراری زمین است.
شی stone توسط تابع my_draw ساخته نشد. چون می خواستم این شی متحرک بشود. اون یک سنگ بزرگ مکعب مستطیلی شکل است که روی زمین است.
برای کار کردن با زاویه و محل دوربین است. متغیرهای مورد استفاده اول برنامه تعریف شده و با تابع ساختگی من یعنی myFunction
که در انتهای برنامه است این اعداد دست کاری می شود.
خود تابع myFunction با دکمه های واقع در قسمت html انتهای صفحه صدا زده می شود.
شرح کلی برنامه three js : در تابع init مقدار دهی هاست . بعد تابع animate را داریم باید از این تابع استفاده کنیم. یعنی متغیرهای خود را در تابع animate تغییر می دهیم یا مورد استفاده قرار می دهیم یعنی به چیزی نسبت می دهیم. مثلا به مختصات دوربین یا چرخش دوربین در برنامه بالا.
بازی اول شامل یک زمین چمن شده و یک آسمان و یک بلوک سنگی است. دوربین هم با کیبورد و هم با دکمه های لمسی حرکت به جلو و عقب دارد.
برای حرکت به چپ و راست خودتان بنویسید. با camera.position.x کار کنید. در برنامه فوق می بینید متغیری که به camera.position.x افزوده می شود همیشه صفر است. چون دکمه های حرکت به چپ و راست را من حذف کردم تا برنامه ساده تر بشود.
می توانید دکمه هایی برای نگاه به اطراف بسازید یا اینکه کاری کنید به هر طرف نگاه می کند به همان طرف هم برود که با توابع سینوس و کسینوس است.
پس حالا شما اشیای دارای تکسچر دارید. و می توانید محیط بزرگی از اشیای تکسچر دار بسازید. مثل خیابان و دیوار و ....
همچنین اشیای متحرک می توانید داشته باشید.
ولی برخورد را ندارید. یعنی کد بررسی برخورد را ندارید.
Last November, I gave a presentation to the Front End Web Developers group in Perth about 3D graphics using the JavaScript library Three.js. I knew most of the audience had not tried 3D before, so rather than just step through some Hello World code, I thought it would be more useful to give an...
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );
const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );
//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );
scene.add( group );
در کد بالا در ابتدا دو شی ساخته ایم ولی به scene اضافه نکردیم.
بعد گروه را ساختیم و دو شی را به گروه اضافه کردیم و بعد گروه را به scene اضافه کردیم.
const geometry = new THREE.PlaneGeometry( 300, 300 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
plane.position.x = -1300;
plane.position.y =50;
plane.position.z = 5000;
scene.add( plane );
ادیت ۳ سال بعد: من وقتی خواستم کد این پست را به بازی اول اضافه کنم ، برنامه هنگ کرد. و اسم جئومتری و متریال را تغییر دادم. کردم منظورم کلماتی است که بعد const نوشتیم.
if (counter==100) { mesh_stone.position.z += 20; counter=0;}
من تست کردم کار می کند.
یعنی هر 100 تیک یک بار تخته سنگ را تکان می دهد.
مثلا اگر به برنامه خود خورشید اضافه کنید در هر مثلا هزار تیک خورشید را کمی می چرخانید.
کارهای دیگه ای هم احتمالا بشود با این سیستم کرد خودتان فکر کنید. مثلا بعضی چک کردن ها را لازم نیست در هر تیک انجام داد. میشه در هر 10 تیک یا هر 100 تیک انجام داد.
در بازیها هم حرکات هر از چند گاهی می تواند مفید باشد.
humaan.com
blog.logrocket.com
github.com
lo-th.github.io
و خلاصه اش به این فرمول زسیدیم:
