0

このサイトでは、three.js を使用して Maya モデルをロードしています。このモデルには以下のテクスチャ写真があります

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

JSはこちら

 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 = [];

 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 += .01;
     }
     requestAnimationFrame(animate);
     render();
 }

 function render() {
     camera.lookAt(scene.position);
     webglRenderer.render(scene, camera);
 }
 $(document).ready(function () {
     init();
     animate();
 });

今、私は最初のテクスチャ画像を他のテクスチャに変更したいのですが、残りのテクスチャは実行時に同じままです! どうやってするの？

4

1 に答える 1

1

実行時にテクスチャを変更したい場合。zmesh オブジェクトのマテリアルを確認するだけです。青いドレス マテリアルの適切なインデックスを見つけて、それを交換します。あなたのモデルは、材料の配列があるという点で少しトリッキーですが、問題はありません。単一のマテリアル オブジェクトの場合は、 を変更しmesh.material.mapて更新するだけです。この場合、 が必要mesh.material.materials[index].mapです。したがって、これを関数の最後に追加してみてくださいcreateScene。ドレスを眼球のテクスチャに置き換えます。

zmesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'c006_10.jpg' );

もちろん、「c006_10.jpg」を眼球テクスチャへの適切なパスに置き換えます。onclickたとえば、テクスチャ スワップを接続する場合は、アクティブなレンダー ループを作成するか、レンダラーのレンダー関数を呼び出して表示する必要があることに注意してください。

于 2013-09-09T15:10:05.317 に答える