Question

所以我想到目前为止我可以解决我的链接问题，但是现在我仍然有一个未捕获的TypError：rendere.isWEBglAvailable在filname.html上不是一个函数那么我必须实现什么才能使其正常工作？

{{1}}

Answer 1

您必须按照<script>标签的顺序排列，并查看每个标签的作用。

首先，您拥有<script src="index.js" type="text/javascript"></script>，但我们不知道该文件在做什么。该文件是否期望Three.js已经加载？如果是这样，则需要将其向下移动，以便在三个可用的之后加载index.js。

第二，您正在尝试从threejs-viewer-master/lib/threejs/three.js导入Three.js库，但是您是否检查过它的正确地址？您的控制台或网络标签上是否显示该资产正在加载？

第三，您正在从https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js加载重复 three.js库，这可能会污染您的库代码并使它无法使用。此时，您还应该加载较新的修订版本/r100/，而不是/r79/。

这不是Three.js问题，而是脚本顺序问题，可以链接到不存在的文件。

Answer 2

确保您首先提到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>

renderer.isWebGLAvailable不是filename.html的函数

2 个答案: