简体   繁体   English

我不知道jquery怎么了?

[英]I have no idea whats wrong jquery maybe?

I have no idea whats wrong can any one help me? 我不知道有什么问题可以帮助我吗? when I try to load it up on chrome it is just white screen and the code use to be in its own file and it will be when i find out whats wrong it just loads a white page i am trying to make a cube load with help from jquery and three.js 当我尝试将其加载到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>

Remove the closing bracket from this: 从此处卸下右括号:

    $(document).ready(function(){

Remove this line, setColor doesn't seem to be a method for THREE.WebGLRenderer: 删除此行,setColor似乎不是THREE.WebGLRenderer的方法:

    renderer.setColor(0xdddddd);

Change: 更改:

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

to: 至:

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

It looks like you immediately opened and closed your $(document).ready(function(){} . So the right bracket needs to be deleted $(document).ready(function(){} so the entire script is contained in it and you have the appropriate closing tag at the bottom. I don't have three.js, but I think the following should work. 看来您立即打开和关闭了$(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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM