三.js:物体光&置换贴图 [英] Three.js: object light & displacementMap

问题描述

我正在尝试制作一个像这样逼真的银戒指:

有不同的颜色和大小.

这是我此时的结果:

正如你所看到的，我的戒指不光滑.不知道是模型的问题，还是代码的问题:

有我的模型(我使用了 2 个模型，一个用于浅银色，另一个用于深色)

• light:

  现在，我还有一个问题.有没有办法挤压文本和其他元素?我只有中央部分的一个png元素.

  谢谢

  现在我正在用置换贴图做一些实验.这是此时的结果:

  现在的问题是:由于大量细分的网格导致浏览器冻结.这是我的代码的一部分:

  var external = new THREE.CylinderBufferGeometry( 3.48, 3.48, 4, 800, 400, true, -1.19, 5.54 );var 材料 = [];var baseMaterial = new THREE.MeshPhongMaterial({颜色:0x222222});材料推(baseMaterial)；var textureMaterial = new THREE.MeshPhongMaterial({map: image,//带有文字和符号的PNG透明:真实，不透明度:1，反射率:0.5，颜色:0xc0c0c0，发射:0x111111，高光:0xffffff，光泽度:34，置换贴图:图像，//与贴图相同位移比例:0.15，位移偏差:0});材料.推(纹理材料)；var externalObj = THREE.SceneUtils.createMultiMaterialObject(external, materials);

  我认为问题在于圆柱体的 800x400 段，它生成了一个具有 320000 个面"的网格.有没有办法优化性能并保持这种详细程度?

  再次感谢.

  附言也许我必须提出一个新问题?

  解决方案

  回答您的新问题:您也可以将 png 用作置换贴图.看看官方的例子:https://threejs.org/examples/webgl_materials_displacementmap.html但是您可能需要大量细分您的中心部分"以进行置换.

  也许在你的情况下，你的 png 作为凹凸贴图就足够了，那么你可以看看这个例子:https://threejs.org/examples/webgl_materials_bumpmap.html

  I'm trying to make a realistic silver ring like this:

  with different colors and size.

  This is my result at this moment:

  As you can see my ring is not smooth. I don't know if it's a problem of the model, or of the code:

  There are my models ( i'm using 2 model, one for the light silver and another for the dark one )

  • light: http://www.websuvius.it/atma/myring/assets/3d/anello-1/interno.obj
  • dark: http://www.websuvius.it/atma/myring/assets/3d/anello-1/esterno.obj

  This is part of my code:

  ...
  
  scene = new THREE.Scene();
  
  camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight, 0.1, 20000 );
  scene.add(camera);
  camera.position.set( 0, 150, 400 );
  camera.lookAt(scene.position);
  
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setClearColor( 0xf0f0f0 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( containerWidth, containerHeight );
  
  controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.enableZoom = false;
  
  var ambientlight = new THREE.AmbientLight( 0xffffff );
  scene.add( ambientlight );
  
  var manager = new THREE.LoadingManager();
  manager.onProgress = function ( item, loaded, total ) {};
  var onProgress = function ( xhr ) {};
  var onError = function ( xhr ) {};
  
  var loader = new THREE.OBJLoader( manager );
  var textureLoader = new THREE.TextureLoader( manager );
  
  loader.load( path + '/assets/3d/anello-1/interno.obj', function ( object ) {
  
      var backgroundTexture = textureLoader.load( path + '/assets/3d/texture/argento_standard_512_1024.jpg');
  
      backgroundTexture.flipY = false;
  
      var background = new THREE.MeshPhongMaterial({
          map: backgroundTexture,
          envMap: textureCube,
          reflectivity:0.5
      });
  
      object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {
              child.material = background;
          }
      });
  
      object.position.y =-50;
      scene.add(object);
  
  }, onProgress, onError );
  
  
  loader.load( path + '/assets/3d/anello-1/esterno.obj', function ( object ) {
  
      var geometry = object.children[ 0 ].geometry;
      var materials = [];
  
      var scavoTexture = textureLoader.load( path + '/assets/3d/texture/argento_scuro_512_1024.jpg');
  
  
      var material = new THREE.MeshPhongMaterial({
          map: scavoTexture,
          envMap: textureCube,
          reflectivity:0.5
      });
  
      materials.push(material);
  
      var customTexture = textureLoader.load( path + "/" + immagine);
  
      customTexture.flipY = false;
  
      var custom = new THREE.MeshPhongMaterial({
          map: customTexture,
          transparent: true,
          opacity: 1,
          color: 0xffffff
      }); 
  
      materials.push(custom);
  
      esterno = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
  
      esterno.position.y=-50;
  
      scene.add(esterno);
  
  }, onProgress, onError );
  
  
  container = document.getElementById( 'preview3d' );
  
  container.appendChild( renderer.domElement );
  
  animate();
  

  How can i get a better result? I have to change my models? My code? Both? Thanks

  [EDIT]

  Thanks, everyone for the comments. This is the result now:

  Now, i have another question. Is there a way to extrude the text and other elements? I have only a png element of the central part.

  Thanks

  [EDIT 2]

  Now I'm making some experiment with displacementMap. This is the result at this moment:

  Now the problem is: the browser freeze due to heavily subdivided mesh. This is a part of my code:

  var external = new THREE.CylinderBufferGeometry( 3.48, 3.48, 4, 800, 400, true, -1.19, 5.54 );
  
  var materials = [];
  
  var baseMaterial = new THREE.MeshPhongMaterial({
      color: 0x222222
  });
  
  materials.push(baseMaterial);
  
  var textureMaterial = new THREE.MeshPhongMaterial({
      map: image, //PNG with text and symbols
      transparent: true,
      opacity: 1,
      reflectivity:0.5,
      color: 0xc0c0c0,
      emissive: 0x111111,
      specular: 0xffffff,
      shininess: 34,
      displacementMap: image, //same as map
      displacementScale: 0.15,
      displacementBias: 0
  }); 
  
  materials.push(textureMaterial);
  
  var externalObj = THREE.SceneUtils.createMultiMaterialObject(external, materials);
  

  I think that the problem is the 800x400 segments of cylinder, that generate a mesh with 320000 "faces". There is a way to optimize the performance keeping this level of detail?

  Thanks again.

  P.s. maybe I have to open a new question?

  解决方案

  Answering your new question: you could use your png also as displacement map. Have a look at the official example: https://threejs.org/examples/webgl_materials_displacementmap.html But you probably need to heavily subdivide your "central part" for displacement.

  Maybe in your case there will be your png as bump map sufficient enough, then you you might check out this example: https://threejs.org/examples/webgl_materials_bumpmap.html

  这篇关于三.js:物体光&置换贴图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！