THREE.jsで作った3DモデルをHTMLのdiv要素内でだけ表示したい（レスポンシブにしたい）

/文章を見直し、意図が伝わらない文章だったため修正させていただきました***/
表題の通りなのですが、THREE.jsで作成したアニメーションをページの特定の領域でだけレスポンシブに表示をしたいと考えています。
document.getElementByIdでdiv要素を取得し、そこに描画して後はCSSでサイズや位置をいじればよいだろうと思ったのですが、どうも思ったとおりに行きません。

このような場合はどのようにコードを書き換えればよいでしょうか？
レスポンシブな表示をすることは難しいのでしょうか.....

よろしくお願いします。

javascript
1<!-------------------THREE.js------------------------>
2    <script>
3    if (!Detector.webgl) Detector.addGetWebGLMessage();
4
5    var container, controls;
6    var camera, scene, renderer, light, mixer;
7    var clock = new THREE.Clock();
8    var mesh;
9
10    init();
11    animate();
12
13    function init() {
14        // container = document.createElement('div');
15        container = document.getElementById("threejs");
16        // document.body.appendChild(container);
17
18        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
19        camera.position.set(-1.8, 0.9, 2.7);
20
21        controls = new THREE.OrbitControls(camera, container);
22        controls.target.set(0, -0.2, -0.2);
23        
24
25        scene = new THREE.Scene();
26     
27        scene.background = new THREE.Color(0x58a2e2)
28
29        light = new THREE.HemisphereLight(0xffffff, 0x444444);
30        light.position.set(0, 200, 0);
31        scene.add(light);
32
33        light = new THREE.DirectionalLight(0xffffff);
34        light.position.set(0, 200, 100);
35        light.castShadow = true;
36        light.shadow.camera.top = 180;
37        light.shadow.camera.bottom = -100;
38        light.shadow.camera.left = -120;
39        light.shadow.camera.right = 120;
40        scene.add(light);
41
42        // slider
43        var params = {
44            morphTarget: 0,
45        };
46
47        var gui = new dat.GUI();
48
49        var folder = gui.addFolder('Morph Targets');
50        folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
51            mesh.morphTargetInfluences[0] = value
52        });
53        folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
54            mesh.morphTargetInfluences[1] = value
55        });
56
57        folder.open();
58
59        // grid
60        var grid = new THREE.GridHelper(20, 20, 0x000000, 0x000000);
61        grid.material.opacity = 0.2;
62        grid.material.transparent = true;
63        scene.add(grid);
64
65        // model
66        var loader = new THREE.GLTFLoader();
67        var filepath = "threejs/models/gltf/test/welcometoblender.gltf";
68
69
70        loader.load(filepath, function(gltf) {
71
72            gltf.scene.traverse(function(node) {
73                if (node.isMesh) mesh = node;
74            });
75
76            mesh.material.morphTarget = true;
77
78            scene.add(mesh);
79
80         
81
82
83            if (gltf.animations.length > 0) {
84
85                var animationIndexToPlay = 0;
86
87                
88
89                var animations = gltf.animations;
90                if (animations && animations.length) {
91                    mixer = new THREE.AnimationMixer(gltf.scene);
92                    var animation = animations[animationIndexToPlay];
93                    var action = mixer.clipAction(animation);
94                    action.play();
95                }
96
97                
98
99            } else {
100                alert("Model has NO animations");
101            }
102
103            gltf.scene.traverse(function(child) {
104                if (child.isMesh) {
105                    // handle child objects
106                }
107            });
108        });
109
110        // render
111        renderer = new THREE.WebGLRenderer({
112            antialias: true
113        });
114        renderer.setPixelRatio(window.devicePixelRatio);
115        /*下の記述でサイズ変更できる？*/
116        renderer.setSize(500, 500);
117        renderer.gammaOutput = true;
118        container.appendChild(renderer.domElement);
119        window.addEventListener('resize', onWindowResize, false);
120    }
121
122    function onWindowResize() {
123        camera.aspect = window.innerWidth / window.innerHeight;
124        camera.updateProjectionMatrix();
125        renderer.setSize(window.innerWidth, window.innerHeight);
126    }
127
128    function animate() {
129        controls.update();
130        requestAnimationFrame(animate);
131        if (mixer) mixer.update(clock.getDelta());
132        renderer.render(scene, camera);
133        
134    }
135
136</script>

div要素はbodyタグ中で<div id="threejs"></div> としており、上述したコードはbodyタグの後ろで(</body>から</html>の間)記述しています。

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

回答1件

ベストアンサー

renderer が、Three.jsの描画部分を担っているということは、既にお分かりだと思います。

ですが、Three.jsで扱っている'renderer'だけでなく、 'camera' にも設定しないと、表示が崩れます。

いわゆるサンプルで「window.innerWidth（同じくinnerHeight)」になっていた部分を、全部指定したいDOMのサイズにしてしまえば解決します。

提示されたソースでいうと、

function init() {
 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
 // ↑ここ

//以下略


// init　の最期で、コレを呼ぶといいと思います
 onWindowResize();
}

//それとこのあたりも修正
function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
}

camera.aspect　は、3D描画されるものの縦横比を設定します。そのため、 window のサイズから違うものを適用したいのであれば、ここのあたりもそろって変えてあげましょう。

投稿2018/10/08 09:42