0

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

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

控制是 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，但其他（第二个，第三个等）未定义。所以我猜我的演示只渲染了第一帧，因为模型没有完全加载，所以我看不到它。

我想知道为什么会这样，如何解决？</p>

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>

4

3 回答 3

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);
                }
于 2016-09-15T04:46:01.520 回答
0

我知道这是怎么回事……因为如下：</p> 

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

删除它并出现模型。

修改如下，就可以正常工作了：

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

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

于 2016-09-15T12:32:23.210 回答
0

@adonike提供的答案对我有用。

但是，我观察到每当我将 dat.gui 滑块移动到“0”时，对象都会继续旋转。

所以我尝试了一些修改，当滑块设置为“0”值时停止旋转。

1]将旋转值设置为最接近步骤1的十进制值。我不知道为什么或如何解释逻辑。我猜这很愚蠢。

var controls = new function() {
            this.rotation = 0.9; // a value close to step 1
        };

2]将旋转步数设置为1。（任何非十进制值都有效）

// Setting slider steps to 1
    var gui = new dat.GUI();
    gui.add(controls, 'rotation', -5, 5).step(1).listen().onChange(function(value){
    rotationAngle = value * Math.PI / 180;
    });

这种方法似乎只在步数为整数时才有效。

于 2021-09-11T00:25:13.100 回答