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

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

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

よろしくお願いします。

<!-------------------THREE.js------------------------>
    <script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var container, controls;
    var camera, scene, renderer, light, mixer;
    var clock = new THREE.Clock();
    var mesh;

    init();
    animate();

    function init() {
        // container = document.createElement('div');
        container = document.getElementById("threejs");
        // document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(-1.8, 0.9, 2.7);

        controls = new THREE.OrbitControls(camera, container);
        controls.target.set(0, -0.2, -0.2);


        scene = new THREE.Scene();

        scene.background = new THREE.Color(0x58a2e2)

        light = new THREE.HemisphereLight(0xffffff, 0x444444);
        light.position.set(0, 200, 0);
        scene.add(light);

        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, 200, 100);
        light.castShadow = true;
        light.shadow.camera.top = 180;
        light.shadow.camera.bottom = -100;
        light.shadow.camera.left = -120;
        light.shadow.camera.right = 120;
        scene.add(light);

        // slider
        var params = {
            morphTarget: 0,
        };

        var gui = new dat.GUI();

        var folder = gui.addFolder('Morph Targets');
        folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
            mesh.morphTargetInfluences[0] = value
        });
        folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
            mesh.morphTargetInfluences[1] = value
        });

        folder.open();

        // grid
        var grid = new THREE.GridHelper(20, 20, 0x000000, 0x000000);
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add(grid);

        // model
        var loader = new THREE.GLTFLoader();
        var filepath = "threejs/models/gltf/test/welcometoblender.gltf";


        loader.load(filepath, function(gltf) {

            gltf.scene.traverse(function(node) {
                if (node.isMesh) mesh = node;
            });

            mesh.material.morphTarget = true;

            scene.add(mesh);




            if (gltf.animations.length > 0) {

                var animationIndexToPlay = 0;



                var animations = gltf.animations;
                if (animations && animations.length) {
                    mixer = new THREE.AnimationMixer(gltf.scene);
                    var animation = animations[animationIndexToPlay];
                    var action = mixer.clipAction(animation);
                    action.play();
                }



            } else {
                alert("Model has NO animations");
            }

            gltf.scene.traverse(function(child) {
                if (child.isMesh) {
                    // handle child objects
                }
            });
        });

        // render
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        /*下の記述でサイズ変更できる？*/
        renderer.setSize(500, 500);
        renderer.gammaOutput = true;
        container.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        controls.update();
        requestAnimationFrame(animate);
        if (mixer) mixer.update(clock.getDelta());
        renderer.render(scene, camera);

    }

</script>

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