Html 在div标记内移动一个三js画布

我是个十足的初学者

我已经在blender中创建了一个3d模型，我正试图建立一个公文包网站来展示我的一些作品。我在网上学习了一个教程，现在我已经可以在画布上显示我的.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>

模型应该放在这里：
让场景、摄影机、渲染
函数init（）{
场景=新的三个。场景（）
scene.background=新的三种颜色（0xDDDD）
摄像头=新的三个透视摄像头（40，window.innerWidth/window.innerHeight，15000）
camera.rotation.y=45/180*Math.PI
摄像机位置x=18
摄像机位置y=18
摄像机位置z=18
高亮度=新的三个环境光（0x404040，5）
场景。添加（高亮度）
renderer=new THREE.WebGLRenderer（{antialas:true}）
renderer.setSize（1024567）
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
document.body.appendChild（renderer.doElement）
let loader=new THREE.GLTFLoader（）
loader.load（'patiomk2.gltf'，函数（gltf）{
car=gltf.scene.children[0]
汽车秤组（100010001000）
scene.add（gltf.scene）
制作动画（）；
})
}
函数animate（）{
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}
init（）

我希望画布出现在以绿色突出显示的div中，但它将画布扔到以黄色显示的主体的末端

从我在线阅读的内容来看，这可能与将画布附加到正文末尾的这行代码有关。删除这条线会破坏一切，我不知道作为替代品该怎么做

document.body.appendChild（renderer.doElement）

---

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

给您的

div

一个ID，查询它，然后像这样将渲染器的画布附加到它：

constdiv=document.getElementById（'myDiv'）；
div.appendChild（renderer.doElement）；

---

当DOM准备就绪时，您必须知道如何执行此代码。否则将无法查询容器元素。因此，我建议您将脚本标记移到结束标记下方。

这就成功了。谢谢你的反馈！如果您想解释一下，我不知道您所说的“当DOM准备就绪时，您必须意识到执行此代码”是什么意思。是什么使DOM准备就绪，以及为什么将脚本移到

标记之外会这样做？请阅读以下内容以了解更多详细信息：