使用 gui.dat 更改 three.js 网格的颜色
Change color of three.js mesh using gui.dat
我有一个从 STL 文件加载的 three.js 网格:
var loader = new THREE.STLLoader();
var materialmodel = new THREE.MeshPhongMaterial(
{
color: 0xFF0000,
specular: 0x222222,
shininess: 75
}
);
function model()
{
loader.load( 'models/stl/binary/model.stl', function ( geometry ) {
var meshMaterial = materialmodel;
var model = new THREE.Mesh( geometry, meshMaterial );
model.scale.set( 0.02, 0.02, 0.02 );
model.castShadow = true;
model.receiveShadow = true;
model.geometry.center();
scene.add(model);
render();
} );
}
model();
当我在页面中调用模型函数时,模型按预期呈现。
我想将 dat.gui
用作动态更改的轻量级界面。
我的第一个实验是改变模型的颜色。
我使用的代码是这样的:
var params = {
modelcolor: 0xff0000, //RED
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'Model Colour' );
folder.addColor( params, 'modelcolor' )
.name('Model Color')
.listen()
.onChange( function() { materialmodel.MeshPhongMaterial.color.set( params.modelcolor); } );
folder.open();
DAT.GUIs 颜色选择器显示正常,我可以从选择器中 select 一种颜色,然后将显示新的十六进制值。
但是,model/mesh 本身不会更新为新的 selected 颜色。
我想知道这是否与我改变颜色的方式有关 materialmodel.MeshPhongMaterial.color.set( params.modelcolor);
(我尝试了不同的方法,但没有成功)。
我看到 post (答案之一),他们在示例中使用 model.material.color.set(params.color)
来执行此操作。我的 material 属性是使用 THREE.MeshPhongMaterial.....
在变量中定义的
假设这是我出错的地方,我怎样才能像这样动态更改埋在变量中的嵌套属性的颜色?
我不明白你为什么使用 .listen()
,可能是有某种原因。
在 .onUpdate
函数中,您使用 materialmodel
,它本身就是 material,然后您设置 .MeshPhongMaterial
属性 '存在。看来你只是忽略了它。
这是一个工作示例:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var materialmodel = new THREE.MeshPhongMaterial({
color: 0xFF0000,
specular: 0x222222,
shininess: 75
});
var geometrymodel = new THREE.SphereBufferGeometry(5, 32, 16);
var model = new THREE.Mesh(geometrymodel, materialmodel);
scene.add(model);
var params = {
modelcolor: "#ff0000"
};
var gui = new dat.GUI();
var folder = gui.addFolder('Model Colour');
folder.addColor(params, 'modelcolor')
.name('Model Color')
.onChange(function() {
materialmodel.color.set(params.modelcolor);
});
folder.open();
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
我有一个从 STL 文件加载的 three.js 网格:
var loader = new THREE.STLLoader();
var materialmodel = new THREE.MeshPhongMaterial(
{
color: 0xFF0000,
specular: 0x222222,
shininess: 75
}
);
function model()
{
loader.load( 'models/stl/binary/model.stl', function ( geometry ) {
var meshMaterial = materialmodel;
var model = new THREE.Mesh( geometry, meshMaterial );
model.scale.set( 0.02, 0.02, 0.02 );
model.castShadow = true;
model.receiveShadow = true;
model.geometry.center();
scene.add(model);
render();
} );
}
model();
当我在页面中调用模型函数时,模型按预期呈现。
我想将 dat.gui
用作动态更改的轻量级界面。
我的第一个实验是改变模型的颜色。
我使用的代码是这样的:
var params = {
modelcolor: 0xff0000, //RED
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'Model Colour' );
folder.addColor( params, 'modelcolor' )
.name('Model Color')
.listen()
.onChange( function() { materialmodel.MeshPhongMaterial.color.set( params.modelcolor); } );
folder.open();
DAT.GUIs 颜色选择器显示正常,我可以从选择器中 select 一种颜色,然后将显示新的十六进制值。
但是,model/mesh 本身不会更新为新的 selected 颜色。
我想知道这是否与我改变颜色的方式有关 materialmodel.MeshPhongMaterial.color.set( params.modelcolor);
(我尝试了不同的方法,但没有成功)。
我看到 post model.material.color.set(params.color)
来执行此操作。我的 material 属性是使用 THREE.MeshPhongMaterial.....
假设这是我出错的地方,我怎样才能像这样动态更改埋在变量中的嵌套属性的颜色?
我不明白你为什么使用 .listen()
,可能是有某种原因。
在 .onUpdate
函数中,您使用 materialmodel
,它本身就是 material,然后您设置 .MeshPhongMaterial
属性 '存在。看来你只是忽略了它。
这是一个工作示例:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
var materialmodel = new THREE.MeshPhongMaterial({
color: 0xFF0000,
specular: 0x222222,
shininess: 75
});
var geometrymodel = new THREE.SphereBufferGeometry(5, 32, 16);
var model = new THREE.Mesh(geometrymodel, materialmodel);
scene.add(model);
var params = {
modelcolor: "#ff0000"
};
var gui = new dat.GUI();
var folder = gui.addFolder('Model Colour');
folder.addColor(params, 'modelcolor')
.name('Model Color')
.onChange(function() {
materialmodel.color.set(params.modelcolor);
});
folder.open();
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>