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>
海梅·桑切斯(Jaume Sanchez)

您不是从animate()函数中调用render(),因此仅通过OrbitControls onChange事件渲染场景。在animate()的末尾添加render(),它将起作用。然后,您也可以删除onChange回调,因为您将稳定地进行渲染。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Three.js-比例模型

来自分类Dev

Three.JS Collada模型大小内存问题

来自分类Dev

Three.JS Collada模型大小内存问题

来自分类Dev

Three.js-拖动Collada文件

来自分类Dev

Three.js raycaster 在我移动鼠标之前选择所有内容

来自分类Dev

Three.js-对象跟随鼠标位置

来自分类Dev

three.js通过鼠标向下旋转对象并移动

来自分类Dev

Three.js将鼠标移动限制为仅场景

来自分类Dev

Three.js-翻译还是移动?

来自分类Dev

面向移动设备的Three.js问题

来自分类Dev

Three.js项目导致移动崩溃

来自分类Dev

Three.js项目导致移动崩溃

来自分类Dev

three.js前后移动球

来自分类Dev

Three.js最复杂的模型

来自分类Dev

Three.js透明模型纹理错误

来自分类Dev

Three.js导入的模型抗锯齿

来自分类Dev

如何绘制Three.js模型?

来自分类Dev

Three.js模型质量很差

来自分类Dev

使用Three.js加载Maya模型

来自分类Dev

Three.js导入的模型抗锯齿

来自分类Dev

如何绘制Three.js模型?

来自分类Dev

THREE.js 加载 json 模型失败

来自分类Dev

Three.js:为相机添加光线

来自分类Dev

three.js-灯光移动时不更新场景照明

来自分类Dev

Three.js导入Collada动画不起作用

来自分类Dev

Three.js,从Collada导入的相机无法查看对象场景

来自分类Dev

three.js加载obj / mtl呈现黑色

来自分类Dev

three.js纹理未显示且为黑色

来自分类Dev

Three.js重叠透明PNG纹理有黑色背景