Я создаю сцену и использую логическую функцию, чтобы вырезать дыры в стене. Однако освещение показывает, что полученные формы испортили лица. Я хочу, чтобы поверхность выглядела как единое целое, а не фрагментировано и отражало свет в обратном направлении. Кто-нибудь знает, что может быть не так с моей геометрией?
Код, который логически определяет объекты, выглядит следующим образом:
//boolean subtract two shapes, convert meshes to bsps, subtract, then convert back to mesh
var booleanSubtract = function (Mesh1, Mesh2, material) {
//Mesh1 conversion
var mesh1BSP = new ThreeBSP( Mesh1 );
//Mesh2 conversion
var mesh2BSP = new ThreeBSP( Mesh2 );
var subtract_bsp = mesh1BSP.subtract( mesh2BSP );
var result = subtract_bsp.toMesh( material );
result.geometry.computeVertexNormals();
return result;
};
У меня в сцене два источника света:
var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
light.position.set( 0, 0, 1 );
scene.add( light );
//create a point light
var pointLight = new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
РЕДАКТИРОВАТЬ: Используя предложение ВестЛэнгли, я смог частично исправить рендеринг стены. И используя material.wireframe = true; Я вижу, что после булевой операции грани моих стен не объединяются. Есть ли способ их объединить?
1 ответ
Ваши проблемы связаны с двумя проблемами.
Во-первых, вы должны использовать FlatShading
.
Во-вторых, как описано в , это stackoverflow post , MeshLambert
материал только рассчитывает освещение в каждой вершине и интерполирует цвет по каждой грани. MeshPhongMaterial
вычисляет цвет в каждом текселе.
Вам нужно использовать MeshPhongMaterial
, чтобы избежать артефактов освещения, которые вы видите.
Three.js r.68
Похожие вопросы
Связанные вопросы
Новые вопросы
three.js
Three.js - это легкая кросс-браузерная библиотека JavaScript / API, используемая для создания и отображения трехмерной компьютерной графики в веб-браузере. Скрипты Three.js могут использоваться вместе с элементом HTML5 canvas, SVG или WebGL.
THREE.VerteNormalsHelper
, чтобы видеть нормали вершин. Я полагаю, чтоcomputeVertexNormals()
- это метод, который вам не следует использовать, поскольку он сглаживает общие нормали. Может быть, позвонитеcomputeFaceNormals()
и используйте вместо негоTHREE.FlatShading
. Убедитесь, что версии вашей библиотеки совместимы.material.wireframe = TRUE
.MeshLambertMaterial
? Если да, попробуйтеMeshPhongMaterial
.