您可以使用 dat-gui 复制对象吗

编程问答 2022-05-27

问题描述

我还想知道您是否可以复制对象组并同时编辑所有副本的大小和形状。我正在尝试做的类似于这个 http://fhtr.org/BasicsOfThreeJS/#44 但是代码很旧并且three.js不再支持它了。我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    
    <script type="text/javascript" src="dat.gui.min.js"></script>

    <title>Chair Tutorial</title>
  
</head>

  <!-- The main three.js file -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js'></script>

<!-- This brings in the ability to load custom 3D objects in the .gltf file format. Blender allows the ability to export to this format out the Box -->
<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js'></script>

<!-- This is a simple to use extension for three.js that activates all the rotating,dragging and zooming controls we need for both mouse and touch,there isn't a clear CDN for this that I can find -->
<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
<script src = 'three.min.js'></script>

<script src='OBJLoader.js'></script>
<script src='MTLLoader.js' ></script>

<style>
body{
  margin: 0;
 height: 100vh;
}

canvas{
  display: block;
}

#c{
height: 0.1px;
}

</style>


<canvas id="c"></canvas>

  
<script>

  

//scene
var scene = new THREE.Scene();
//camrea
var camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,0.1,1000);
camera.position.z = 3.5;
//renderer
var renderer = new THREE.Webglrenderer();
 renderer.setSize(window.innerWidth,window.innerHeight);
 document.body.appendChild(renderer.domElement);
 renderer.setClearColor("#e5e5e5");

var jar = 2;
var jimmy;
  




var render = function(){
   requestAnimationFrame(render);
 
   renderer.render(scene,camera);
  }
 
 render();
 
 
  //create light
var light = new THREE.DirectionalLight(0xffffff,0.5);
light.position.setScalar(10);
scene.add(light);

//resize window
window.addEventListener('resize',()=> {
  renderer.setSize(window.innerWidth,window.innerHeight);
  camera.aspect = window.innerWidth /window.innerHeight
  
  camera.updateProjectionMatrix();
})


var materialmodel = new THREE.MeshphongMaterial({
  color: 0xff0000,specular: 0x222222,shininess: 75
});
var geometrymodel = new THREE.BoxBufferGeometry(3,1.5,1);


var funny = new THREE.BoxBufferGeometry(3,1)
var no = new THREE.MeshphongMaterial({
  color: 0xff00,shininess: 75
});
var kkk = new THREE.Mesh(funny,no);
scene.add(kkk);
//side 

kkk.position.z=0.5;
 kkk.scale.y = 0.49;
 kkk.position.y = 0.25;
 kkk.scale.x = 0.03;
kkk.scale.z = 0.1
 var but = new THREE.BoxBufferGeometry(0.5,.3,1);
 //bottom
 var jk = new THREE.Mesh(but,no);
 scene.add(jk);
 jk.rotation.z = 3.15;
 jk.position.x = 0.18;
 jk.scale.y = 0.25;
 jk.position.y = -0.1;
 jk.scale.x =0.9;
jk.position.z = 0.5;
jk.scale.z = 0.01; 

var ohok = new THREE.BoxBufferGeometry(0.09,0.01)
//side
var lol = new THREE.Mesh(ohok,no);
scene.add(lol);
lol.position.z = 0.5;
lol.position.y = 0.25;
lol.position.x = 0.355;
lol.scale.y = 0.5;
lol.scale.z = 0.01
var ohnono = new THREE.BoxBufferGeometry(0.5,1);
//top
var bus = new THREE.Mesh(ohnono,no);
scene.add(bus);
bus.position.y =0.6;
bus.position.x =0.18;
bus.scale.y =0.25;
bus.scale.x =0.9;
bus.scale.z = 0.01;
bus.position.z=0.5;
const group = new THREE.Group();
group.add(bus);
group.add(jk);
scene.add( group );

const food = new THREE.Group();
food.add(lol);
food.add(kkk);

var params = {
  modelcolor: "#ff0000",e: 1,f:1,woodcolor: "#ff0000",};

scene.add( food );
var gui = new dat.GUI();
var folder = gui.addFolder('Wall Color')
var wallpic = gui.addFolder('Wall Picture')
 var xdimen = wallpic.add(params,'e').min(0).max(10).step(0.1).name('Width');
var ydimen =  wallpic.add(params,'f').min(0).max(20).step(0.1).name('Length');
var colorchange = wallpic.addColor(params,'woodcolor').name('Color');

xdimen.onChange(function(jar){
  group.scale.x = jar;
 lol.position.x = jar/2.52;
 kkk.position.x = -jar/25.9;
 });

colorchange.onChange(function(){
no.color.set(params.woodcolor);
});

 ydimen.onChange(function(jar){
food.scale.y=jar;
bus.position.y = jar/1.6;
jk.position.y = -jar/8;
});
folder.addColor(params,'modelcolor')
  .name('Change Color')
  .onChange(function() {
    materialmodel.color.set(params.modelcolor);

  });

   folder.open();
 wallpic.open();

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene,camera);
}
</script>


</body>
</html>

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dat.guithree.js