Three.js 不渲染答案

【问题标题】：Three.js not renderingThree.js 不渲染
【发布时间】：2012-09-22 14:22:23
【问题描述】：

我正在使用以下代码来渲染 Blender 模型（刚开始的默认立方体），但没有显示任何内容：

<html>
    <head>
        <title>Test page for the </title>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <body>
        <div id="container"></div>
        <script src="src/three.min.js"></script>
        <script src="src/Stats.js"></script>
        <script>
        var camera, scene, renderer, loader;
            init();
            render();
            function init(){

                var container = document.getElementById('container');

                camera = new THREE.PerspectiveCamera(10, window.innerWidth/window.innerHeight, 1, 500);
                camera.position.y = 100;
                camera.position.z = 100;

                controls = new THREE.TrackballControls( camera );

                scene = new THREE.Scene();

                loader = new THREE.JSONLoader();
                loader.load('obj/one.js', function (geometry){
                    mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial({overdraw: true}));
                    scene.add(mesh);
                });

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

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                window.addEventListener( 'resize', onWindowResize, false );


            }

            function render(){
                renderer.render(scene, camera);
                controls.update();
                stats.update();
            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

        </script>
    </body>
</html>

一切都正确放置在它们的路径中，我得到的只是一个空白屏幕。建议？

【问题讨论】：

标签： html5-canvas three.js render

【解决方案1】：

这是因为您没有制作动画。 collada 加载器是一个回调函数，因此它会在初始页面渲染后完成加载，然后将对象添加到场景中。由于没有动画循环，一旦模型完成加载，页面将永远不会重绘。

【讨论】：