Be-Maya-Modell mit Three.js
Ich bin nach diese tutorial auf, wie zu laden, Maya Modelle mit Three.js.
Alles in Ordnung ist, aber die Anleitung wird nur erklärt, wie Sie die Last Modelle mit einer textur.
Hier ist der source-code aus dem tutorial:
function createScene(geometry, x, y, z, scale, tmap) {
zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)}));
zmesh.position.set(x, y, z);
zmesh.scale.set(scale, scale, scale);
meshes.push(zmesh);
scene.add(zmesh);
}
Full JS Live-Link
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var camera, scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry, materials;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var meshes = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
camera.position.x = 400;
camera.position.y = 200;
camera.position.z = 400;
scene = new THREE.Scene();
//LIGHTS
var ambient = new THREE.AmbientLight(0x666666);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 70, 100).normalize();
scene.add(directionalLight);
//RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
container.appendChild(webglRenderer.domElement);
var loader = new THREE.JSONLoader(),
callbackKey = function (geometry, materials) {
createScene(geometry, materials, 0, 0, 0, 6);
};
loader.load("chameleon.js", callbackKey);
window.addEventListener('resize', onWindowResize, false);
}
function createScene(geometry, materials, x, y, z, scale) {
zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
zmesh.position.set(x, y, z);
zmesh.scale.set(scale, scale, scale);
meshes.push(zmesh);
scene.add(zmesh);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
for (var i = 0; i < meshes.length; i++) {
meshes[i].rotation.y += 0.01;
}
requestAnimationFrame(animate);
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
Aber mein Modell hat vier Texturen. Was sollte ich ändern, laden Sie alle?Live-Link
Du musst angemeldet sein, um einen Kommentar abzugeben.
es erscheint das tutorial Ihre folgenden ignoriert ist das Material, aus dem JSON-Modell-format und einfach vorbei an der geometrie und eine gerade text-Referenz zu einer einzelnen textur-Datei, etwa so:
Den JSONLoader nicht nur zieht in der geometrie, sondern alle Materialien, die in einem array. (siehe: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js Zeile 45) können Sie sich dann übergeben Sie dieses array an die MeshFaceMaterial(arrayOfMaterials) etwa so:
Dann in Ihrer Funktion createScene ändern Sie die erste Zeile zu sein:
Edit: das Hinzufügen von details über die Festsetzung Maya exportiert
Damit Ihr Modell geladen, aber schwarz. In diesem Fall das Problem ist in der Modell-Datei
chameleon.js
. Haben Sie einen Blick auf jedes material istcolorAmbient
undcolorDiffuse
Eigenschaft. Beachten Sie alle [0.0, 0.0, 0.0]. Dies ist ein bekanntes obj-export-bug in Maya. So haben Sie 3 Optionen, um es zu beheben.1) Öffnen Sie die
chameleon.js
- Datei und ändern allecolorAmbient
undcolorDiffuse
Linien, so etwas wie dieses (Sie brauchen, um spielen Sie mit den Werten, um es so Aussehen rechts)ODER
2) In Maya vor der Anwendung Ihrer diffuse-map, stellen Sie immer sicher, dass die Anwendung eines Standard-Farbwert ersten. Aus irgendeinem Grund einmal die Karte auf, können Sie nicht mehr auf die color-Eigenschaft und der Exporteur verwendet den Standardwert 0.
ODER
3) Nach dem Export aus Maya, die Sie ändern können Sie die OBJ-Datei ändern Sie die Zeilen aus:
Zu
Getestet hab ich dies hier zu Hause, und dein Modell sieht gut aus, lass mich wissen, wie es geht?