Javascript Three.js可以在本地主机上运行，但不能在我的网站上运行_Javascript_Three.js

Javascript Three.js可以在本地主机上运行，但不能在我的网站上运行

javascript three.js

Javascript Three.js可以在本地主机上运行，但不能在我的网站上运行,javascript,three.js,Javascript,Three.js,我试图在three.js中使用OBJ和MTL loader加载模型。在localhost上它可以工作，但在我将它上传到我的网站后，它只显示一个空白页面。我已经在我的网站上设置了正确的文件夹，所以我真的不知道为什么会这样。在localhost上，它加载所有内容、模型和mtl文件。渲染测试身体{ 保证金：0；溢出：隐藏； } 函数init（）{ var scene=new THREE.scene（）； var摄像机=新的三透视摄像机（45，window.innerWidth/wind

我试图在three.js中使用OBJ和MTL loader加载模型。在localhost上它可以工作，但在我将它上传到我的网站后，它只显示一个空白页面。我已经在我的网站上设置了正确的文件夹，所以我真的不知道为什么会这样。在localhost上，它加载所有内容、模型和mtl文件。


渲染测试
身体{
保证金：0；
溢出：隐藏；
}
函数init（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
var webGLRenderer=new THREE.webGLRenderer（）；
setClearColor（新的三种颜色（0xaaaaff））；
webGLRenderer.setSize（window.innerWidth、window.innerHeight）；
webGLRenderer.shadowMap.enabled=true；
摄像机位置x=0.3；
摄像机位置y=20；
摄像机位置z=60；
摄影机。注视（新的三个向量3（0，0，0））；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（0,40,30）；
聚焦强度=2.5；
场景。添加（聚光灯）；
document.getElementById（“WebGL输出”）.appendChild（webGLRenderer.doElement）；
var阶跃=0；
var网格；
var mtlLoader=new THREE.mtlLoader（）；
mtlLoader.setPath（“资产/模型/”）；
mtlLoader.load（'avatar.mtl'，函数（材质）{
材料。预加载（）；
var objLoader=new THREE.objLoader（）；
objLoader.setMaterials（物料）；
setPath（“资产/模型/”）；
objLoader.load（'avatar.obj'，函数（对象）{
object.scale.set（1,1,1）；
网格=对象；
场景。添加（网格）；
object.rotation.x=0；
object.rotation.y=-1.3；
});
});
render（）；
函数render（）{
if（网格）{
网格旋转y+=0.006；
}
请求动画帧（渲染）；
渲染（场景、摄影机）；
}
}
window.onload=init；

您的控制台输出是否包含任何错误？检查资产的路径，它是相对定义的。它说客户端被服务器配置拒绝：/home/oziverse/public\u html/styles/style.css，referer：对不起，我是javascript新手，路径是相对的意味着什么？我应该如何更改它？向我们显示您部署的应用程序文件夹结构以及来自浏览器窗口的控制台输出（按F12键）。

<html>

<head>
<title>Render test </title>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/loaders/OBJLoader.js"></script>
<script type="text/javascript" src="libs/loaders/MTLLoader.js"></script>

<style>
    body {
        margin: 0;
        overflow: hidden;
    }
</style>
</head>
<body>

<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>

<script type="text/javascript">

function init() {

    var scene = new THREE.Scene();


    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


    var webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0xaaaaff));
    webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    webGLRenderer.shadowMap.enabled = true;


    camera.position.x = 0.3;
    camera.position.y = 20;
    camera.position.z = 60;
    camera.lookAt(new THREE.Vector3(0, 0, 0));



    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(0, 40, 30);
    spotLight.intensity = 2.5;
    scene.add(spotLight);


    document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);


    var step = 0;




    var mesh;

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath("assets/models/");
    mtlLoader.load('avatar.mtl', function(materials) {
        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath("assets/models/");
        objLoader.load('avatar.obj', function(object) {


          object.scale.set(1, 1, 1);
          mesh = object;
          scene.add(mesh);

          object.rotation.x = 0;
          object.rotation.y = -1.3;
        });
    });


    render();


    function render() {


        if (mesh) {
            mesh.rotation.y += 0.006;
        }



        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
    }


}
window.onload = init;
</script>
</body>
</html>