使用three.js加载json模型

时间:2014-11-17 10:54:36

标签: javascript html json three.js

我是webGL的新手,我试图在firefox中使用three.js显示一个json模型。我只是得到一个空白的屏幕。显示的错误是" NS_ERROR_DOM_BAD_URI:访问受限制的URI被拒绝"在three.js。请告诉我们要包含哪些其他js sripts和修改。代码附后。模型是3d乙烷分子。我们希望它只是在屏幕上旋转。

<!DOCTYPE html>
    <meta charset="utf-8">
    <script src="three.min.js"></script>
    <script src="RequestAnimationFrame.js"></script>
    <script src="requestAnimationFramePolyfill.js"></script>
    <script src="Three.js"></script>
<body>
    <div id="myScene"></div>
</body>
<script>
    // global
    var scene, renderer, camera, cube, controls;

    init();
    animate();

    function init() {

        // scene box
        var myScene = document.getElementById("myScene");

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .01, 10000);
        camera.position.z = 500;

        var light = new THREE.AmbientLight(0xffffff); // soft white light
        scene.add(light);

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

        /*  ==== OPTIONAL SPOTLIGHT ====
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(100, 1000, 2000);

        spotLight.castShadow = true;

        spotLight.shadowMapWidth = 1024;
        spotLight.shadowMapHeight = 1024;

        spotLight.shadowCameraNear = 500;
        spotLight.shadowCameraFar = 4000;
        spotLight.shadowCameraFov = 30;

        scene.add(spotLight);
        */

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        myScene.appendChild(renderer.domElement);

        loader = new THREE.JSONLoader();

        loader.load("model.js", function (geometry, materials) {
            mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(materials));
            scene.add(mesh);
        });
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

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

</script>

1 个答案:

答案 0 :(得分:0)

NS_ERROR_DOM_BAD_URI错误通常是因为出于安全原因无法访问给定文件。

据我所知,如果model.js与你的html文件在同一个文件夹中,它应该与firefox脱机工作。对于其他浏览器,只有代码在Web服务器上运行时才有效,而不是在本地计算机上运行。