Javascript Three.js Collada模型显示为黑色，在鼠标移动之前没有灯光

我在three.js中显示collada模型时遇到了一个奇怪的问题 我怀疑脚本的逻辑有问题，但我不明白。 问题是Collada模型显示为黑色，直到用户移动鼠标（动态观察控制）。只有这样，模型才会亮起。 因此，最初，当页面加载时，模型是黑色的，这让用户感到困惑。 代码怎么了？错误在哪里

脚本的代码如下所示：

<script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;
        var camera, controls, scene, renderer;
        var pointLight;

        init();
        render();


        function animate() 
        {
            pointLight.position.copy( camera.position );
            requestAnimationFrame(animate);
            controls.update();
        }

        function init() {
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( -40, 70, 70 );


            controls = new THREE.OrbitControls( camera );
            controls.damping = 0.2;
            controls.addEventListener( 'change', render );

            scene = new THREE.Scene();



            // world

            var mesh;
            var loader = new THREE.ColladaLoader();
            loader.load('./models/collada/test.dae', function (result) {
                mesh = result.scene;
                mesh.scale.set(0.3, 0.3, 0.3);
                scene.add(mesh);
                render();
                 });



            // lights

          var hemLight = new THREE.HemisphereLight(0x000000, 0x303030, 0.8);
           scene.add(hemLight);

           pointLight = new THREE.PointLight( 0xffffff, 1.1 );
           pointLight.position.copy( camera.position );
           scene.add( pointLight );


            // renderer

           renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
           renderer.setClearColor(0xEEEEEE, 1);
           renderer.shadowMapType = THREE.PCFSoftShadowMap;
           renderer.setPixelRatio( window.devicePixelRatio );
           renderer.setSize( window.innerWidth, window.innerHeight );

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


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

          animate();

        }

        function onWindowResize() 
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            render();

        }

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


     </script>

如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
摄像机、控件、场景、渲染器；
var点光源；
init（）；
render（）；
函数animate（）
{
点光源.位置.复制（摄像机.位置）；
请求动画帧（动画）；
控件更新（）；
}
函数init（）{
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，11000）；
相机。位置。设置（-40,70,70）；
控制装置=新的三个控制装置（摄像机）；
控制。阻尼=0.2；
控件。addEventListener（'change'，render）；
场景=新的三个。场景（）；
//世界
var网格；
var loader=new THREE.ColladaLoader（）；
loader.load（'./models/collada/test.dae'，函数（结果）{
mesh=result.scene；
网格缩放设置（0.3,0.3,0.3）；
场景。添加（网格）；
render（）；
});
//灯光
var hemLight=新的三个半球灯光（0x000000，0x303030，0.8）；
场景。添加（hemLight）；
点光源=新的三点光源（0xffffff，1.1）；
点光源.位置.复制（摄像机.位置）；
场景。添加（点光源）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
setClearColor（0xeeee，1）；
renderer.shadowMapType=THREE.PCFSoftShadowMap；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container=document.getElementById（'container'）；
container.appendChild（renderer.doElement）；
addEventListener（'resize'，onWindowResize，false）；
制作动画（）；
}
函数onWindowResize（）
{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
render（）；
}
函数render（）
{
渲染器。渲染（场景、摄影机）；
}

您没有从animate（）函数调用render（），因此仅通过OrbitControls onChange事件渲染场景。在animate（）的末尾添加render（），它将起作用。您还可以删除onChange回调，因为您将稳定地进行渲染。

您没有从animate（）函数调用render（），因此场景仅通过OrbitControls onChange事件进行渲染。在animate（）的末尾添加render（），它将起作用。您还可以删除onChange回调，因为这样可以稳定地进行渲染。

谢谢您，Jaume！你说得对，你的解决方案成功了！谢谢你，我！你说得对，你的解决方案成功了！