如何使用 dat.GUI 更改几何颜色? [英] How to change geometry color with dat.GUI?
本文介绍了如何使用 dat.GUI 更改几何颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码来渲染一个简单的立方体.它有 dat.GUI 控件来更改旋转,我还想添加一个颜色转换器.最终,我想要一个更复杂的几何体,并希望能够改变多个元素的颜色.
I have the following code to render a simple cube. It has dat.GUI controls to change rotation, and I want to add a color changer also. Eventually, I want to have a more complex geometry and want to be able to change the color of more than one element.
$(function(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var axis = new THREE.AxisHelper(10);
scene.add (axis);
var grid = new THREE.GridHelper(50, 5);
var color = new THREE.Color("rgb(255,0,0)");
grid.setColors(color, 0x000000);
scene.add(grid);
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x80ff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
var planeGeometry = new THREE.PlaneGeometry(30,30,30);
var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -.5*Math.PI;
plane.receiveShadow = true;
scene.add(plane);
cube.position.x += 0.001;
cube.position.y = 2.5;
cube.position.z = 2.5;
scene.add(cube);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow = true;
spotLight.position.set (15,30,50);
scene.add(spotLight);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
var guiControls = new function(){
this.rotationX = 0.001;
this.rotationY = 0.001;
this.rotationZ = 0.001;
}
var datGUI = new dat.GUI();
datGUI .add(guiControls, 'rotationX', -30*Math.PI/180, 30*Math.PI/180);
datGUI .add(guiControls, 'rotationY', -30*Math.PI/180, 30*Math.PI/180);
datGUI .add(guiControls, 'rotationZ', -30*Math.PI/180, 30*Math.PI/180);
render();
function render() {
cube.rotation.x = guiControls.rotationX;
cube.rotation.y = guiControls.rotationY;
cube.rotation.z = guiControls.rotationZ;
requestAnimationFrame(render);
renderer.render(scene,camera);
}
$("#webGL-container").append(renderer.domElement);
renderer.render(scene,camera);
});
我已经能够添加一个 gui 来改变颜色,但我不知道如何将 gui 绑定到立方体颜色.
I have been able to add a gui to change color, but I cannot figure out how to bind the gui to the cube color.
var gui = new dat.GUI();
var folder = gui.addFolder('folder');
var params = {};
params.color = [255, 0, 255];
folder.addColor(params, 'color');
推荐答案
您可以使用 dat.GUI 通过使用以下图案来更改立方体的颜色:
You can use dat.GUI to change the color of your cube by using a pattern like this one:
var params = {
color: 0xff00ff
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'MATERIAL' );
folder.addColor( params, 'color' )
.onChange( function() { cube.material.color.set( params.color ); } );
folder.open();
three.js r.92
three.js r.92
这篇关于如何使用 dat.GUI 更改几何颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文