Three.js - Einfügen separate js-Datei in HTML

Question

Ich arbeite gerade mit three.js und habe einen 3D-Würfel in HTML gerendert. Der HTML-Code sieht so aus:

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

Es gibt ziemlich viel Skript. Ich möchte daraus eine separate .js-Datei machen, weiß aber nicht, wie ich es mit three.js erreichen kann. Irgendwelche Vorschläge?

EDIT:

Wie ich verstehe, das Skript wie eine Leinwand-Tag arbeitet, ohne den Tag in HTML eingeben. Dies stört wahrscheinlich, indem Sie eine separate .js-Datei erstellen ...

Answer 1

Sie müssen nur einen Verweis auf die andere .js-Datei hinzufügen. Sie haben bereits eine Referenz auf Ihrer Seite für THREE.js, nehme ich an. Sie können also einfach kopieren und auf diese zweite Datei verweisen.

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

Und setzen alle Ihre persönlichen Code in other_script.js (oder was auch immer Dateinamen Sie verwenden).

Answer 2

Sie wahrscheinlich benötigen, Ihre Funktionen in einem Dokument bereit Tag wie folgt wickeln:

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

diese Weise die externe js Datei sicher geladen ist, bevor Sie die Funktionen in der es versuchen, mit ... Grundsätzlich muss es im DOM verfügbar sein, wenn Ihre Funktionen ausgelöst werden.