Каркас Json форматированной геометрии в Three.js

Question

Каркас Json форматированной геометрии в Three.js

1

Я хотел бы отобразить каркас параллелепипеда, определенный вершинами в формате Json, используя следующий код Three.js

var testCube ={
                "metadata":{
                "version":json['version'],
                "type":json['type'],
                "uvs":json['n_uvs'],
                "normals":json['n_normals'],
                "faces":json['n_faces'],
                "generator":"io_three",
                "vertices":json['n_vertices'],
                                            },
                "faces":json['faces'],
                "vertices":json['vertices'],
                "normals":json['normals'],
                "uvs":[],
                "name":json['name']}

var loader = new THREE.JSONLoader();

var model = loader.parse( testCube );

meshBox = new THREE.Mesh( model.geometry, model.materials[ 0 ] );

var geo = new THREE.EdgesGeometry( meshBox.geometry );

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 });

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

однако вышеприведенный код создает такой вид визуализации:

в то время как я хотел бы создать визуализацию, где также видна внутренняя каркасная каркаса:

Вопрос: знаете ли вы, как я могу изменить вышеупомянутый код Three.js, чтобы создать полный каркас, как показано на втором снимке?

Upadate: используя функцию WireframeGeometry вы имеете следующий график:

Диагонали появляются на каждой грани сетки. Знаете ли вы функцию, которая не создает диагонали?

Большое спасибо за Вашу помощь!

Sim81 04 нояб. 2017, в 15:18

Источник

2

Зависит от того, что вы хотите в результате. Как вариант, если вы знаете размер блока и количество сегментов, вы можете построить 6 сеток THREE.LineSegments() (по одной на каждой стороне блока).
prisoner849 04 нояб. 2017, в 14:59
0

Привет, спасибо за ваш ответ, я хотел бы показать также внутренний каркас. Другими словами, при удалении твердой поверхности внутренние сегменты видны. Благодарю.
Sim81 04 нояб. 2017, в 15:57
2

Попробуйте заменить EdgesGeometry на WireframeGeometry .
WestLangley 04 нояб. 2017, в 18:14
0

Привет WestLangley, спасибо за вашу помощь. WireframeGeometry улучшает сюжет, как вы можете видеть в отредактированном посте. Однако в каждой ячейке есть диагонали, которых не должно быть, чтобы получить результат, отображаемый на втором изображении поста. Есть ли другая функция, которую можно использовать для отображения графика на втором рисунке? Большое спасибо!
Sim81 08 нояб. 2017, в 17:59
3

Извините но нет. Вам придется написать этот код самостоятельно ... Кроме того, используйте @username, иначе пользователи могут не получать уведомления.
WestLangley 08 нояб. 2017, в 21:14
1

@ Sim81 Вы можете создать 3 геометрии для 3 сторон и разделить их между парами THREE.LineSegments() , которые будут принадлежать противоположным сторонам. В качестве основы вы можете использовать исходный код THREE.GridHelper() с некоторыми изменениями. Но опять же, это зависит от того, что вы хотите в результате.
prisoner849 10 нояб. 2017, в 19:56
0

Привет @ тюрьма849 спасибо за ваш ответ. Это кажется полезным направлением. Если вы можете разместить его в поле для ответа, я могу дать вам бонусные баллы. Спасибо!
Sim81 13 нояб. 2017, в 22:04

Показать ещё 5 комментариев

Теги:

javascript

json

three.js

wireframe

1 ответ

Ещё вопросы

Зависит от того, что вы хотите в результате. Как вариант, если вы знаете размер блока и количество сегментов, вы можете построить 6 сеток THREE.LineSegments() (по одной на каждой стороне блока).
Привет, спасибо за ваш ответ, я хотел бы показать также внутренний каркас. Другими словами, при удалении твердой поверхности внутренние сегменты видны. Благодарю.
Попробуйте заменить EdgesGeometry на WireframeGeometry .
Привет WestLangley, спасибо за вашу помощь. WireframeGeometry улучшает сюжет, как вы можете видеть в отредактированном посте. Однако в каждой ячейке есть диагонали, которых не должно быть, чтобы получить результат, отображаемый на втором изображении поста. Есть ли другая функция, которую можно использовать для отображения графика на втором рисунке? Большое спасибо!
Извините но нет. Вам придется написать этот код самостоятельно ... Кроме того, используйте @username, иначе пользователи могут не получать уведомления.
@ Sim81 Вы можете создать 3 геометрии для 3 сторон и разделить их между парами THREE.LineSegments() , которые будут принадлежать противоположным сторонам. В качестве основы вы можете использовать исходный код THREE.GridHelper() с некоторыми изменениями. Но опять же, это зависит от того, что вы хотите в результате.
Привет @ тюрьма849 спасибо за ваш ответ. Это кажется полезным направлением. Если вы можете разместить его в поле для ответа, я могу дать вам бонусные баллы. Спасибо!

prisoner849 · Answer 1 · 2017-11-14T05-22-00.000Z

Решение является грубым и несовершенным, и это огромное поле для улучшения и оптимизации.

Вы создаете одну геометрию и делитесь ею между двумя экземплярами THREE.LineSegments() для противоположных сторон окна.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-15, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, .5));
var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);

var box = new THREE.Mesh(new THREE.BoxGeometry(10, 5, 5, 5, 5, 5), new THREE.MeshLambertMaterial({color:"gray"}));
scene.add(box);

var material = new THREE.LineBasicMaterial({
  vertexColors: THREE.VertexColors
});
var params = box.geometry.parameters;
var geometryGridXY = Grid(params.width, params.height, params.widthSegments, params.heightSegments, "yellow");
var gridXYFront = new THREE.LineSegments(geometryGridXY, material);
gridXYFront.position.z = params.depth / 2 + 0.001;
box.add(gridXYFront);
var gridXYBack = new THREE.LineSegments(geometryGridXY, material);
gridXYBack.position.z = -params.depth / 2 - 0.001;
box.add(gridXYBack);

var geometryGridYZ = Grid(params.height, params.depth, params.heightSegments, params.depthSegments, "aqua");
var gridYZLeft = new THREE.LineSegments(geometryGridYZ, material);
gridYZLeft.position.x = -params.width / 2 - 0.001;
gridYZLeft.rotation.y = -Math.PI * .5;
box.add(gridYZLeft);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);

}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  
  function Grid(width, height, widthSegments, heightSegments, color) {

    width = width || 1;
    height = height || 1;
    widthSegments = widthSegments || 1;
    heightSegments = heightSegments || 1;
    color = new THREE.Color(color !== undefined ? color : 0x444444);

    var stepWidth = width / widthSegments;
    var stepHeight = height / heightSegments;
    var halfWidth = width / 2;
    var halfHeight = height / 2;

    var vertices = [],
      colors = [], j = 0;

    for (let i = 0, k = -halfHeight; i <= heightSegments; i++, k += stepHeight) {

      vertices.push(-halfWidth, k, 0, halfWidth, k, 0);

      color.toArray(colors, j); j += 3;
      color.toArray(colors, j); j += 3;
    }

    for (let i = 0, k = -halfWidth; i <= widthSegments; i++, k += stepWidth) {

      vertices.push(k, halfHeight, 0, k, -halfHeight, 0);

      color.toArray(colors, j); j += 3;
      color.toArray(colors, j); j += 3;
    }

    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

    return geometry;

  }

</script>

Спасибо мужчина, я буду работать над этим. Я думаю, что дал вам награду.