Question

我想控制模型的旋转速度，所以我尝试使用dat.gui来完成它。我在渲染脚本中写了flollows：

function render() {
                    group.rotation.y -= controls.rotation;
                    renderer.render(scene, camera);
                }

controls是dat.gui的参数。

var controls = {
                    rotation :-0.004,
                };
                var gui = new dat.GUI();
                gui.add(controls, 'rotation', -0.001, 0.001);

但是当我运行我的演示时，我的模型消失了！我只能看到我的场景。我想知道错误发生在哪里，所以我修改它：

function render() {
                    alert(controls.rotation);
                    group.rotation.y -= controls.rotation;
                    renderer.render(scene, camera);
                }

我发现第一个警报是-0.004，但是其他（第二个，第三个等等）是未定义的。所以我猜我的演示只渲染第一帧，因为模型没有加载，所以我不能看到它。

我想知道它为什么会发生，以及如何解决它？

Ps：所有代码如下：

<head>
    <meta charset="UTF-8">
    <title>ytest</title>
    <script type="text/javascript" src="JSandCSS/three.js"></script>
    <script type="text/javascript" src="JSandCSS/OrbitControls.js"></script>
    <script type="text/javascript" src="JSandCSS/OBJLoader.js"></script>
    <script type="text/javascript" src="JSandCSS/Raycaster.js"></script>
    <script type="text/javascript" src="dat.gui-master/build/dat.gui.js"></script>
    <script type="text/javascript" src="JSandCSS/stats.min.js"></script>
    <style>
    body {
        /* set margin to 0 and overflow to hidden, to go fullscreen */
        margin: 0;
        overflow: hidden;
    }
</style>
</head>

<body>
    <div id="Stats-output">
    </div>
    <div id="WebGL-output">
    </div>
    <div id="form">
    </div>
    <div id="ui">
    </div>
    <script type="text/javascript">
        function init() {

            var stats = initStats();
            var scene = new THREE.Scene();
            var group = new THREE.Group;
            scene.add(group);
            var controls = new function() {
                this.rotation = 0.004;
            };
            var gui = new dat.GUI();
            gui.add(controls, 'rotation', 0, 0.008);

            var textureLoader = new THREE.TextureLoader();
            var mat = new THREE.MeshLambertMaterial({
                map: textureLoader.load("model/earth/texture.jpg"),
                specularMap: textureLoader.load("model/earth/specular.jpg"),
                lightMap: textureLoader.load("model/earth/light.jpg")
            }); 

            var loader = new THREE.OBJLoader();
            loader.load('model/earth/earth.obj',
                function chuanzhi(obj) {
                    obj.traverse(function(child) {
                        if(child instanceof THREE.Mesh) {
                            child.material = mat;
                        }
                    });
                    Mesh = obj;
                    obj.scale.set(2, 2, 2);
                    group.add(obj);
                    objects.push(Mesh);
                });

            var light = new THREE.PointLight(0xffffff);
            light.position.set(300, 400, 200);
            light.intensity.set = 0.1;
            scene.add(light);
            scene.add(new THREE.AmbientLight(0x333333));


            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(200, 200, 200);
            camera.lookAt(scene.position);

            var renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            renderer.render(scene, camera);
            renderer.setClearColor(0x808080, 0.5); 


            document.getElementById("WebGL-output").appendChild(renderer.domElement);

            var controls = new THREE.OrbitControls(camera);
            controls.addEventListener('change', render); 

            render(); 

            window.addEventListener('resize', handleWindowResize, false); 

            function render() {
                stats.update();
                group.rotation.y-=controls.rotation;
                requestAnimationFrame(render);
                renderer.render(scene, camera);

            } 
            function handleWindowResize() {
                HEIGHT = window.innerHeight;
                WIDTH = window.innerWidth;
                renderer.setSize(WIDTH, HEIGHT);
                camera.aspect = WIDTH / HEIGHT;
                camera.updateProjectionMatrix();
            }

            function initStats() {

                var stats = new Stats();

                stats.setMode(0); // 0: fps, 1: ms

                // Align top-left
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';

                document.getElementById("Stats-output").appendChild(stats.domElement);

                return stats;
            }
        }
        window.onload = init;
    </script>

</body>

Answer 1

您是否尝试在渲染周期中使用

group.rotateY(controls.rotation);

用于设置几何旋转？（我说你正在旋转几何体）。

另一个方法可能如下：

var rotationAngle = 0.001;
...
var gui = new dat.GUI();
gui.add(controls, 'rotation', -5, 5).onChange(function(value){
rotationAngle = value * Math.PI / 180;
});
...
function render() {
                    group.rotateY(rotationAngle);
                    renderer.render(scene, camera);
                }

Answer 2

我知道是什么原因......因为：

var controls = new THREE.OrbitControls(camera);
            controls.addEventListener('change', render);

删除该模型并显示模型。

按如下所示修改它，它可以正常工作：

cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
                cameraControls.addEventListener('change', render);

但它仍然有一个错误：当你使用鼠标旋转时，它旋转得越来越快^

如何使用dat.gui来控制模型在three.js中的旋转速度？

2 个答案: