So I'm coming from two years of teaching myself unity/c# and am starting to feel like I have the coding chops to move from an engine to a framework so I have more control over the environment. I've completed the first few steps of first person environment stuff and wanted to split up my code into seperate files. In c# this is very easy, you just include a:
class className = new className();
for whatever class is in the same folder, but it seems to be less easy in javascript to accomplish this. My attempts so far have led to me losing all three.js functionality.
//Edit://This is what I tried from my knowledge of c#:
initializeObjects(scene);// on the native html javascript function
function initializeObjects(scene){ code referring to 3js scene object}// on the satellite scripts
but it isn't reacting the way I'd imagine(as in no errors, but no functionality either). I need to figure out how to write to console on a website build. This is all new to me.
is the answer:
var currentMesh = mesh;//?
I don't have time to test it right now.
//end Edit//
Any tips? I will include all code below.
var mesh, floorMesh;
function initializeObjects(scene){
mesh = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2, 4, 4, 4),
new THREE.MeshPhongMaterial({color:'green', wireframe:false})
);
mesh.position.y = 2;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
floorMesh = new THREE.Mesh(
new THREE.PlaneGeometry(100, 100, 10, 10),
new THREE.MeshPhongMaterial({color:'grey', wireframe:false})
);
floorMesh.rotation.x -= Math.PI /2;
floorMesh.receiveShadow = true;
scene.add(floorMesh);
ambientLight = new THREE.AmbientLight('blue', .3);
scene.add(ambientLight);
light = new THREE.PointLight('white', 0.8, 18);
light.position.set(-3, 6, -3);
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;
light.shadowMapHeight = 2048;
light.shadowMapWidth = 2048;
scene.add(ambientLight);
}
function objectUpdate(){
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
}
//this is the start of the first person script
var keyboard = {};
var player = { height:1.8, speed:1, turnSpeed:Math.PI * 0.02 };
var camera;
function initializeControls(scene){
camera = new THREE.PerspectiveCamera (90, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, player.height,-4);
camera.lookAt(new THREE.Vector3(0,player.height,0));
scene.add(camera);
}
function checkInput(){
if(keyboard[87]){
camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[83]){
camera.position.x += Math.sin(camera.rotation.y) * player.speed;
camera.position.z += -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[65]){
camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;
}
if(keyboard[68]){
camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
}
if(keyboard[37]){
camera.rotation.y -= player.turnSpeed;
}
if(keyboard[39]){
camera.rotation.y += player.turnSpeed;
}
}
function keyDown(event){
keyboard[event.keyCode] = true;
}
function keyUp(event){
keyboard[event.keyCode] = false;
}
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
<script src="https://github.com/mrdoob/three.js/blob/dev/build/three.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Demo 1</title>
<meta charset="UTF-8">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a {
color:#0078ff;
}
</style>
<script type="text/javascript" src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js"></script>
<script type="text/javascript" src = "objectManager.js"></script>
<script type="text/javascript" src = "firstPersonController.js"></script>
</head>
<body>
</body>
<script>
var scene, renderer;
function init(){
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
initializeControls(scene);
initializeObjects(scene);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
updateRenderer();
}
function updateRenderer(){
requestAnimationFrame(updateRenderer);
checkInput();
objectUpdate();
}
window.onload = init();
</script>
</html>