Question

我写了一个小的Three.js程序，只是为了展示我的我使用JSONLoader构建和导入的外部模型。

在使用r-83时，问题是这个项目在任何笔记本电脑上运行都很好，但是当我尝试在我的三星Galaxy s6中打开它时，fps从大约60 fps开始，从那里它下坡直到它压碎。

我无法理解我做错了什么。

我将其上传到http://3dhd.co.il/test的服务器，并在此处复制了代码：

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="icon" href="{{ URL::to('/images/favicon.png') }}" type="image/gif" sizes="16x16">

        <!-- Three.js r-83 scripts -->
        <script src="{{ asset('js/r-83/three.js') }}"></script>
        <script src="{{ asset('js/r-83/OrbitControls.js') }}"></script>
        <script src="{{ asset('js/HouseEditor/threeJS/js/libs/stats.min.js') }}"></script>
        <script src="{{ asset('js/HouseEditor/threeJS/js/libs/dat.gui.min.js') }}"></script>
    </head>

    <body>
        <div id="Container" style="position: fixed; width: 100%; height: 100%;"></div>

        <script>
            var camera, scene, renderer, controls, mStats;
            initItem();

            function initItem()
            {
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 9000);
                camera.position.set(2, 380, 300);
                camera.lookAt(new THREE.Vector3(0, 0, 0));

                var ambient = new THREE.AmbientLight(0xdddddd);
                scene.add(ambient);

                var aLight = new THREE.DirectionalLight(0xffffff, 0.05);
                aLight.position.copy(new THREE.Vector3(100, 900, 100));
                aLight.color.setHSL(0.1, 1, 0.95);
                scene.add(aLight);

                // Debugging tool
                window.scene = scene;

                // Create renderer
                renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(0xffffff, 1);
                renderer.setPixelRatio( window.devicePixelRatio );

                var loader = new THREE.JSONLoader();
                loader.load(
                    '/3/kfir_closet01_foruv02.js',
                    function ( geometry, materials ) {
                        var material = new THREE.MultiMaterial( materials );
                        var object = new THREE.Mesh( geometry, material );
                        scene.add( object );
                    }
                );

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

                mStats = new Stats();
                mStats.domElement.style.position = 'absolute';
                mStats.domElement.style.zIndex = "100px";
                mStats.domElement.style.left = "0px";
                mStats.domElement.style.top = "0px";
                container.appendChild(mStats.domElement);

                // Create controls
                controls = new THREE.OrbitControls(camera, container);
                controls.rotateSpeed = 0.7;
                controls.zoomSpeed = 1.2;
                controls.panSpeed = 0.8;
                controls.enableZoom = true;
                controls.enablePan = true;
                controls.enableDamping = true;
                controls.dampingFactor = 0.6;

                controls.minDistance = 100;
                controls.maxDistance = 450;
                controls.maxPolarAngle = 0.9 * Math.PI / 2;

                animateItem();
                window.addEventListener( 'resize', onItemWindowResize, false );
            }

            function animateItem()
            {
                requestAnimationFrame(animateItem);
                renderItem();
            }

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

            function onItemWindowResize()
            {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
        </script>
    </body>
</html>

正如您所看到的，代码非常简单。那为什么它不适用于手机呢？

减少一个小型Three.js项目的fps

0 个答案: