Cách vẽ các bề mặt bị cắt thành các đối tượng cứng

Question

Trong Three.js, tôi có một đối tượng 3D, nơi tôi đang sử dụng các mặt cắt cắt cục bộ để chỉ hiển thị một phần của đối tượng.

Tuy nhiên, vì đối tượng 3D là "rỗng" (nghĩa là chỉ bề mặt bên ngoài được hiển thị), khi chúng ta cắt bất kỳ thứ gì trên bề mặt đó, chúng ta có thể "nhìn vào" đối tượng. Dưới đây là ví dụ về ý tôi, clipping a corner off a cube. Lưu ý cách chúng tôi có thể thấy mặt sau ở góc đối diện.

Tôi muốn cung cấp cho sự xuất hiện của đối tượng được rắn. Dựa trên this issue, có vẻ như cách tốt nhất để thực hiện điều này là tạo ra một bề mặt trên vùng bị cắt bớt, do đó đóng nắp và làm cho đối tượng xuất hiện giống như nó không rỗng.

Câu hỏi của tôi là, làm cách nào để biết nơi để xây dựng bề mặt này? Three.js có cung cấp một cách để có được một danh sách các đỉnh giao nhau giữa một mặt phẳng và bất kỳ bề mặt tùy ý nào không? Nếu không, làm thế nào tôi có thể tiếp cận vấn đề này bản thân mình?

Tôi tìm thấy this question, nhưng tác giả không mô tả cách họ giải quyết vấn đề tôi đang gặp phải ở đây.

Answer 1

Bạn muốn hiển thị một bề mặt bị cắt bớt như thể nó là một vật rắn - nghĩa là không rỗng.

Bạn có thể đạt được hiệu ứng đó với MeshPhongMaterial - hoặc bất kỳ tài liệu ba.js nào cho vấn đề đó - với một hack đơn giản đến trình đổ bóng tài liệu.

Thay thế dòng này trong /src/renderers/shaders/ShaderLib/meshphong_frag.glsl:

gl_FragColor = vec4(outgoingLight, diffuseColor.a); 

với

if (gl_FrontFacing) { 

    gl_FragColor = vec4(outgoingLight, diffuseColor.a); 

} else { 

    gl_FragColor = diffuseColor; 

} 

này nên nhìn khá tốt. Nó sẽ yêu cầu material.side = THREE.DoubleSide;

three.js r.76

Answer 2

tôi đã thực hiện một lớp THREE.SectionHelper mà có thể là thú vị nếu bạn muốn thiết lập một loại vật liệu khác nhau/màu cho phần bên trong của lưới mà bạn đang cắt. Kiểm tra a demo in this fiddle.

var sectionHelper = new THREE.SectionHelper(mesh, 0xffffff); 
scene.add(sectionHelper);