<!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=0;
var rotation=0; var flag=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 );
//=================
const map = new THREE.TextureLoader().load( 'textures/tree11.png' );
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );
const sprite = new THREE.Sprite( material );
sprite.scale.set(1000,1000, 1)
sprite.position.x = 100;
sprite.position.y =200;
sprite.position.z = 100;
scene.add( sprite );
const sprite2 = new THREE.Sprite( material );
sprite2.scale.set(1000,1000, 1)
sprite2.position.x = 800;
sprite2.position.y =200;
sprite2.position.z = 100;
scene.add( sprite2 );
//================================
const geometry_yellow_plane = new THREE.PlaneGeometry( 300, 300 );
const material_yellow_plane = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry_yellow_plane, material_yellow_plane );
plane.position.x = -1300;
plane.position.y =50;
plane.position.z = 5000;
scene.add( plane );
//======================================================================
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 += Math.sin(rotation) * my_control;
camera.position.z += Math.cos(rotation) * my_control;
camera.updateProjectionMatrix();
renderer.render( scene, camera );
}
//======================================================================
function myFunction(x) {
if (x==1) {
flag=0;
if(my_control==0 && flag==0) { my_control=-20; flag=1; }
if(my_control==-20 && flag==0) { my_control=-40; flag=1; }
if(my_control==-40 && flag==0) { my_control=-60; flag=1; }
if(my_control==-60 && flag==0) { my_control=-80; flag=1; }
if(my_control==-80 && flag==0) { my_control=-100; flag=1; }
}//x=1
if (x==2) { my_control=20; }
if (x==3) { my_control=0; }
if (x==4) { rotation +=; }
if (x==5) { rotation -=; }
} // function
</script>
<center>
<img src="textures/buttons/left.png" height="90" size="90" alt="Img" onclick="myFunction('4')">
<img src="textures/buttons/up.png" height="90" size="90" alt="Img" onclick="myFunction('1')">
<img src="textures/buttons/stop.png" height="90" width="90" alt="Img" onclick="myFunction('3')">
<img src="textures/buttons/down.png" height="90" size="90" alt="Img" onclick="myFunction('2')">
<img src="textures/buttons/right.png" height="90" size="90" alt="Img" onclick="myFunction('5')">
</center>
</body>
</html>
