html - 在 div 标签内移动三个 js Canvas

Question

我是一个绝对的初学者。
我在 Blender 中创建了一个 3d 模型，我正在尝试建立一个投资组合网站来展示我的一些工作。我在网上学习了一个教程，我已经到了可以在我想要的大小的 Canvas 上显示我的 .gltf 模型的地步。我只能将它放在一个 div 标签中。
这是我的代码部分:

<div class="model">
    Model should go here:
    <script src="three.min.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
    <script>
        let scene, camera, render


        function init() {

            scene = new THREE.Scene()
            scene.background = new THREE.Color(0xdddddd)

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000)
            camera.rotation.y = 45 / 180 * Math.PI
            camera.position.x = 18
            camera.position.y = 18
            camera.position.z = 18



            hlight = new THREE.AmbientLight(0x404040, 5)
            scene.add(hlight)

            renderer = new THREE.WebGLRenderer({ antialias: true })
            renderer.setSize(1024, 567)

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            document.body.appendChild(renderer.domElement)

            let loader = new THREE.GLTFLoader()
            loader.load('patiomk2.gltf', function (gltf) {
                car = gltf.scene.children[0]
                car.scale.set(1000, 1000, 1000)
                scene.add(gltf.scene)
                animate();

            })
        }

        function animate() {
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init()
    </script>

</div>

And here is what appears in Chrome when I inspect the element
我希望 Canvas 出现在以绿色突出显示的 div 中，但它把它扔在以黄色显示的正文的末尾。
从我在网上阅读的内容来看，它可能与将 Canvas 附加到正文末尾的这行代码有关。删除那条线会破坏一切，我不知道该怎么做才能替代。

document.body.appendChild(renderer.domElement)

任何提示或指导将不胜感激。谢谢。

Answer 1

给您的 div一个 ID，查询它，然后将渲染器的 Canvas 附加到它，如下所示:

const div = document.getElementById('myDiv');
div.appendChild(renderer.domElement);

您必须注意在 DOM 准备就绪时执行此代码。否则将无法查询容器元素。因此，我建议您将脚本标签移到结尾 </body> 下方。标签。