2015-05-14 13 views
19

Tutaj natknąłem się na problem, ponieważ muszę połączyć dwie geometrie (lub siatki) z jedną. Korzystanie z wcześniejszych wersji pliku three.js było niezłą funkcją:Jak scalić dwie geometrie lub siatki za pomocą pliku three.js r71?

THREE.GeometryUtils.merge(pendulum, ball); 

Jednak nie jest już w nowej wersji.

Próbowałem połączyć pendulum i ball z następującego kodu:

ball jest siatką.

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); 

Po tym wszystkim, mam następujący błąd:

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 

Odpowiedz

16

Wreszcie znalazłem możliwe rozwiązanie. Publikuję, ponieważ może to być przydatne dla kogoś innego, podczas gdy ja zmarnowałem wiele godzin. Najtrudniejszą rzeczą jest o manipulowanie koncepcji oczek i geometrii:

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); 
+4

_ „Nie trzeba było żadne czyny Tylera Crompton w życiu” _ - _Lady Galadriel_ Dzięki za to – LaughingMan

27

wyjaśnić odpowiedź Dariusza jaśniej (jak zmagał się z nim, starając się aktualizować wersję miasta procesowego pana Dooba do pracy z Face3 pudełka):

Zasadniczo łączysz wszystkie swoje siatki w jedną geometrię. Tak więc, jeśli na przykład chcesz połączyć pudełko i sfery:

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

... w jednej geometrii:

var singleGeometry = new THREE.Geometry(); 

... byś tworzenia siatki dla każdej geometrii:

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

... następnie wywołać sposób scalania jednym dla każdej geometrii, przechodząc geometrię i macierzy każdy w sposób:

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

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

Raz połączone, tworzyć siatkę z jednolitego geometrii i dodać do sceny:

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

przykład roboczych:

<!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>

Przynajmniej tak jak ja interpretuję rzeczy; przepraszam każdego, jeśli coś jest nie tak, ponieważ nie jestem tak blisko bycia ekspertem 3j.jpg (obecnie uczę się). Po prostu miałem "pecha", by spróbować swoich sił w dostosowywaniu proceduralnego kodu miasta Mr. Dooba, kiedy najnowsza wersja rozbija rzeczy (w tym fuzja jest jednym z nich, fakt, że three.js nie używa już quadów na kostkę -hem - geometria pudła - druga, co doprowadziło do wszelkiego rodzaju przyjemności z cieniowania i do tego, aby znowu działały poprawnie).

+0

dzięki za to. aktualizacja kodu, który właśnie przeniesiono z 500 000 ostrzeżeń, wyglądała na dość zniechęcającą. Nie jestem zachwycony sposobem, w jaki to się stało, znalezienie odpowiedzi było zbyt trudne dla czegoś, nad czym nie mam kontroli. – fluffybunny

3

Komunikat o błędzie jest prawidłowy. CylinderGeometry nie jest Object3D. Siatka jest. Siatka zbudowana jest z geometrii i materiału. Siatkę można dodać do sceny, a geometria nie.

W najnowszych wersjach trzech.js, Geometria ma dwie metody scalania: scalenie i mergeMesh.

  • seryjnej wykonuje argumenty wymagane geometrii oraz dwa opcjonalne argumenty matrycy i materialIndexOffset.
  • geom. mergeMesh (mesh) jest w zasadzie skrótem dla geom. Scalenie (siatka geometria, siatka macierz), jak używane w innych odpowiedziach. ('Geom' i 'mesh' są dowolnymi nazwami odpowiednio dla Geometrii i Siatki.) Materiał Siatki jest ignorowany.