Three.js - 別のjsファイルをHTMLに挿入する

Question

私は現在three.jsで作業しており、3DキューブをHTMLでレンダリングしています。 HTMLコードは次のようになります。

<div id="render" class="center-block"> 

<script> 

var camera; 
var scene; 
var renderer; 
var mesh; 
var geometry; 
var material1; 
var material2; 
var material3; 
var material4; 
var material5; 
var material6; 
var materials; 
var meshFaceMaterial; 

init(); 
animate(); 

function init() { 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.position.set(0, 0, 0); 

    var light = new THREE.DirectionalLight(0xffffff); 
    light.position.set(0, 1, 1).normalize(); 
    scene.add(light); 

    geometry = new THREE.CubeGeometry(10, 10, 10); 
    material1 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material4 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material5 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material6 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 

    materials = [material1, material2, material3, material4, material5, material6]; 

    meshFaceMaterial = new THREE.MeshFaceMaterial(materials); 

    mesh = new THREE.Mesh(geometry, meshFaceMaterial); 
    mesh.position.z = -50; 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.getElementById('render').appendChild(renderer.domElement); 
    window.addEventListener('resize', onWindowResize, false); 

    render(); 
} 

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    render(); 
} 

function animate() { 
    mesh.rotation.x += .016; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .014; 

    render(); 
    requestAnimationFrame(animate); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

</script> 
</div> 

かなり大量のスクリプトがあります。別の.jsファイルを作成したいのですが、three.jsでどのように実現するのか分かりません。助言がありますか？

EDIT：

私は理解しているように、スクリプトはHTMLにタグを入力せずに、キャンバスのタグのように動作します。これはおそらく別の.jsファイルを作成することによって妨げられます。

Answer 1

他の.jsファイルへの参照を追加するだけで済みます。あなたはすでにTHREE.jsのためのあなたのページの参照を持っています、私は仮定します。だから、それをコピーして、その2番目のファイルを参照することができます。

<script src="THREE.js"></script> 
<script src="other_script.js"></script> 

other_script.js（または使用するファイル名）に余分なコードをすべて入れてください。

Answer 2

あなたが最も可能性が高い。このような文書準備タグにあなたの機能をラップする必要があります。

$(function(){ 
init(); 
animate(); 
}) 

あなたはその中の機能を使用してみてくださいする前にjsの外部ファイルが確実にロードされているそのように...基本的には、あなたの関数が起動するときに、DOMで利用可能でなければなりません。