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通过鼠标向下旋转对象并移动

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Three.js:为相机添加光线

来自分类Dev

Three.js-翻译还是移动?

来自分类Dev

Three.js导入的模型抗锯齿

来自分类Dev

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

来自分类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 Collada模型大小内存问题

来自分类Dev

Three.js-拖动Collada文件

来自分类Dev

Three.js项目导致移动崩溃

来自分类Dev

如何绘制Three.js模型?

来自分类Dev

three.js前后移动球

来自分类Dev

THREE.js 加载 json 模型失败

来自分类Dev

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

来自分类Dev

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