Làm thế nào để kết hợp hai hình học hoặc mắt lưới bằng cách sử dụng ba.js r71?

Ở đây tôi gặp phải vấn đề này vì tôi cần hợp nhất hai hình học (hoặc mắt lưới) thành một hình. Sử dụng các phiên bản trước của ba.js có một chức năng tốt đẹp:Làm thế nào để kết hợp hai hình học hoặc mắt lưới bằng cách sử dụng ba.js r71?

THREE.GeometryUtils.merge(pendulum, ball);

Tuy nhiên, nó không còn trên phiên bản mới nữa.

Tôi cố gắng để kết hợp pendulum và ball với đoạn mã sau:

ball là một lưới.

var ballGeo = new THREE.SphereGeometry(24,35,35); 
var ballMat = new THREE.MeshPhongMaterial({color: 0xF7FE2E}); 
var ball = new THREE.Mesh(ballGeo, ballMat); 
ball.position.set(0,0,0); 

var pendulum = new THREE.CylinderGeometry(1, 1, 20, 16); 
ball.updateMatrix(); 
pendulum.merge(ball.geometry, ball.matrix); 
scene.add(pendulum);

Sau khi tất cả, tôi đã nhận lỗi sau:

THREE.Object3D.add: object not an instance of THREE.Object3D. THREE.CylinderGeometry {uuid: "688B0EB1-70F7-4C51-86DB-5B1B90A8A24C", name: "", type: "CylinderGeometry", vertices: Array[1332], colors: Array[0]…}THREE.error @ three_r71.js:35THREE.Object3D.add @ three_r71.js:7770(anonymous function) @ pendulum.js:20

Nguồn

2015-05-14 Darius Miliauskas

Cuối cùng, tôi tìm thấy một giải pháp khả thi. Tôi đăng bài vì nó có thể hữu ích cho người khác trong khi tôi lãng phí rất nhiều giờ. Điều khó khăn là về thao tác các khái niệm về mắt lưới và hình học:

var ballGeo = new THREE.SphereGeometry(10,35,35); 
var material = new THREE.MeshPhongMaterial({color: 0xF7FE2E}); 
var ball = new THREE.Mesh(ballGeo, material); 

var pendulumGeo = new THREE.CylinderGeometry(1, 1, 50, 16); 
ball.updateMatrix(); 
pendulumGeo.merge(ball.geometry, ball.matrix); 

var pendulum = new THREE.Mesh(pendulumGeo, material); 
scene.add(pendulum);

Nguồn

2015-05-14 19:54:23

_ "Không cần là không ai trong số những hành động của Tyler Crompton trong cuộc sống" _ - _Lady Galadriel_ Cám ơn này – LaughingMan

Để giải thích Darius' câu trả lời rõ ràng hơn (như tôi phải vật lộn với nó, trong khi cố gắng cập nhật một phiên bản của thành phố về thủ tục của ông Doob để làm việc với các Face3 hộp):

Về cơ bản bạn đang hợp nhất tất cả các Lưới của mình thành một Hình học đơn. Vì vậy, nếu bạn, ví dụ, muốn kết hợp một hộp và khối cầu:

var box = new THREE.BoxGeometry(1, 1, 1); 
var sphere = new THREE.SphereGeometry(.65, 32, 32);

... vào một hình duy nhất:

var singleGeometry = new THREE.Geometry();

... bạn sẽ tạo ra một Mesh cho mỗi hình học:

var boxMesh = new THREE.Mesh(box); 
var sphereMesh = new THREE.Mesh(sphere);

... sau đó gọi phương thức hợp nhất của hình học duy nhất cho mỗi, đi qua các hình học và ma trận của mỗi thành phương pháp:

boxMesh.updateMatrix(); // as needed 
singleGeometry.merge(boxMesh.geometry, boxMesh.matrix); 

sphereMesh.updateMatrix(); // as needed 
singleGeometry.merge(sphereMesh.geometry, sphereMesh.matrix);

Khi sáp nhập, tạo ra một lưới từ hình học duy nhất và thêm vào cảnh:

var material = new THREE.MeshPhongMaterial({color: 0xFF0000}); 
var mesh = new THREE.Mesh(singleGeometry, material); 
scene.add(mesh);

Một ví dụ làm việc:

<!DOCTYPE html> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script> 
 
<!-- OrbitControls.js is not versioned and may stop working with r77 --> 
 
<script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script> 
 

 
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'> 
 
    <script> 
 
    // init renderer 
 
    var renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    // init scene and camera 
 
    var scene = new THREE.Scene(); 
 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.01, 3000); 
 
    camera.position.z = 5; 
 
    var controls = new THREE.OrbitControls(camera) 
 
    \t 
 
    // our code 
 
    var box = new THREE.BoxGeometry(1, 1, 1); 
 
    var sphere = new THREE.SphereGeometry(.65, 32, 32); 
 

 
    var singleGeometry = new THREE.Geometry(); 
 

 
    var boxMesh = new THREE.Mesh(box); 
 
    var sphereMesh = new THREE.Mesh(sphere); 
 

 
    boxMesh.updateMatrix(); // as needed 
 
    singleGeometry.merge(boxMesh.geometry, boxMesh.matrix); 
 

 
    sphereMesh.updateMatrix(); // as needed 
 
    singleGeometry.merge(sphereMesh.geometry, sphereMesh.matrix); 
 

 
    var material = new THREE.MeshPhongMaterial({color: 0xFF0000}); 
 
    var mesh = new THREE.Mesh(singleGeometry, material); 
 
    scene.add(mesh); 
 

 
    // a light 
 
    var light = new THREE.HemisphereLight(0xfffff0, 0x101020, 1.25); 
 
    light.position.set(0.75, 1, 0.25); 
 
    scene.add(light); 
 
\t 
 
    // render 
 
    requestAnimationFrame(function animate(){ 
 
\t  requestAnimationFrame(animate); 
 
\t  renderer.render(scene, camera); \t \t 
 
    }) 
 
    </script> 
 
</body>

Ít nhất, đó là làm thế nào tôi đang giải thích mọi thứ; xin lỗi với bất cứ ai nếu tôi có điều gì đó sai, vì tôi không có nơi nào gần gũi với một chuyên gia ba.js (hiện đang học). Tôi chỉ có "may mắn" để thử tay tùy chỉnh mã thành phố thủ tục của Doob, khi phiên bản mới nhất phá vỡ mọi thứ (công cụ hợp nhất là một trong số đó, thực tế là ba.js không còn sử dụng quads cho cube -ahem nữa - hình học hộp khác - mà đã dẫn đến tất cả các loại thú vị nhận được bóng và như vậy để làm việc đúng một lần nữa).

Nguồn

2015-10-28 16:12:57

nhờ cho việc này. cập nhật một số mã tôi chỉ cần chuyển từ 500.000 cảnh báo đã được tìm kiếm khá khó khăn. Tôi không hài lòng về cách thức xử lý này, việc tìm ra câu trả lời là quá khó đối với một thứ mà tôi không thể kiểm soát được. – fluffybunny

Thông báo lỗi là đúng. CylinderGeometry không phải là một Object3D. Lưới là. Một lưới được xây dựng từ một hình học và một vật liệu. Một lưới có thể được thêm vào cảnh, trong khi một hình học không thể.

Trong các phiên bản mới nhất của ba.js, Hình học có hai phương thức hợp nhất: hợp nhất và hợp nhấtMesh.

merge nhận một đối số bắt buộc hình học, và hai đối số tùy chọn ma trận và materialIndexOffset.
geom. mergeMesh (lưới) về cơ bản là viết tắt của geom. hợp nhất (lưới. hình học, lưới. ma trận), như được sử dụng trong các câu trả lời khác. ('geom' và 'mesh' là các tên tùy ý cho một Hình học và một Lưới, tương ứng.) Vật liệu của Lưới bị bỏ qua.

Nguồn

2016-05-25 19:12:55

Làm thế nào để kết hợp hai hình học hoặc mắt lưới bằng cách sử dụng ba.js r71?

Trả lời

Các vấn đề liên quan