Question

所以我来自两年的团结/ c＃教学，并开始觉得我有编码印章从引擎转移到框架，所以我对环境有更多的控制权。我已经完成了第一人称环境的前几步，并希望将我的代码拆分成单独的文件。在c＃中，这很容易，你只需要包含一个：

              class className = new className();

对于同一文件夹中的任何类，但在javascript中似乎不太容易实现此目的。到目前为止，我的尝试导致我失去了所有three.js功能。

//编辑：//这是我从c＃：

的知识中尝试的

initializeObjects(scene);// on the native html javascript function   
function initializeObjects(scene){ code referring to 3js scene object}// on the satellite scripts

但它并没有像我想象的那样做出反应（因为没有错误，但也没有任何功能）。我需要弄清楚如何在网站构建上写入控制台。这对我来说都是新的。

是答案：

var currentMesh = mesh;//?

我现在没有时间对它进行测试。

//结束编辑//

任何提示？我将在下面包含所有代码。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

JavaScript尚未（已）实现本机模块系统。它已被批准，但尚未实施。给你几个不同的选择：

选项1：全局命名空间变量，即显示模块模式：

这是一种非常常见的方法。在代码中看起来像这样：

// top-level name declaration
window.myNamespace = (function() {
  // internal implementation stuff goes here
  return {
    // public API goes here, for example
    fooMethod: function (n) {
      return n + 'foo';
    }
  };
})();

然后在另一个文件中你可以说

// remember myNamespace is a global variable.
myNamespace.fooMethod('bar'); // 'barfoo'

但这有几个缺点。首先，如果你使用了很多第三方库，很可能会发生名称冲突。如果代码修改了Array或Object等全局对象，则尤其如此。它还需要开发人员付出相当大的努力来维护。

选项2第三方模块系统。有关更深入的讨论，请参阅this。

Answer 2

在Js中，只有函数创建一个新的范围，但是全局的东西都可以在任何地方使用。类和继承与大多数其他语言不同。

教程：scoping， Prototypal inheritance。 Google会为您提供更多信息。

顺便说一下，您定义了// Get Result Back @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); switch(requestCode){ case FILE_SELECT_CODE: if(resultCode==-1){ String FilePath = data.getData().getPath(); Log.d("onActivityResult", "FilePath = " + FilePath); cityEditText.setText(FilePath); } break; } }，后来将var keyboard = {};用作数组。

Answer 3

所以我最终做了什么（这取决于我认为的网站事情，我不知道除了网站之外的javascript编译方式）是将所有变量放在第一个加载的脚本上。将c＃编码器视为一个令人困惑的问题，但这就是使一切工作正常的事情，然后从那里我就完全按照已编写的代码分解代码并将其放在不同的文件上。它的工作就像一个魅力，我准备开始通过更多的功能。想要标记答案之一，但我需要采取一些额外的步骤来获取我给出的信息。谢谢大家的帮助。

在three.js游戏引擎中拆分javascript文件

3 个答案: