three.js你好世界的例子：画布不渲染

Question

I am trying to make this hello world example run on my own computer: http://jsfiddle.net/GKCx6/ 我试图在我自己的计算机上运行这个hello world示例： http ： //jsfiddle.net/GKCx6/

I have made my efforts so far available here: https://dl.dropbox.com/u/2070405/wtf/index.html 到目前为止，我已经做了很多努力： https ： //dl.dropbox.com/u/2070405/wtf/index.html

Everything seems to work fine, except for the fact that nothing renders. 一切似乎工作正常，除了没有任何渲染的事实。 How do I approach debugging this? 我该如何调试呢？ I have used firebug so far. 到目前为止我使用过firebug。

This is the content of index.html: 这是index.html的内容：

<!doctype html>
<html>
    <head>
        <title>learningthree.js boiler plate for three.js</title>
        <meta charset="utf-8">
    </head>
<body>
    <!-- three.js container -->
        <div id="container"></div>
    <!-- info on screen display -->

</body>
<script src="three.js"></script>
<script src="main.js"></script>
</html>

This is the content of main.js: 这是main.js的内容：

// RequestAnimationFrame.js:
if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( callback, element ) {

            window.setTimeout( callback, 1000 / 60 );

        };

    } )();

}


// Hello World1 from https://github.com/mrdoob/three.js

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

init();
//console.log("renderer defined? ", renderer);
animate();

function init() {

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

    console.log("THREE.Scene available? ", THREE.Scene);
    scene = new THREE.Scene();
    console.log("scene created? ", 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( 800, 600 );
    //renderer.setSize( window.innerWidth, window.innerHeight );

    container = document.getElementById("container");
    container.appendChild(renderer.domElement);

    }

    function animate() {

        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
        requestAnimationFrame( animate );
        console.log("animate in action");
        render();

    }

    function render() {

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        console.log("renderer in action");
        renderer.render( scene, camera );

    }

Answer 1

You are copying code appropriate for an older version of three.js. 您正在复制适用于旧版本three.js的代码。 Download your examples from the three.js zip repository here: https://github.com/mrdoob/three.js . 从这里的three.js zip存储库下载您的示例： https ： //github.com/mrdoob/three.js 。

For updated fiddle, see jsfiddle.net/GKCx6/142/ 有关更新的小提琴，请参阅jsfiddle.net/GKCx6/142/

three.js你好世界的例子：画布不渲染

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-10-20 13:40:12

three.js你好世界的例子：画布不渲染

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-10-20 13:40:12

解决方案1
3 已采纳 2012-10-20 13:40:12