Three.js - 在HTML中插入單獨的js文件

我現在正在使用three.js並使用HTML呈現3D立方體。 HTML代碼如下所示：Three.js - 在HTML中插入單獨的js文件

<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完成。有什麼建議麼？

編輯：

據我瞭解，劇本就像一個canvas標籤，在不進入的HTML標籤。這可能會造成一個單獨的.js文件的干擾...

來源

2016-08-05 PLAYCUBE

你只需要添加一個對其他.js文件的引用。我已經在你的頁面上爲THREE.js提供了一個參考，我想。所以你可以複製它並引用第二個文件。

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

並將所有額外的代碼放入other_script.js（或任何您使用的文件名）。

來源

2016-08-05 15:51:18 Whothehellisthat

已嘗試，不起作用... – PLAYCUBE

確保三引用是另一個腳本的_before_，並且第二個腳本引用的路徑是另一個js文件的正確位置。怎麼了？任何錯誤都會拋出？如果你在另一個腳本的頂部放置一個簡單的'console.log'會怎麼樣？ – Whothehellisthat

犯了一個錯誤，忘了把子文件夾。現在對象加載，但不在div容器中。你知道如何解決這個問題嗎？ – PLAYCUBE

你很可能需要包裹在這樣的文件準備好您的標籤功能：

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

這樣，你嘗試使用功能的它裏面之前的外部JS文件已加載肯定...基本上它必須在你的函數觸發時在DOM中可用。

來源

2016-08-05 16:24:20 JPeG

Three.js - 在HTML中插入單獨的js文件

回答

相關問題