浏览器不使用 three.js 渲染任何东西答案

【问题标题】：The browser does not render anything with three.js浏览器不使用 three.js 渲染任何东西
【发布时间】：2013-08-02 05:07:13
【问题描述】：

我刚接触 webGL 和 three.js，我刚刚从 JSFiddle 中挑选了一个示例，

http://jsfiddle.net/BlackSRC/XWCRM/1/

但是当我测试它时，我什么也没得到，代码如下所示：

<!DOCTYPE html>
<html>


<head>
    <title>ThreeJS</title>

</head>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/mrdoob-three.js-2524525/build/three.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

<body onload="onLoadComplete();">

我错过了什么吗？感谢您的帮助！

【问题讨论】：

参考three.js说明：github.com/mrdoob/three.js
在 chrome 中呈现，如果您使用 Internet Explorer，请使用其他浏览器。
我在这个链接下打开了一个线程：github.com/mrdoob/three.js/issues/3710 他们说我应该问他，因为这不是我试图用 chrome 和歌剧渲染它的错误，但它仍然存在不工作:(
我提到的指令有一个名为“使用”的部分，告诉你如何让它运行。控制台有错误吗？
不幸的是我没有得到任何错误，我可以滚动页面，这意味着，元素已经创建并且它在那里但它仍然没有被 rednered :(

标签： html three.js webgl render

【解决方案1】：

你的代码没有问题，但是你使用的是本地的js文件。所以它要求js代码在body dom渲染之前运行，所以当调用document.body.appendChild(renderer.domElement);会导致错误：

test.html:45 Uncaught TypeError: Cannot read property 'appendChild' of 空（…）

并导致空白页。但是当我使用未存储在本地的远程 js 文件进行测试时，它运行良好。所以为了避免这个问题，让js在dom之后加载。

下面是代码，我只是把js代码前的body，并使用了网上的js文件。这里把body放在js代码后面也可以，因为js是远程加载的，js运行的时候body已经渲染好了。

 <!DOCTYPE html>
<html>
<head>
    <title>ThreeJS</title>

<body onload="onLoadComplete();">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

</html>

【讨论】：

【解决方案2】：

点击inspect并检查是否有任何与加载模型路径相关的错误，或者可能是一些构造函数错误。

您可能希望将其更改为 geometry = CubeGeometry(...)
还可以使用实时服务器加载三个 js 模型，因为它们本质上是动态的。

【讨论】：