THREE中使用dat.gui控制模型旋转速度

最新推荐文章于 2023-04-28 16:26:23 发布

RumbleWx

最新推荐文章于 2023-04-28 16:26:23 发布

阅读量326

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/RumbleWx/article/details/126424048

版权

<!DOCTYPE html>
<html>
    <head>
        <title>更改小球转速</title>
        <script type="text/javascript" src="./three.js"></script>
        <script type="text/javascript" src="./dat.gui.min.js"></script>
        <script type="text/javascript" src="./OrbitControls.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="dom"></div>
        <script type="text/javascript">
            var camera;
            var renderer;
            function init() {
                /* 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光 */

                // 场景
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0xffffff);

                // 摄像机
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.x = 200;
                camera.position.y = 200;
                camera.position.z = 200;
                camera.lookAt(scene.position); // 将摄像机对准场景的中心

                // 渲染器
                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(new THREE.Color(0xeeeeee));
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMap.enabled = true; // 设置渲染器需要阴影效果
                document.getElementById("dom").appendChild(renderer.domElement); // 将渲染器的输出添加到HTML元素

                // 控制器
                orbit = new THREE.OrbitControls(camera, renderer.domElement);

                // 坐标轴
                // var axes = new THREE.AxesHelper(100);
                // scene.add(axes);

                // 创建一个基础材质的立方体
                function createBoxGeometryBasicMaterial() {
                    // 创建一个立方体并设置大小
                    var cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
                    var cubeMaterial = new THREE.MeshBasicMaterial({
                        color: 0xffffff * Math.random(),
                        wireframe: true, // 线性
                        side: THREE.DoubleSide,
                    });
                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                    // 设置立方体位置
                    cube.position.x = 0;
                    cube.position.y = 0;
                    cube.position.z = 0;
                    return cube;
                }
                // 将立方体添加到场景中
                var cube = createBoxGeometryBasicMaterial();
                scene.add(cube);

                // 随着窗体的变化修改场景
                function onResize() {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                }
                window.addEventListener("resize", onResize, false); // 监听窗体调整大小事件

                /* 使用 dat.gui 调试库 */
                // 对象参数
                var controls = {
                    rotationSpeed: 0,
                };
                // 实例化
                var gui = new dat.GUI();
                var changeSpeed = gui.addFolder("[ 旋转速度 ]");
                changeSpeed.open();
                // changeSpeed.add(controls, "rotationSpeed", 0, 0.2).step(0.001).name("旋转速度");
                changeSpeed.add(controls, "rotationSpeed", { 静止: 0, 慢速: 0.005, 低速: 0.05, 中速: 0.1, 快速: 0.5 }).name("旋转速度");

                // 实时渲染动画
                function renderScene() {
                    orbit.update();
                    // 使用requestAnimationFrame函数进行渲染
                    // ！！！类型转换 string -> number
                    cube.rotation.x += Number(controls.rotationSpeed); 
                    cube.rotation.z += Number(controls.rotationSpeed);
                    requestAnimationFrame(renderScene);
                    renderer.render(scene, camera);
                }
                renderScene(); // 启动动画
            }

            // 窗口加载
            window.onload = init;
        </script>
    </body>
</html>