我不知道 jquery 有什么问题吗？答案

【问题标题】：I have no idea whats wrong jquery maybe?我不知道 jquery 有什么问题吗？
【发布时间】：2015-09-11 05:12:09
【问题描述】：

我不知道有什么问题可以帮助我吗？当我尝试在 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(){} 会是个问题，还是错字？
这是一个错字，但我改了，还是不行。
存在问题的行：$(document).ready(function(){}。这里的大括号错误。应该是 $(document).ready(function(){
控制台说什么
控制台显示 THREE.WebGLRenderer 71 Uncaught TypeError: renderer.setColor is not a function

标签： javascript jquery 3d three.js

【解决方案1】：

从这里删除右括号：

    $(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)");

【讨论】：

我改变了 renderer.setColor(0x000000);到 renderer.setClearColor(0x000000);效果也很好
酷，我对三库不熟悉，但上述更改对我有用

【解决方案2】：

您似乎立即打开并关闭了您的$(document).ready(function(){}。所以右括号需要删除$(document).ready(function(){}，所以整个脚本都包含在其中，并且底部有适当的结束标记。我没有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;
        }
    </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>

【讨论】：