Три js: объединить несколько объектов в один - PullRequest
Новая
       11

Три js: объединить несколько объектов в один

0 голосов
/ 28 ноября 2018

Я новичок в three.js и создаю собственную фигуру, используя несколько объектов.Но проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю все объекты на сцену, она работает нормально.

, но всякий раз, когда я объединяю все объектыв одной геометрии, а затем добавить к сцене, это становится так.см. изображение

не знаю, почему становится темнее, но нижняя и задняя часть выглядят хорошо.

Код, который я использовал, показан ниже 

var loader = new THREE.TextureLoader();
if(globalTextureImage != null)
{
    var texture = loader.load( globalTextureImage );
}
else
{                       
    var texture = loader.load( 'my_texture/1.jpg' );
}  

var topGeometry = new THREE.CubeGeometry( 175, 0, 40, 0, 0, 0 );
var top = new THREE.Mesh( topGeometry, new THREE.MeshBasicMaterial({map:texture}) );
top.position.x = -0.01;
top.position.y = 0.99;
top.position.z = -0.003;
top.scale.x = 0.0198;
top.scale.y = -0.008;
top.scale.z = 0.0355;
top.updateMatrix();

var bottomGeometry = new THREE.CubeGeometry( 175, 0, 40, 1, 1, 1);
var bottom = new THREE.Mesh( bottomGeometry, new THREE.MeshBasicMaterial({map:texture}) );
bottom.position.x = -0.01;
bottom.position.y = -0.01;
bottom.position.z = -0.003;
bottom.scale.x = 0.0198;
bottom.scale.y = -0.008;
bottom.scale.z = 0.0355;
bottom.updateMatrix();

var leftGeometry = new THREE.CubeGeometry( 1, 100, 40, 1, 1, 1 );
var left = new THREE.Mesh( leftGeometry, new THREE.MeshBasicMaterial({map:texture}) );
left.position.x = -1.74;
left.position.y = 0.49;
left.position.z = -0.003;
left.scale.x = 0.01;
left.scale.y = -0.01;
left.scale.z = 0.035;
left.updateMatrix();

var rightGeometry = new THREE.CubeGeometry( 0, 100, 40, 1, 1, 1 );
var right = new THREE.Mesh( rightGeometry, new THREE.MeshBasicMaterial({map:texture}) );
right.position.x = 1.719;
right.position.y = 0.49;
right.position.z = -0.003;
right.scale.x = 0.01;
right.scale.y = -0.01;
right.scale.z = 0.035;
right.updateMatrix();


var middleGeometry = new THREE.CubeGeometry( 346, 100, 0, 1, 1, 1 );
var middle = new THREE.Mesh( middleGeometry, new THREE.MeshBasicMaterial({map:texture}) );
middle.position.x = -0.01;
middle.position.y = 0.49;
middle.position.z = 0.69;
middle.scale.x = 0.01;
middle.scale.y = -0.01;
middle.scale.z = 0.035;
middle.updateMatrix();

var backGeometry = new THREE.CubeGeometry( 345, 100, 0, 1, 1, 1 );
var back = new THREE.Mesh( backGeometry, new THREE.MeshBasicMaterial({map:texture}) );
back.position.x = -0.02;
back.position.y = 0.49;
back.position.z = -0.69;
back.scale.x = 0.01;
back.scale.y = -0.01;
back.scale.z = 0.035;
back.updateMatrix();

var geometry = new THREE.CylinderGeometry( 1, 1, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var cylinder = new THREE.Mesh( geometry, material );
cylinder.scale.set(0.02,0.02, 0.02);
cylinder.position.x = -0;
cylinder.position.y = 0.45;
cylinder.position.z = 0.82;

cylinder.rotation.x = 1.86;
cylinder.rotation.y = 3.14;
cylinder.rotation.z = 1.56;

cylinder.updateMatrix();

var geometry = new THREE.CylinderGeometry( 1, 1, 8, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); 
var cylinderleft = new THREE.Mesh( geometry, material );
cylinderleft.scale.set(0.02,0.02, 0.02);
cylinderleft.position.x = -0.18;
cylinderleft.position.y = 0.45;
cylinderleft.position.z = 0.74;
cylinderleft.rotation.x = 1.6;
cylinderleft.updateMatrix();

var geometry = new THREE.CylinderGeometry( 1, 1, 8, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var cylinderRight = new THREE.Mesh( geometry, material );
cylinderRight.scale.set(0.02,0.02, 0.02);
cylinderRight.position.x = 0.18;
cylinderRight.position.y = 0.45;
cylinderRight.position.z = 0.74;
cylinderRight.rotation.x = 1.6;
cylinderRight.updateMatrix();

// scene.add( cylinder );
// scene.add( cylinderleft );
// scene.add( cylinderRight );
// scene.add(top);
// scene.add(bottom);
// scene.add(left);
// scene.add(right);
// scene.add(middle);
// scene.add(back);

var singleGeometry = new THREE.Geometry();
singleGeometry.merge(top.geometry, top.matrix);
singleGeometry.merge(bottom.geometry, bottom.matrix);
singleGeometry.merge(left.geometry, left.matrix);
singleGeometry.merge(right.geometry, right.matrix);
singleGeometry.merge(middle.geometry, middle.matrix);
singleGeometry.merge(back.geometry, back.matrix);

singleGeometry.merge(cylinder.geometry, cylinder.matrix);
singleGeometry.merge(cylinderleft.geometry, cylinderleft.matrix);
singleGeometry.merge(cylinderRight.geometry, cylinderRight.matrix);

var material = new THREE.MeshLambertMaterial({map:texture});
var mesh = new THREE.Mesh(singleGeometry, material);

mesh.scale.set(0.5,0.5,0.5);
objects.push(mesh);
scene.add(mesh);

Любая помощь будет очень признательна

1 Ответ

0 голосов
/ 28 ноября 2018

Когда вы рисуете объект отдельно, вы создаете THREE.Mesh для каждого объекта, каждый с THREE.MeshBasicMaterial.Поведение THREE.MeshBasicMaterial, при котором объект появляется с яркостью с каждой стороны, независимо от освещения сцены.

Но когда вы merge объект, вы используете THREE.MeshLambertMaterial для THREE.Geometry.Это приводит к тому, что яркость объекта зависит от освещения сцены.Части объекта, которые обращены к свету, выглядят яркими.Области, удаленные от света, темные.

Если бы вы также использовали THREE.MeshBasicMaterial для объединенной геометрии, то внешний вид был бы таким же, как и при рисовании всех объектов по отдельности.

...