为此obj

时间：2018-01-09 22:20:14

标签： three.js

我为我的应用程序重新创建了一个包模型，并将其作为.obj导出到ThreeJs中：

enter image description here

我为模型几何体中的每个面部分配了不同的颜色，如下所示：

var geometry = new THREE.Geometry().fromBufferGeometry( bagMesh.children[0].geometry );

for (var i = 0; i < geometry.faces.length; i ++ ) {
  var face = geometry.faces[i];
  // 7 & 8 = front side
  // can we flip its normal?
  if(i === 7 || i === 8) { 
    face.color.setHex( 0xff0000 );
  } else {
    face.color.setHex( Math.random() * 0xffffff );
  }
}
geometry.translate( 0, -1, 0.75);
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, side: THREE.DoubleSide }) );
scene.add(mesh);

我在面阵列的索引7和8处识别出正面的面并将它们变成红色。

问题是，当我看到包里面时，可以看到这种颜色：

enter image description here

我意识到这是因为我已将对象设置为THREE.DoubleSide，但如果我将其更改为THREE.FrontSide，那么这些边只会部分可见。

所以我的问题是如何为每一面分配不同的独特颜色（所有11个颜色，也计算内部颜色），而不会在相反的两侧出现颜色？

我试图通过仅使用颜色来保持简单，而不是将图像映射到其上，这是我最终想要达到的目的。

注意 - 我之前的模型通过将每一面视为单独的网格解决了这个问题，但这导致了其他问题，如z隐藏和闪烁问题。

由于

修改

@WestLangley我设置了一个小提琴来演示你在评论中添加的内容。假设我做对了它并没有产生预期的效果：

＆＃13;
＆＃13; 
(function onLoad() {
  var canvasElement;
  var width, height;
  var scene, camera;
  var renderer;
  var controls;

  var pivot;
  var bagMesh;
  var planeMesh;
  
  const objLoader = new THREE.OBJLoader2();
  const fileLoader = new THREE.FileLoader();
 
  init();

  function init() {
    container = document.getElementById('container');
    initScene();
    addGridHelper();
    addCamera();
    addLighting();
    addRenderer();
    addOrbitControls();

    loadPlaneObj();
    
    // Logic
		var update = function() {};

		// Draw scene
		var render = function() {
			renderer.render(scene, camera);
		};

		// Run game logic (update, render, repeat)
		var gameLoop = function() {
			requestAnimationFrame(gameLoop);
			update();
			render();
		};
		gameLoop();
  }

  /**** Basic Scene Setup ****/
  function initScene() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xd3d3d3);
    var axis = new THREE.AxesHelper();
    scene.add(axis);
  }

  function addCamera() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(3,3,3);
    scene.add(camera);
  }

  function addGridHelper() {
    var planeGeometry = new THREE.PlaneGeometry(2000, 2000);
    planeGeometry.rotateX(-Math.PI / 2);

    var planeMaterial = new THREE.ShadowMaterial({
      opacity: 0.2
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.position.y = -200;
    plane.receiveShadow = true;
    scene.add(plane);

    var helper = new THREE.GridHelper(2000, 100);
    helper.material.opacity = 0.25;
    helper.material.transparent = true;
    scene.add(helper);

    var axis = new THREE.AxesHelper();
    scene.add(axis);
  }

  // *********** Lighting settings **********************
  function addLighting() {
    var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);
    scene.add(light);
  }

  // ************** Material settings **************
  function setMaterial(materialName) {
    // get the object from the scene
    var bagMesh = scene.getObjectByName('bag');
    var material;

    if (!materialName) {
      materialName = materials.material;
    }

    if (bagMesh) {
      var colour = parseInt(materials.colour);
      switch (materialName) {
        case 'MeshBasicMaterial':
          material = new THREE.MeshBasicMaterial({
            color: colour
          });
          break;
        case 'MeshDepthMaterial':
          material = new THREE.MeshDepthMaterial();
          break;
        case 'MeshLambertMaterial':
          material = new THREE.MeshLambertMaterial({
            color: colour
          });
          break;
        case 'MeshNormalMaterial':
          material = new THREE.MeshNormalMaterial();
          break;
        case 'MeshPhongMaterial':
          material = new THREE.MeshPhongMaterial({
            color: colour
          });
          break;
        case 'MeshPhysicalMaterial':
          material = new THREE.MeshPhysicalMaterial({
            color: colour
          });
          break;
        case 'MeshStandardMaterial':
          material = new THREE.MeshStandardMaterial({
            color: colour
          });
          break;
        case 'MeshToonMaterial':
          material = new THREE.MeshToonMaterial({
            color: colour
          });
          break;
      }
      bagMesh.children.forEach(function(c) {
        c.material = material;
      });
    }
  }

  function setMaterialColour(colour) {
    materials.colour = colour;
    setMaterial(null);
  }
  // ************** End of materials ***************

  function addRenderer() {
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement);
  }

  function addOrbitControls() {
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
  }

  function addPivot() {
    var cubeGeo = new THREE.BoxBufferGeometry(5, 5, 5);
    var cubeMat = new THREE.MeshBasicMaterial();
    pivot = new THREE.Mesh(cubeGeo, cubeMat);
    bagMesh.position.x -= 15;
    bagMesh.position.z -= 55;

    pivot.add(bagMesh);
    pivot.add(handle);
    scene.add(pivot);
  }
  
  function loadPlaneObj() {
		loadObj('Plane', 'https://rawgit.com/Katana24/threejs-experimentation/master/models/Plane.obj', 'https://rawgit.com/Katana24/threejs-experimentation/master/models/Plane.mtl', addPlaneToSceneSOAnswer);
	}
  
  function loadObj(objName, objUrl, mtlUrl, onLoadFunc) {
		var onLoadMtl = function(materials) {
	    objLoader.setModelName(objName);
	    objLoader.setMaterials(materials);

	    fileLoader.setPath('');
	    fileLoader.setResponseType('arraybuffer');
	    fileLoader.load(objUrl,
	      function(onLoadContent) {
	        var mesh = objLoader.parse(onLoadContent);
	        onLoadFunc(mesh);
	      },
	      function(inProgress) {},
	      function(error) {
	        throw new Error('Couldnt load the model: ', error);
	      });
	  };
	  objLoader.loadMtl(mtlUrl, objName+'.mtl', onLoadMtl);
	}
  
  function addPlaneToSceneSOAnswer(mesh) {
		var frontMaterial = new THREE.MeshBasicMaterial( { color : 0xff0000, side: THREE.FrontSide } );
		var backMaterial 	= new THREE.MeshBasicMaterial( { color : 0x00ff00, side: THREE.BackSide } );
		
		var geometry = new THREE.Geometry().fromBufferGeometry( mesh.children[0].geometry );
		var length = geometry.faces.length;
		geometry.faces.splice(14, 1);

		for (var i = 0; i < geometry.faces.length; i ++ ) {
			var face = geometry.faces[i];
			face.color.setHex(Math.random() * 0xffffff);
		}
		mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, side: THREE.DoubleSide }) );
		mesh.material.side = THREE.FrontSide; 
		
		var mesh2 = new THREE.Mesh( geometry, mesh.material.clone() ); 
		mesh2.material.side = THREE.BackSide; 
		// mesh2.material.vertexColors = THREE.NoColors; 
		mesh2.material.vertexColors = [new THREE.Color(0xff0000), new THREE.Color(0x00ff00), new THREE.Color(0x0000ff)];

		mesh.add( mesh2 );
		scene.add(mesh);
	}
})();
＆＃13; 
body {
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#canvas {
  margin: 10px auto;
  width: 800px;
  height: 350px;
  margin-top: -44px;
}
＆＃13; 
<body>
  <div id="container"></div>
  <script src="https://threejs.org/build/three.js"></script>
  <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  <script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/LoaderSupport.js"></script>
  <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader2.js"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

我在这里缺少什么？

2 个答案:

答案 0 :(得分：1)

我跟着唐的关于不同材料的建议，但并不完全知道他的意思。

我检查了question详细设置了materialIndex。我调查了这意味着什么，当你将geometry和materials数组传递给这样的网格时，它意味着什么：

mesh = new THREE.Mesh( geometry, [frontMaterial, backMaterial, otherMaterial] );

然后该面将获得分配给它的材料（frontMaterial，因为它位于0位）。

回到我原来的问题，我决定简化（暂时），看看我是否可以将我想要的东西应用于从Blender导出的平面网格。

平面在添加到3JS时有两个面。我发现我可以翻转每个面部或为每个面部分配不同的材料，但我需要复制面部以实现此目的：

function addMeshTwoToScene() {
    var frontMaterial = new THREE.MeshBasicMaterial( { color : 0xff0000, side: THREE.FrontSide } );
    var backMaterial    = new THREE.MeshBasicMaterial( { color : 0x00ff00, side: THREE.BackSide } );
    var geometry = new THREE.Geometry().fromBufferGeometry( planeMesh.children[0].geometry );

    // Duplicates the face
    var length = geometry.faces.length;

    for (var i = 0; i < length; i++ ) {
      var face = geometry.faces[i];
      var newFace = Object.assign({}, face);
      geometry.faces.push(newFace);
    }

    for (var i = 0; i < geometry.faces.length; i ++ ) {
      var face = geometry.faces[i];
      if(i === 0 || i === 3) {
        face.materialIndex = 0;
      } else {
        face.materialIndex = 1;
      }
    }
    var mesh = new THREE.Mesh( geometry, [frontMaterial, backMaterial] );
    scene.add(mesh);
}

这导致以下结果：

top enter image description here

我不会将此标记为已接受的答案，因为我仍然需要将其应用于问题中更复杂的模型，而且我认为仍有更好的方法可以做到这一点，例如翻转特定顶点到其他值。

答案 1 :(得分：0)

One solution would be to use a ShaderMaterial and define the colors based on whether the face is front or back facing.

Let me walk you through this simple example

Hold left click to rotate the mesh. If you're not familiar with ShaderFrog, click "Edit Source" on the right and scroll down the bottom of the fragment shader.

if (!gl_FrontFacing) gl_FragColor = vec4(vec3(0.0, 0.0, 1.0) * brightness, 1.0);

gl_FrontFacing is a boolean. Quite self explanatory, it'll return true if a face is front, and false otherwise. The line reads "if the face is not front facing, render it blue at with alpha = 1.0.

Hoping that helps.

相关问题
最新问题