All geek questions in one place

Adding a different color to each side of this object

I recreated the bag model for my application and exported it to ThreeJs as .obj:

enter image description here

I assigned a different color to each face found in the geometry of the models, like this:

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

I determined the faces of the front side by indices 7 and 8 of the array of faces and turned them red.

The problem is that this color can be seen when I look inside the bag:

enter image description here

I understand that this is due to the fact that I installed the object in THREE.DoubleSide, but if I change it to THREE.FrontSide, then the sides will only be partially visible.

So my question is, how do I assign a different unique color to each side (all 11 of them, counting inside, too), without the color appearing on these sides, on the contrary?

, , , .

. , , , .

@WestLangley , , . , , :

(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);
	}
})();
body {
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

#canvas {
  margin: 10px auto;
  width: 800px;
  height: 350px;
  margin-top: -44px;
}
<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>
Hide result

?

+4
3

, , .

question, materialIndex. , , , geometry materials :

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

(frontMaterial, 0) .

, ( ) , , , Plane 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

ShaderMaterial , .

, . ShaderFrog, " " .

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

gl_FrontFacing . , true, , false . : " , = 1.0.

, .

0

You need to add geometry to the scene twice. With front material ( side: THREE.FrontSide) and rear material ( side: THREE.BackSide).

If you want custom colors beyond the top, you also need to duplicate the geometry. Please note: color attributes are part of the grid. In this case, the geometry is not only const coordinates of the vertices, normal vectors and texture coordinates. It also consists of color attributes.

var createMesh = function( src_geo, material, side ) {
    var geometry = new THREE.Geometry().fromBufferGeometry( src_geo );
    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);
    }
    material.side = side;
    var mesh = new THREE.Mesh(geometry, material);
    return mesh;
}

var plane_geo = new THREE.PlaneBufferGeometry( 3, 3, 1, 1 );
var material  = new THREE.MeshPhongMaterial({ vertexColors: THREE.FaceColors });
var meshF     = createMesh( plane_geo, material,         THREE.FrontSide );
var meshB     = createMesh( plane_geo, material.clone(), THREE.BackSide );

plane = new THREE.Object3D();
plane.add( meshF );
plane.add( meshB );

See code snippet:

(function onLoad() {
  var container, loader, camera, scene, renderer, controls, plane;
  
  init();
  animate();

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

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resize;
    
    var ambientLight = new THREE.AmbientLight(0x808080);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = 0.0;
    directionalLight.position.y = -2.0;
    directionalLight.position.z = 0.0;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
		  
    var createMesh = function( src_geo, material, side ) {
        var geometry = new THREE.Geometry().fromBufferGeometry( src_geo );
        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);
        }
        material.side = side;
        var mesh = new THREE.Mesh(geometry, material);
        return mesh;
    }

    var plane_geo  = new THREE.PlaneBufferGeometry( 3, 3, 1, 1 );
    var material = new THREE.MeshPhongMaterial({ vertexColors: THREE.FaceColors });
    var meshF = createMesh( plane_geo, material,         THREE.FrontSide );
    var meshB = createMesh( plane_geo, material.clone(), THREE.BackSide );
    
    plane = new THREE.Object3D();
    plane.add( meshF );
    plane.add( meshB );

    scene.add(plane);
  }

  function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    //controls.handleResize();
  }

  function animate() {
    plane.rotation.x += 0.01;
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();
<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<div id="container"></div>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1691951/

More articles:


All Articles