在 div 标签内移动三个 js 画布

Question

我是一个绝对的初学者。

我已经在搅拌机中创建了一个 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>

And here is what appears in Chrome when I inspect the element

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

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

document.body.appendChild(renderer.domElement)

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

Answer 1

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

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

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