我是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>
答案 0 :(得分:0)
NS_ERROR_DOM_BAD_URI错误通常是因为出于安全原因无法访问给定文件。
据我所知,如果model.js与你的html文件在同一个文件夹中,它应该与firefox脱机工作。对于其他浏览器,只有代码在Web服务器上运行时才有效,而不是在本地计算机上运行。