WebGL(Three.js)の読み込みを早くしたい。div要素内(別窓)で描画して、その間にページのスクロールやクリックができるようにしたい。

Three.jsでdraco圧縮したモデルを表示することができました。
しかし、まだ読み込みに時間がかかるため、もっと高速化して快適にページを見れるようにしたいです。
今はdraco圧縮したgltfデータ(圧縮後4,346kB)を下記のコードのようにして表示しています。現段階でページを開いてから読み込みに13秒くらいかかっています。

javascript
1<!-------------------THREE.js------------------------>
2
3<script type="text/javascript">
4    // once everything is loaded, we run our Three.js stuff.
5    function init() {
6        // create a scene
7        var scene = new THREE.Scene();
8
9        // create a camera
10        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
11
12        // create a render and set the size
13        var webGLRenderer = new THREE.WebGLRenderer();
14        webGLRenderer.setClearColor(new THREE.Color(0xdddddd));
15        webGLRenderer.setSize(window.innerWidth / 2.38, window.innerHeight / 2.5);
16        webGLRenderer.shadowMap.enabled = true;
17        /*カクツキ防止? 解像度は下がる?*/
18        webGLRenderer.setPixelRatio(1);
19        console.log(window.innerWidth);
20        // position and point the camera
21        camera.position.x = -1.0;
22        camera.position.y = 1.2;
23        camera.position.z = 0.80;
24        camera.lookAt(new THREE.Vector3(0, 0, 0));
25
26        // add spotlight for the shadows
27        var spotLight = new THREE.SpotLight(0xffffff);
28        spotLight.castShadow = true;
29        spotLight.position.set(-5, 7, 6);
30        spotLight.intensity = 1;
31        scene.add(spotLight);
32
33        var dirLight = new THREE.DirectionalLight(0xffffff);
34        dirLight.position.set(30, 30, 30);
35        dirLight.intensity = 0.8;
36        scene.add(dirLight);
37        // add the output of the renderer to the html element
38        wrapper = document.getElementById("threejs");
39        wrapper.appendChild(webGLRenderer.domElement);
40
41
42        var controls = new THREE.OrbitControls(camera, wrapper);
43        var mesh, mixer;
44        var clock = new THREE.Clock();
45        /*****************ローディングマネジャー***********************/
46        var loadingManager = new THREE.LoadingManager(function() {
47            var loadScreen = document.getElementById("loading-screen");
48            loadScreen.classList.add('fade-out');
49            loadScreen.addEventListener('transitioned', onTransitionEnd);
50        });
51
52        function onTransitionEnd(event) {
53
54            event.target.remove();
55        }
56        /*****DracoLoder追加します*****/
57        THREE.DRACOLoader.setDecoderPath('threejs/js/libs/draco/gltf/');
58        var dracoLoder = new THREE.DRACOLoader();
59        var loader = new THREE.GLTFLoader(loadingManager);
60        loader.setDRACOLoader(dracoLoder);
61    
62        loader.load('threejs/models/gltf/modelDraco.gltf', function(data) {
63            var gltf = data;
64            object = gltf.scene;
65            var animations = gltf.animations;
66
67            if (animations && animations.length) {
68                var i;
69
70                mixer = new THREE.AnimationMixer(object);
71
72                for (i = 0; i < animations.length; i++) {
73                    mixer.clipAction(animations[i]).play();
74                }
75            }
76
77            scene.add(object);
78            render();
79        });
80
81        var step = 0;
82
83        function render() {
84            var delta = clock.getDelta();
85
86            // on-offスイッチ用
87            if (params) {
88                mixer.update(delta);
89            }
90
91            webGLRenderer.render(scene, camera);
92            controls.update();
93
94            // render using requestAnimationFrame
95            requestAnimationFrame(render);
96            webGLRenderer.render(scene, camera);
97            window.addEventListener('resize', onWindowResize, false);
98        }
99
100        function onWindowResize() {
101            camera.aspect = window.innerWidth / window.innerHeight;
102            camera.updateProjectionMatrix();
103            webGLRenderer.setSize(window.innerWidth / 2.38, window.innerHeight / 2.5);
104            var onwidth = 650;
105            var windowWidth = window.innerWidth;
106
107            if (windowWidth <= onwidth) {
108                webGLRenderer.setSize(window.innerWidth / 2.38, window.innerHeight / 4.0);
109            }
110        }
111
112    }
113    window.onload = init();
114</script>
115<!--------------------------------------------------->

また、このthree.jsはページの一部分のdiv要素内で描画するようにしています。window.onload = (関数) の記述によってhtmlページを読み込んでからthree.jsの読み込みと描画をし始めるはずなので、モデルの読み込み中にページのスクロール等ができると思っていたのですが、できませんでした。そのようにすることはできないのでしょうか？
（Firefox, edge, safari では内容の表示はページ上部に限りますが、スクロールができました。Chromeだとモデルが完全に読み込まれるまでスクロール等ができず、読み終わるまで固まってしまいました。）
setpixelratioも上記コードのように付け足してみましたが、Google PageSpeed Insightsで確認したところ効果がありませんでした。

なにか良い方法がありましたら教えていただきたいです。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

３Ｄモデルは、PNGやJpegといった2D画像と違い、「ダウンロードする⇒ダウンロードしたデータを解析し、画面に表示できる形に変換する」というステップが必要になります。
ダウンロード中のステップは、ブラウザ側で平行してその処理が行えるようになっているのですが、データ解析＆変換ステップはCPUのスレッドを使ってしまうため、ひと工夫しないと、上記で試されたように画面の更新をブロックしてしまいます。

これをブロックしないようにする仕組みはいくつかあるのですが、その中の一つである「WebWorker可」に、今Three.jsの貢献者たちが尽力してくれているそうです。

https://rawgit.com/kaisalmen/three.js/WorkerLoader_OBJLoader/examples/webgl_loader_worker_draco.html

上記はThree.jsの貢献者の一人が、Draco＆GLTFローダーを、WebWorkerを使用して画面をブロックしないようにしてくれている途中（ほぼ完了かも）の段階のものです。
この後、そう遠くない未来（3カ月とか半年とか？）に、公式のサンプルローダーとして上げられると思います。
もし、そのThree.jsのバージョン更新まで待てない！というのでしたら、上記を使って試してみるのもいいかもしれません。

投稿2018/10/15 05:27