Projection - Tank Three.js

Developer
Charlie Walter
Size
3,182 Kb
Views
4,048
  1. Projection - Tank Three.js Previews
  2. Projection - Tank Three.js HTML Codes
  3. Projection - Tank Three.js JS Codes

How do I make an projection - tank three.js?

Click, tank changes angle and moves. What is a projection - tank three.js? How do you make a projection - tank three.js? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

Projection - Tank Three.js Previews
IQ Test

Projection - Tank Three.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Projection - Tank Three.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body> <script src='https://threejs.org/build/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Projection - Tank Three.js - Script Codes JS Codes

/* THREE */
var scene_width = window.innerWidth, scene_height = window.innerHeight-10, rot_x = 0, rot_y = 0, up_key_down = false, down_key_down = false, left_key_down, right_key_down = false, w_key_down = false, s_key_down = false, a_key_down, d_key_down = false;
var go_to_rotation_y = null;
var go_to_distance = null;
var angle_ready = false;
var scene = new THREE.Scene();
// set some camera attributes
var x_cam_angle = -45, y_cam_angle = 0;
var camera = new THREE.PerspectiveCamera(45, scene_width/scene_height, .1, 10000); //.PerspectiveCamera(60, ASPECT, 1, 10000);
camera.updateProjectionMatrix();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(scene_width, scene_height);
document.body.appendChild(renderer.domElement);
var plane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshLambertMaterial({color: 'green'}));
plane.overdraw = true;
plane.rotation.x = -90 * (Math.PI / 180);
plane.position.y = -.25;
plane.receiveShadow = true;
scene.add(plane);
var geometry = new THREE.CubeGeometry(1,.5,1.5);
var material = new THREE.MeshLambertMaterial({color: 'limegreen'});
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
scene.add(cube);
scene.fog=new THREE.Fog( 0x000000, 0.015, 25 );
var geometry = new THREE.CubeGeometry(.2,.2,1.5);
var turret = new THREE.Mesh(geometry, material);
cube.add(turret);
turret.position.z = 0.5;
turret.position.y = .35;
turret.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, -0.75 ) );
camera.position.z = 5;
camera.position.y = 2;
camera.rotation.x = -.3;
// add subtle blue ambient lighting
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(2, 8, 1).normalize();
scene.add(directionalLight);
/*var object = cube;
for(var prop in object){ console.log(typeof prop + " " + prop + " " + object[prop]);
}*/
var render = function () { requestAnimationFrame(render); renderer.render(scene, camera); if(up_key_down){ } if(down_key_down){ } if(right_key_down){ turret.rotation.y -= 2.5 * (Math.PI / 180); } if(left_key_down){ turret.rotation.y += 2.5 * (Math.PI / 180); } if(w_key_down){ } if(s_key_down){ } if(d_key_down){ } if(a_key_down){ } //if(space_key_down){ //} if(go_to_rotation_y){ cube.rotation.y += (go_to_rotation_y > cube.rotation.y) ? 0.05 : -0.05; if(Math.round(cube.rotation.y * 10) / 10 == Math.round(go_to_rotation_y * 10) / 10){ go_to_rotation_y = null; angle_ready = true; } } if(angle_ready && go_to_distance){ if(go_to_distance > 0){ cube.translateZ(-0.1); go_to_distance-=0.1; } }
};
render();
var onMouseWheel = function(e){ camera.translateZ(e.deltaY/10); camera.position.z += e.deltaY/30; camera.rotation.x += -1*(e.deltaY/100); camera.position.y += e.deltaY/10;
}
/* Controllers */
window.onload=function(){ document.onkeydown=function(e){ if(e.keyCode == 38){ up_key_down = true; } if(e.keyCode == 40){ down_key_down = true; } if(e.keyCode == 37){ left_key_down = true; } if(e.keyCode == 39) { right_key_down = true; } if(e.keyCode == 87){ w_key_down = true; } if(e.keyCode == 83){ s_key_down = true; } if(e.keyCode == 65){ a_key_down = true; } if(e.keyCode == 68) { d_key_down = true; } }; document.onkeyup=function(e){ if(e.keyCode == 38){ up_key_down = false; } if(e.keyCode == 40){ down_key_down = false; } if(e.keyCode == 37){ left_key_down = false; } if(e.keyCode == 39) { right_key_down = false; } if(e.keyCode == 87){ w_key_down = false; } if(e.keyCode == 83){ s_key_down = false; } if(e.keyCode == 65){ a_key_down = false; } if(e.keyCode == 68) { d_key_down = false; } }; if(window.onwheel !== undefined) { window.addEventListener('wheel', onMouseWheel) } else if(window.onmousewheel !== undefined) { window.addEventListener('mousewheel', onMouseWheel) } else { // unsupported browser } var projector = new THREE.Projector(); document.onclick=function(event){ var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector( vector, camera ); var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); var intersects = raycaster.intersectObject(plane, true); if (intersects.length > 0) { console.log(intersects[0].point); } var vector = new THREE.Vector3().copy( intersects[ 0 ].point ); intersects[ 0 ].object.worldToLocal( vector ); // Trig! var opp = cube.position.z - (vector.y*-1), adj = vector.x - cube.position.x, hyp = Math.sqrt((opp*opp) + (adj*adj)); //alert(Math.asin(opp/hyp)) go_to_rotation_y = Math.asin(opp/hyp) - 1.57079633; if(adj <= 0){ go_to_rotation_y *= -1; } angle_ready = false; go_to_distance = hyp; //cube.position.z = vector.y*-1; //cube.position.x = vector.x; } go_to_distance = 5; go_to_rotation_y = -0.6;
};
Projection - Tank Three.js - Script Codes
Projection - Tank Three.js - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3
Size 3,182 Kb
Views 4,048
Do you need developer help for Projection - Tank Three.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Walter (cjonasw) Script Codes
Name
Collision with walls
3D PONG
Spotify Discover Panel
Facebook tabs with AngularJS
Pointer Lock and First Person Mechanics
Calender UI
Animating Scrolling
Charliejwalter.net
Three.js half circle health bar
Gamepad API - DOM Element Demo
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!