时间戳

首页 > 解决方案 > Three.js 在本地主机上工作，但不在我的网站上

javascript - Three.js 在本地主机上工作，但不在我的网站上

问题描述

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

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

标签： javascriptthree.js

解决方案

推荐阅读