我不知道jquery可能出了什么问题

I have no idea whats wrong jquery maybe?

本文关键字：什么 问题 jquery 我不知道      更新时间：2023-09-26

我不知道出了什么问题，有人能帮我吗？当我试图在chrome上加载它时，它只是一个白色屏幕，代码通常在它自己的文件中，当我发现问题时，它只加载了一个白色页面。我正试图在jquery和three.js 的帮助下加载一个立方体

<!DOCTYPE HTML>
<html>
<head>
    <title>THREE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/three.js"></script>
    <style>
        body{
            margins:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
    $(document).ready(function(){}
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
        var renderer = new THREE.WebGLRenderer();
        renderer.setColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);
        var axis = new THREE.AxisHelper(10);
        scene.add(axis);
        var grid = new THREE.GridHelper(50, 5);
        var color = new Color("rgb(255, 0, 0)");
        grid.setColors(color, 0x000000);
        //scene.add(grid);
        var cubeGeo = new THREE.BoxGeometry(5, 5, 5);
        var cubeMat = new THREE.MeshBasicMaterial({color:0xdddddd, wireframe:true});
        var cube = new THREE.Mesh(cubeGeo, cubeMat);

        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        scene.add(cube);
        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;
        camera.lookAt(scene.position);
        $("#container").append(renderer.domElement);
        renderer.render(scene,camera);
    });
    </script>
</body>
</html>

从中移除右括号

    $(document).ready(function(){

去掉这一行，setColor似乎不是THREE的方法。WebGLRenderer:

    renderer.setColor(0xdddddd);

更改：

     var color = new Color("rgb(255, 0, 0)");

至：

     var color = new THREE.Color("rgb(255, 0, 0)");

看起来您立即打开并关闭了$(document).ready(function(){}。因此，右括号需要删除$(document).ready(function(){}，以便整个脚本都包含在其中，并且在底部有适当的结束标记。我没有三个.js，但我认为以下应该有效。

<!DOCTYPE HTML>
<html>
<head>
    <title>THREE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/three.js"></script>
    <style>
        body{
            margins:0;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
    $(document).ready(function(){
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
        var renderer = new THREE.WebGLRenderer();
        renderer.setColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);
        var axis = new THREE.AxisHelper(10);
        scene.add(axis);
        var grid = new THREE.GridHelper(50, 5);
        var color = new Color("rgb(255, 0, 0)");
        grid.setColors(color, 0x000000);
        //scene.add(grid);
        var cubeGeo = new THREE.BoxGeometry(5, 5, 5);
        var cubeMat = new THREE.MeshBasicMaterial({color:0xdddddd, wireframe:true});
        var cube = new THREE.Mesh(cubeGeo, cubeMat);

        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        scene.add(cube);
        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;
        camera.lookAt(scene.position);
        $("#container").append(renderer.domElement);
        renderer.render(scene,camera);
    });
    </script>
</body>
</html>
相关文章：