Three.js 使用dat.gui自定义几何图形的形状
我正在尝试创建一个可以由dat.GUI自定义的对象。我希望几何体的形状由用户更改，而不仅仅是旋转和位置。我尝试在代码的渲染部分添加正在创建的几何体的代码部分，但每次我更改几何体的形状时，它都会创建几何体。请帮我处理这件事Three.js 使用dat.gui自定义几何图形的形状,three.js,dat.gui,Three.js,Dat.gui,我正在尝试创建一个可以由dat.GUI自定义的对象。我希望几何体的形状由用户更改，而不仅仅是旋转和位置。我尝试在代码的渲染部分添加正在创建的几何体的代码部分，但每次我更改几何体的形状时，它都会创建几何体。请帮我处理这件事 <head> <title> </title> <link type="text/css" rel="stylesheet" href="stylesheet3.css"/> <script src="three.mi
<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>
摄像机、场景、渲染器；
var摄像机控制器、效应控制器；
var clock=新的三个时钟（）；
var gridX=true；
var gridY=false；
var gridZ=false；
var轴=真；
var地面=真；
前臂，前臂，身体；
setupGui（）；
fillScene（）；
函数fillScene（）{
场景=新的三个。场景（）；
scene.fog=新的3.fog（0x80808020004000）；
//灯光
var环境光=新的三个环境光（0x22222）；
var灯光=新的三方向灯光（0xFFFFFF，1.0）；
光。位置。设置（200400500）；
var light2=新的三方向光（0xFFFFFF，1.0）；
灯2.位置设置（-500250，-200）；
场景。添加（环境光）；
场景。添加（灯光）；
场景。添加（light2）；
//材料
var bodyMaterial=新的三点网格材质（{颜色：0x279933，镜面反射：0x279933，光泽度：100}）；
body=new THREE.Object3D（）；
keyboardBase=new THREE.Object3D（）；
drawKeyboardBase（键盘底座，车身材料）
var dummy=new THREE.Object3D（）；
虚拟位置x=-100；
场景。添加（虚拟）；
场景.添加（键盘基座）；
//dummy.add（key1LeftFace）；
//主体。添加（键1右侧）；
//场景。添加（主体）；
//场景。添加（虚拟）；
}
功能绘图键盘底座（零件、材料）
{
变量几何=新的三个平面几何（400400,1,1）；
var基准面=新的三个网格（几何体、材质）；
基面.material.side=3.DoubleSide；
基准面旋转x=90*Math.PI/180；
部分。添加（基准面）；
}
函数init（）{
var canvasWidth=846；
var canvasHeight=494；
var画布比率=画布宽度/画布高度；
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=屏幕宽度/屏幕高度，近=0.1，远=20000；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.gammaInput=true；
renderer.gammaOutput=true；
渲染器.setSize（画布宽度、画布高度）；
setClearColor（0xAAAAAA，1.0）；
//摄像机
摄像机位置设置（0、100、1000）；
摄像机。注视（场景。位置）；
cameraControls=新的三个.OrbitControls（camera、renderer.DoElement）；
}
函数addToDOM（）{
var container=document.getElementById（'container'）；
var canvas=container.getElementsByTagName（'canvas'）；
如果（画布长度>0）{
container.removeChild（canvas[0]）；
}
container.appendChild（renderer.doElement）；
}
函数animate（）{
window.requestAnimationFrame（动画）；
render（）；
}
函数render（）{
var delta=clock.getDelta（）；
//这就是我记忆中的代码块，每次我改变形状，就会创建一个形状！
var squareGeometry=新的三个.Geometry（）；
squareGeometry.Vertexs.push（新的三个.Vector3（-200.0*Math.tan（Math.PI*（effectController.ky/180）/2）*2*Math.sin（Math.PI*（effectController.ky/180）/2），100，0.0）；
squareGeometry.Vertexs.push（新的三向量3（01000,0.0））；
squareGeometry.Vertexs.push（新的三个向量3（0，-100.0,0.0））；
squareGeometry.Vertexs.push（新的三个.Vector3（-200.0*Math.tan（Math.PI*（effectController.ky/180）/2）*2*Math.sin（Math.PI*（effectController.ky/180）/2），-100.0,0.0）；
正方形几何。面。推（新的三面3（1，2，3））；
正方形几何面推（新的三面3（3，1，0））；
var rightPlane=新的三网格（方形几何体，新的三网格材质（{颜色：0x6E23BB，镜面反射：0x6E23BB，光泽度：20}））；
rightPlane.material.side=3.DoubleSide；
右平面旋转x=90*Math.PI/180；
场景.添加（右平面）；
rightPlane.rotation.y=effectController.ky*Math.PI/180；
渲染器。渲染（场景、摄影机）；
}
函数setupGui（）{
效应控制器={
肯塔基州：-120.0
};
var gui=new dat.gui（）；
var h=gui.addFolder（“手臂角度”）；
h、 添加（effectController，“ky”、-120.0、-60.0、0.025）。名称（“平面角度”）；
}
试一试{
init（）；
fillScene（）；
addToDOM（）；
//setupGui（）；
制作动画（）；
}捕获（e）{
}
在fillscene函数中创建正方形几何体 然后，看起来需要将两个顶点的x坐标更改为某个值。在动画中执行此操作：
function animate() {
window.requestAnimationFrame(animate);
squareGeometry.vertices[0].x = whatever;
squareGeometry.vertices[3].x = whatever;
squareGeometry.verticesNeedUpdate = true; // ask for an update
render();
}
不需要改变面孔 在fillscene函数中创建正方形几何体 然后，看起来需要将两个顶点的x坐标更改为某个值。在动画中执行此操作：
function animate() {
window.requestAnimationFrame(animate);
squareGeometry.vertices[0].x = whatever;
squareGeometry.vertices[3].x = whatever;
squareGeometry.verticesNeedUpdate = true; // ask for an update
render();
}
不需要改变面孔 在fillscene函数中创建正方形几何体 然后，看起来需要将两个顶点的x坐标更改为某个值。在动画中执行此操作