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

splitting up javascript files in three.js game engine

本文关键字：拆分 javascript 文件 引擎 three js 游戏      更新时间：2023-09-26

我自学了两年unity/c#，我开始觉得我有了从引擎到框架的编码能力，所以我对环境有了更多的控制。我已经完成了第一人称环境的前几个步骤，并希望将我的代码分割成单独的文件。在c#中这很简单，你只需要加入一个:

              class className = new className();

为任何类是在同一文件夹中，但它似乎不太容易在javascript中完成这一点。到目前为止，我的尝试已经导致我失去了所有三个。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;//?

我现在没有时间测试。

//编辑/结束/

提示吗?我将包括下面的所有代码。

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>

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第三方模块系统。

在Js中，只有函数创建了一个新的作用域，但是全局的东西到处都是可用的。类和继承与大多数其他语言不同。

教程:范围,原型的继承。Google会给你更多的信息。

顺便说一下，您定义了var keyboard = {};，后来使用keyboard作为数组。

所以最终我所做的(这取决于我认为的网站的事情，我不知道javascript在这一点上除了网站之外是如何编译的)是把所有的变量放在第一个加载的脚本上。作为一个c#编码员，这肯定会让人感到困惑，但这是使一切正常工作的东西，然后从那里开始，我只是按照已经写好的那样分解代码，并将其放在单独的文件中。它的工作就像一个魅力，我准备开始研究更多的功能。我想标记其中一个答案是正确的，但我需要根据我得到的信息采取一些额外的步骤。谢谢大家的帮助。

相关文章：