Question

我正在尝试创建一个可以通过dat.GUI自定义的对象。我希望用户可以更改几何体的形状，而不仅仅是旋转和位置。我试图在我的代码的渲染部分添加正在创建几何的代码部分，但每次我更改几何体的形状时它都会创建几何体。请帮我解决这个问题。

<head>

<title> 
</title>

<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<script src="three.min.js"> </script>
<script src="dat.gui.min.js"></script>
<script src="dat.gui.js"></script>
<script src="OrbitControls.js"></script>
</head>
<body>
    <div id="container"></div>
<!--<script src="main.js"> </script>-->
<script type="text/javascript">

        var camera, scene, renderer;
        var cameraControls, effectController;
        var clock = new THREE.Clock();
        var gridX = true;
        var gridY = false;
        var gridZ = false;
        var axes = true;
        var ground = true;
        var arm, forearm, body;
        setupGui(); 
        fillScene();
        function fillScene() {
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

            // LIGHTS
            var ambientLight = new THREE.AmbientLight( 0x222222 );
            var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
            light.position.set( 200, 400, 500 );
            var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
            light2.position.set( -500, 250, -200 );
            scene.add(ambientLight);
            scene.add(light);
            scene.add(light2);

            // Material
            var bodyMaterial = new THREE.MeshPhongMaterial( { color: 0x279933, specular: 0x279933, shininess: 100 } );

            body = new THREE.Object3D();


            keyboardBase = new THREE.Object3D();
            drawKeyboardBase(keyboardBase, bodyMaterial)



            var dummy = new THREE.Object3D();
            dummy.position.x = -100;
            scene.add( dummy );



            scene.add(keyboardBase);
            //dummy.add(key1LeftFace);
            //body.add(key1RightFace);
            //scene.add(body);
            //scene.add(dummy);


        }



        function drawKeyboardBase(part, material)
        {
            var geometry = new THREE.PlaneGeometry( 400,400,1,1);
            var basePlane = new THREE.Mesh(geometry,material);
            basePlane.material.side = THREE.DoubleSide;
            basePlane.rotation.x = 90 * Math.PI/180;

            part.add(basePlane);
        }

        function init() {
            var canvasWidth = 846;
            var canvasHeight = 494;
            var canvasRatio = canvasWidth / canvasHeight;
            var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
            var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
            camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); 
            // RENDERER
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            renderer.setSize(canvasWidth, canvasHeight);
            renderer.setClearColor( 0xAAAAAA, 1.0 );

            // CAMERA

            camera.position.set( 0, 100, 1000 );
             camera.lookAt(scene.position);

            cameraControls = new THREE.OrbitControls( camera, renderer.domElement );



            }

        function addToDOM() {
            var container = document.getElementById('container');
            var canvas = container.getElementsByTagName('canvas');
            if (canvas.length>0) {
                container.removeChild(canvas[0]);
            }
            container.appendChild( renderer.domElement );
        }

        function animate() {
            window.requestAnimationFrame(animate);

            render();
        }

        function render() {
            var delta = clock.getDelta();


            //this the block of code that I mentioed, every time I change the shape, a shape is created!                          
            var squareGeometry = new THREE.Geometry();
             squareGeometry.vertices.push(new THREE.Vector3(-200.0*Math.tan(Math.PI*(effectController.ky/180)/2)*2*Math.sin(Math.PI*(effectController.ky/180)/2),  100, 0.0));
             squareGeometry.vertices.push(new THREE.Vector3( 0,  100, 0.0));    
             squareGeometry.vertices.push(new THREE.Vector3( 0, -100.0, 0.0));
             squareGeometry.vertices.push(new THREE.Vector3(-200.0*Math.tan(Math.PI*(effectController.ky/180)/2)*2*Math.sin(Math.PI*(effectController.ky/180)/2), -100.0, 0.0));
             squareGeometry.faces.push(new THREE.Face3(1, 2, 3));
             squareGeometry.faces.push(new THREE.Face3(3, 1, 0));
             var rightPlane = new THREE.Mesh(squareGeometry,new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } ));
             rightPlane.material.side = THREE.DoubleSide;
             rightPlane.rotation.x = 90 * Math.PI/180;
             scene.add(rightPlane);


            rightPlane.rotation.y = effectController.ky * Math.PI/180;
            renderer.render(scene, camera);
        }

        function setupGui() {

            effectController = {


                ky: -120.0
            };

            var gui = new dat.GUI();
            var h = gui.addFolder("Arm angles");

            h.add(effectController, "ky", -120.0, -60.0, 0.025).name("Plane angle");
        }


        try {
            init();
            fillScene();
            addToDOM();
            //setupGui();
            animate();
        } catch(e) {

        }


</script>
</body>

Answer 1

在你的fillscene函数中创建你的squareGeometry。

然后，看起来您想要将2个顶点的x坐标更改为某个值。在动画中这样做：

function animate() {
    window.requestAnimationFrame(animate);

    squareGeometry.vertices[0].x = whatever;
    squareGeometry.vertices[3].x = whatever;
    squareGeometry.verticesNeedUpdate = true; // ask for an update

    render();
}

无需改变面孔！

Answer 2

以下是使用渲染器内的dat.gui参数更新几何图形的工作示例。

https://jsfiddle.net/henryJack/kn3owveg/6/

在渲染器中，您可以像这样调用更新

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x -= params.xRotSpeed;
  mesh.rotation.y -= params.yRotSpeed;
  mesh.rotation.z -= params.zRotSpeed;
  mesh.scale.set(params.xScale, params.yScale, params.zScale); // could add an eventlistener for this also

  renderer.render(scene, camera);
}

使用dat.gui自定义几何体的形状

2 个答案: