Javascript 使用three.js加载json模型_Javascript_Html_Json_Three.js

Javascript 使用three.js加载json模型

javascript html json three.js

Javascript 使用three.js加载json模型,javascript,html,json,three.js,Javascript,Html,Json,Three.js,我是webGL新手，我尝试在firefox中使用three.js显示json模型。我只是得到一个空白屏幕。显示的错误是NS\u ERROR\u DOM\u BAD\u URI：在three.js中拒绝访问受限URI。请告知要包括哪些其他js SRIPT和修改。代码见附件。模型是一个三维乙烷分子。我们希望它只是在屏幕上旋转 <!DOCTYPE html> <meta charset="utf-8"> <script src="three.min.js"

我是webGL新手，我尝试在firefox中使用three.js显示json模型。我只是得到一个空白屏幕。显示的错误是NS\u ERROR\u DOM\u BAD\u URI：在three.js中拒绝访问受限URI。请告知要包括哪些其他js SRIPT和修改。代码见附件。模型是一个三维乙烷分子。我们希望它只是在屏幕上旋转

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

NS\u错误\u DOM\u错误\u URI错误经常出现，因为出于安全原因，给定文件无法访问

据我所知，如果model.js与您的html文件位于同一文件夹中，它应该可以脱机使用firefox。对于其他浏览器，只有当代码在web服务器上运行，而不是在本地计算机上运行时，它才起作用