renderer.isWebGLAvailable не является функцией с именем filename.html - PullRequest
Новая
       7

renderer.isWebGLAvailable не является функцией с именем filename.html

0 голосов
/ 28 января 2019

Так что я думаю, что я мог бы решить мою проблему со связью до сих пор, но теперь у меня все еще есть необработанное TypError: rendere.isWEBglAvailable - это не функция в filname.html Так что мне нужно реализовать, чтобы заставить его работать? 

 <title>3D Montageanalysetool</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="#" />
        <link href="index.css" rel="stylesheet" type="text/css"/>

        <script src="Libraries/three.min.js" type="text/javascript"></script>
        <script src="Libraries/OrbitControls.js" type="text/javascript"></script>
        <script src="Libraries/OBJLoader.js" type="text/javascript"></script>
        <script src="Libraries/MTLLoader.js" type="text/javascript"></script>

        <!-- ZURBFundation links-->
        <link href="ZURBFundation/css/foundation.css" rel="stylesheet" type="text/css"/>
        <script src="ZURBFundation/js/vendor/jquery.js" type="text/javascript"></script>





     <script>
                //Detctor shows a warning if the current browser do not support WebGL.
                var renderer = new THREE.WebGLRenderer();
                if (renderer.isWebGLAvailable()===true) {
                    // Initiate function or other initializations here
                    animate();
                } else {
                    var warning = renderer.getWebGLErrorMessage();
                    document.getElementById('container').appendChild(warning);
                }

</script>

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Сначала убедитесь, что вы упомянули Three.js. 

    <title>3D Montageanalysetool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#" />
<link href="index.css" rel="stylesheet" type="text/css"/>
<script src="index.js" type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="threejs-viewer-master/lib/threejs/three.js" type="text/javascript"></script>

<!-- links to create a new anchor-->
<script src="threejs-viewer-master/lib/threejs/Detector.js" type="text/javascript"></script>
<script src="threejs-viewer-master/lib/threejs/MTLLoader.js" type="text/javascript"></script>
<script src="threejs-viewer-master/lib/threejs/OBJLoader.js" type="text/javascript"></script>
<script src="threejs-viewer-master/lib/threejs/OrbitControls.js" type="text/javascript"></script>

<!-- ZURBFundation links-->
<link href="ZURBF

undation / css / foundation.css "rel =" stylesheet "type =" text / css "/> 

</head>
<body>
    <div id="div1">
        <div id="upperDiv">
            <h1 id="varhead">3D-Montageanalysetool</h1>

            <div id="buttonsDiv" >
                <!-- Button to get send a request to the server and get the coordinates as answer and draws them-->
                <button id="butLoad" class = "secondary button" onclick="onButtonLadeClick" >Lade Daten</button>
                <!-- Button to set the AvarageHigh visible form the server-->
                <button id="setAvarageHighVisible"  class="button secondary"  onclick=""> Durchschnittshöhe anzeigen</button>
                <!-- Button to show reach of anchor-->
                <button id="anchorReach" class="button secondary" onclick="">Reichweite Anchor   
                </button> 
            </div>
        </div>
    </div>
    <!--show Fullscreen-->
    <div id="fullscreen">
        <a id="fullscr"> Fullscreen</a>
    </div>
    <!--canvas div-->
    <div id="drawingSpace" align="center" > </div>
    <!--show no Fullscreen-->
    <div id="noFullscreen">
        <a id="noFullscr">No Fullscreen</a>
    </div>
    <script>
        //Detctor shows a warning if the current browser do not support WebGL.
        var renderer = new THREE.WebGLRenderer();
        if (renderer.isWebGLAvailable()) {
            // Initiate function or other initializations here
            animate();
        } else {
            var warning = renderer.getWebGLErrorMessage();
            document.getElementById('container').appendChild(warning);
        }



        //renderer = new THREE.WebGLRenderer();
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        render();
        function render() {
            //Renderer -> because till jet nothing is rendered onto the canvas
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
            container.appendChild(renderer.domElement);

        }
        animate();

        function animate() {
            //show in browser
            requestAnimationFrame(animate); //browser has to request the function animate
            renderer.render(scene, camera);

        }



            render();


        }

    </script>
</body>
0 голосов
/ 28 января 2019

Вам нужно пройтись по порядку ваших <script> тегов и посмотреть, что делает каждый из них.

  • Сначала у вас есть <script src="index.js" type="text/javascript"></script>, но мы не знаемчто делает этот файл.Ожидается ли загрузка этого файла для Three.js?Если это так, вам нужно переместить его в следующем порядке, чтобы index.js загружалось после того, как Доступно три.
  • Во-вторых, вы пытаетесь импортировать библиотеку Three.js из threejs-viewer-master/lib/threejs/three.js но вы проверили, что это правильный адрес?Показывает ли ваша консоль или вкладка сети, что этот ресурс загружается?
  • В-третьих, вы загружаете дубликат three.js lib из https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js Это, вероятно, загрязняет код вашей библиотеки иделая его непригодным для использования.Вы также должны загрузить более новую версию, /r100/ вместо /r79/ на данный момент.

Это не проблема Three.js, это проблема порядка скриптов, с возможностью ссылки нанесуществующие файлы.

...