将Three.js的画面插入到网页布局中

最新推荐文章于 2024-06-05 21:18:53 发布

如梦似电

最新推荐文章于 2024-06-05 21:18:53 发布

阅读量1.4k

点赞数 1

分类专栏： web前端开发-动画文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_34136540/article/details/123150176

版权

web前端开发-动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端开发三维画面时，并非所有的画面都独立占用整个窗口，通常会先将网页布局设计好，再将画面插入到预先分配的画面显示位置。

思路

1.在body下的创建div并配置好布局

<div id="3dAnime"></div>

2.在Three.js代码中，使用dom.appendChild函数在div下插入元素

document.getElementById("3dAnime").appendChild(renderer.domElement)

示例代码如下：

<html>

<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>

    <!-- 网页布局 -->
    <div style="float: left;display: block; margin: 0;padding: 0; width: 50; height: 720;background-color: aqua;">
        <p style="margin: 0;padding: 0;font-size: 30px;color: black;">侧边栏宽50</p>
    </div>
    <div id="3dAnime" style="float: left;display: block; margin: 0;padding: 0; width: 1280; height: 720;"></div>

    <!-- 动画 -->
    <script src="Three/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 1280 / 720, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(1280, 720);
        document.getElementById("3dAnime").appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>