Как сделать видимые края, которые пересекают поверхности других объектов? (THREE.js)

1

Я работаю в проекте three.js. В проекте я должен показать все ребра геометрии, даже эти ребра пересекаются с поверхностями других объектов.

Вот код фрагмента, который иллюстрирует мою проблему.

var camera, scene, renderer, material, stats, group, wireframeMaterial;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true,clearAlpha:0,clearColor: 0xff0000});
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();
		group=new THREE.Group()

    // Create material
    material = new THREE.MeshBasicMaterial();

		wireframeMaterial=new THREE.LineBasicMaterial( { color: 0x000000, side:THREE.FrontSide ,transparent:false,opacity:1,linewidth: 1 })

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var mesh1 = new THREE.Mesh(geometry, material);
    group.add(mesh1);
    
        
    var geometry2 = new THREE.BoxGeometry(100,100,100);
    var mesh2 = new THREE.Mesh(geometry2, material);
    group.add(mesh2);
    mesh2.position.fromArray([0,150,0])

    
    
    var edges = new THREE.EdgesGeometry( geometry );
    var line = new THREE.LineSegments( edges, wireframeMaterial );
    mesh1.add( line );


    var edges2 = new THREE.EdgesGeometry( geometry2 );
    var line2 = new THREE.LineSegments( edges2, wireframeMaterial );
    mesh2.add( line2 );


   		scene.add(group)

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);
}

function animate() {
    requestAnimationFrame(animate);
    group.rotation.x += 0.005;
    group.rotation.y += 0.01; 
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>

В коде скрипта вы видите два куба друг над другом. Я хочу, чтобы нижние края небольшого куба стали видимыми. Одно из решений делает прозрачный прозрачный сетчатый материал. Однако в этой ситуации края, которые находятся за кубами, тоже будут видны, что не допускается в проекте.

Так есть ли альтернативное решение для этой проблемы?

Теги:
three.js

1 ответ

1
Лучший ответ

Найденное хорошее решение, вам нужно использовать параметры polygonOffset основного материала.

var material = new THREE.MeshBasicMaterial({
  polygonOffset: true,
  polygonOffsetFactor: 1, // positive value pushes polygon further away
  polygonOffsetUnits: 1
});

Нашел это по этому вопросу: three.js EdgesHelper, показывающий определенные диагональные линии на модели Collada

EdgesGeometry будет отображать только жесткие края.

WireframeGeometry будет отображать все ребра.

var camera, scene, renderer, material, stats, group, wireframeMaterial;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({antialias: true, alpha:true,clearAlpha:0,clearColor: 0xff0000});
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();
    group=new THREE.Group()

    // Create materials
    var material = new THREE.MeshBasicMaterial({
      polygonOffset: true,
      polygonOffsetFactor: 1, // positive value pushes polygon further away
      polygonOffsetUnits: 1
    });
    var wireframeMaterial= new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } );

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    var edges = new THREE.EdgesGeometry(geometry);
    var line = new THREE.LineSegments( edges, wireframeMaterial );
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh, line);
    
     
    var geometry2 = new THREE.BoxGeometry(100,100,100);
    var wire = new THREE.EdgesGeometry(geometry2);
    var line2 = new THREE.LineSegments( wire, wireframeMaterial );
    var mesh2 = new THREE.Mesh(geometry2, material);
    line2.position.fromArray([0,150,0]);
    mesh2.position.fromArray([0,150,0]);
    group.add(mesh2, line2);
    
		scene.add(group)

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

    // Add stats to page.
    stats = new Stats();
    document.body.appendChild( stats.dom );
}

function animate() {
    requestAnimationFrame(animate);
    group.rotation.x += 0.005;
    group.rotation.y += 0.01; 
    renderer.render(scene, camera);
    stats.update();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
<script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
  • 0
    Я знаю. Но я не понял, как это связано с моей проблемой. Я хочу показать только жесткие края. Проблема в том, что когда линии пересекаются с поверхностями других объектов, они исчезают. Я хочу предотвратить это.
  • 1
    Теперь я вижу, что код был как-то не так. Это была более ранняя версия моего сценария. Я обновил это. Теперь вы можете понять мою проблему более четко.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню