Question

我正在尝试学习使用three.js。我不太了解JS，但我想我会继续学习。我很难同时完成以下两件事：

fire.html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="fire.css">
    <script type="text/javascript" href="js/fire.js"></script>
    <script type="text/javascript" href="js/three.js"></script>
</head>

<body onload="fire()"></body>

</html>

js / fire.js：

function fire() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera.position.z = 5;

    var box_geometry = new THREE.BoxGeometry(1, 1, 1);
    var box_material = new THREE.MeshBasicMaterial();
    var cube = new THREE.Mesh(box_geometry, box_material);

    scene.add(cube);

    var animate = function() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y -= 0.01;

        renderer.render(scene, camera);
    };

    animate();
}

当我尝试使用onload时，我收到了一个未定义的引用错误，即fire（）不存在（我不知道标记中包含的小选项是什么）。

我正在使用Python的SimpleHTTPServer（python -m SimpleHTTPServer）在本地托管此代码。我不确定这是否有任何问题。我设法使this代码在相同的设置下可以工作，所以似乎我的问题在于弄清楚如何最好地使用JS而不实际将其嵌入到HTML中，因为这似乎是最干净的。

我还通过jslint运行了fire.js，以确保我没有任何语法错误，并且看起来还可以。（随时检查我的工作）。

所以，我很茫然。我如何使这两个合作？（目前，最好使用普通JavaScript）

Answer 1

使用src属性而不是href来引用外部JavaScript文件：

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="fire.css">
    <script type="text/javascript" src="js/fire.js"></script>
    <script type="text/javascript" src="js/three.js"></script>
</head>

为将来参考，您可以使用“网络”标签（在Chrome的开发人员工具中）来验证外部文件是否已正确加载。

在纯JS中立即执行JS函数

1 个答案: