如何解决您可以使用 dat-gui 复制对象吗
我还想知道您是否可以复制对象组并同时编辑所有副本的大小和形状。我正在尝试做的类似于这个 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 举报,一经查实,本站将立刻删除。