向该对象的每一面添加不同的颜色

2024-03-27

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

我为模型几何中发现的每个面分配了不同的颜色,如下所示:

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

我已经在 faces 数组的索引 7 和 8 处识别了正面的面,并将它们变成红色。

问题是当我看包的内部时也可以看到这种颜色:

我意识到这是因为我已将对象设置为THREE.DoubleSide但如果我把它改成THREE.FrontSide那么侧面只能部分可见。

所以我的问题是如何为每一面(所有 11 面,也计算内部)分配不同的唯一颜色,而不使该颜色出现在相应的相反面?

我试图通过仅使用颜色而不是将图像映射到其上来使事情变得简单,这正是我最终想要实现的。

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

Thanks

EDIT

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

我在这里缺少什么?


我遵循唐关于不同材料的建议,但并不完全明白他的意思。

我检查了这个question https://stackoverflow.com/questions/16484835/different-material-on-back-and-frontside-of-extruded-shape其中详细设置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);
}

结果如下:

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

向该对象的每一面添加不同的颜色 的相关文章

  • THREE.BufferGeometry - 访问面索引和面法线

    在 BufferGeometry 中 有没有一种方法可以访问面索引和法线而不转换为几何图形 手头的几何体是由 Threejs 编辑器创建的 SphereBufferGeometry 我只需要读取面部索引和法线 而不需要修改它们 Buffer
  • 在 Three.js 中的 MeshPhongMaterial 或 MeshLambertMaterial 上投射阴影

    我觉得我在这里缺少一些简单的东西 I used JSFiddle 作者 WestLangley http jsfiddle net 4Txgp 234 它演示了如何将物体的阴影投射到平面上 当飞机只填充颜色时 一切都会按预期进行 var g
  • Three.js:可以翻转精灵吗?

    Question 是否可以翻转 镜像 Three js 精灵纹理 背景 使用 Three js 当前的 DEV 分支 迄今为止的调查结果 我首先尝试更改它的 3d 旋转 但没有任何效果 然后我检查了 sprites 代码 发现 Sprite
  • THREE.js 正交相机缩放到鼠标点

    我正在为我们的 THREE js 应用程序开发正交相机 本质上 该相机将以 2D 方式向用户呈现场景 用户可以选择在 2D 和 3D 相机之间切换 该相机将允许平移和缩放到鼠标点 我可以进行平移 也可以进行缩放 但不能缩放到鼠标点 这是我的
  • 在Three.js中,如何翻译Vector3?

    我创建了一个Vector3 called ori 我已经填充了它的坐标 x y 和 z 现在 我该如何平移该矢量 例如沿 z 轴 的指示值 我试过这个 ori translateZ 100 这给我一个错误 TypeError 无法读取未定义
  • 如何添加标签/标签以显示在多个对象的顶部,以便当用户单击对象时标签始终面向相机?

    本质上 我想说的是 我想创建一个出现在对象顶部 表面上的标签或标签 以便当用户单击对象时 即使对象旋转 标签也始终面向相机 我该如何去做呢 我被告知要使用正交相机 但我不确定如何 和 CSS 作为标签 请参阅上一篇文章 如何使我的文本标签始
  • 使用 OrbitControls 时锁定 x 轴旋转 - Three.js

    使用 OrbitControls 时锁定 x 轴旋转是否可行 目前我有一个挂在绳子上的圣诞星的对象模型 我希望它仅水平旋转 对于您的 OrbitControls 实例集 controls minPolarAngle Math PI 2 co
  • Three.js 在平面上旋转相机

    我的应用程序中有一个相机 camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 camera position z 1 cam
  • THREE.js 使用 DOMElements 的 SphereGeometry 全景热点

    我使用以下命令创建了一个简单的 WebGL 3D 全景应用程序SphereGeometry PerspectiveCamera and a CanvasTexture 现在 我希望通过在场景的某些部分添加 热点 来使场景栩栩如生Sphere
  • 如何将 3D 模型从 Cinema4D 导出到 Three.js?

    如果我有一个网格建模4D影院 我怎样才能将其导出three js http github com mrdoob three js3D JS 引擎 另外 导出材料也很方便colors for 多边形选择 为此 我刚刚为 Cinema4D 编写
  • 将几何图形转换为 BufferGeometry

    据我了解 Geometry 存储顶点和面的 javascript 对象结构 而 BufferGeometry 仅通过 Float32Arrays 等存储原始 gl 数据 有没有什么方法可以将标准 Geometry 转换为 BufferGeo
  • Three.js - 如何更新 arrowHelper?

    我正在尝试更新 arrowHelper 我尝试过操作箭头对象线中的顶点 设置所有内容dynamic true等等 但我似乎能做到的唯一方法就是删除旧线并绘制新线 有没有办法更新 arrowHelper 因此 您无法通过更改用于创建对象的值来
  • 星系模拟:更改点的颜色并在鼠标悬停时显示文本

    我正在尝试创建模拟 https riteshsingh github io galaxies 4673 个最近星系的位置 星系是点 我想为鼠标悬停时的点着色并加载星系的名称 我花了很多天试图实现它 我可以更改颜色以及进行基本的光线投射 但是
  • 深度图三.js

    Three js中有没有办法获取深度图 我感兴趣的是制作类似于 Kinect 为给定场景制作的东西 我遇到了一种不使用颜色和雾来模仿这一点的黑客方法 但这并不理想 因为它会使用两个不同的场景并且会因光照而变化 我认为执行此操作的另一种方法是
  • 重复凹凸贴图

    我正在尝试使用 Three js r55 将凹凸贴图应用到平面上 以创建一个模糊的感觉表面 这是我的代码 var mapHeight THREE ImageUtils loadTexture images felt png mapHeigh
  • 无法让 raycaster.intersectObjects() 从远处返回相交的对象

    我有一个包含几个随机数的散点图Sprite用作数据点的对象 我想检测鼠标指针 光标 和Sprite对象 我用来检测交叉点的设置如下 var projector new THREE Projector window addEventListe
  • 在 Three.js 中将贝塞尔曲线转换为平面道路

    我试图根据之前计算得到的一些贝塞尔曲线在 Three js 中绘制一条弯曲的道路 问题是我找不到转换曲线序列的方法 一条从上一条曲线的末尾开始 到一个曲面 我有一个 3D 场景 其中有一些汽车 一条用飞机创建的道路 并且绘制了即将到来的道路
  • ThreeJS bufferGeometry 位置属性在应用翻译时不会更新

    我使用 STLLoader 将 stl 加载到返回 BufferGeometry 的 ThreeJS 场景中 然后我用了 myMesh position set x y z myMesh rotation setFromQuaternion
  • 三.JS Shadow 到对象

    我想添加castShadow and receiveShadow在一个物体上 但是下面的代码有什么问题吗 var mtlLoader new THREE MTLLoader mtlLoader setPath objects Tree mt
  • 在 Three.js 中使用多种材质来合并几何体

    我想使用 2 个网格创建一棵松树 其中 1 个用于树干 另一个用于灌木 这就是我所做的 var pine geometry new THREE Geometry var pine texture 1 THREE ImageUtils loa

随机推荐