题
I am trying to create an object that can be customized by dat.GUI. I want the shape of the geometry to be changed by the user, not just the rotation and position. I tried to add the part of the code which geometry is being created in the rendering part of my code, but it creates the geometry every time I change the shape of geometry. Please help me with this matter.
https://stackoverflow.com/questions/23243416
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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>
解决方案
Create your squareGeometry in your fillscene function.
Then, looks like you want to change the x coordinates of 2 vertices to some value. Do so in the animate:
function animate() {
window.requestAnimationFrame(animate);
squareGeometry.vertices[0].x = whatever;
squareGeometry.vertices[3].x = whatever;
squareGeometry.verticesNeedUpdate = true; // ask for an update
render();
}
No need to change the faces !
其他提示
Here is a working example of updating geometry using dat.gui parameters inside a renderer.
https://jsfiddle.net/henryJack/kn3owveg/6/
In the renderer you call your updates like so
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);
}
