Three.js를 : 오브젝트 빛 & displacementMap

Question

나는이 같은 현실적인 실버 반지를 만들려고 노력 해요 :

을 다양한 색상과 크기. 당신이 내 반지가 원활하지 않습니다 볼 수 있듯이

:

이이 순간에 내 결과입니다. 그것은 또는 코드, 모델의 문제인지 나도 몰라 :

(전 2 모델, 빛은 하나의 어두운 한 또 다른을 사용하고 있습니다) 내 모델이 있습니다

• 등 : http://www.websuvius.it/atma/myring/assets/3d/anello-1/interno.obj
• 어두운 :

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

  ,691,363 : http://www.websuvius.it/atma/myring/assets/3d/anello-1/esterno.obj

이 내 코드의 일부입니다210

더 나은 결과를 얻으려면 어떻게해야합니까? 내 모델을 변경해야합니까? 내 코드? 양자 모두? 감사

[편집]

감사 의견에 대한 여러분.

지금, 나는 또 다른 질문이 있습니다 : 이 이제 결과입니다. 텍스트 및 기타 요소를 돌출시키는 방법이 있습니까? 나는 중앙 부분의 png 요소 만 가지고있다.

감사

[EDIT 2]

는 지금은 displacementMap 몇 가지 실험을 만들고있어.

지금 문제는 다음과 같습니다 : 많이 메쉬를 세분화 브라우저 동결 인해 이이 순간에 결과입니다.

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

내가 문제 "에 직면"320000과 메쉬를 생성 실린더의 800x400 부분이라고 생각 : 이 내 코드의 일부이다. 이 수준의 세부 정보를 유지하면서 성능을 최적화하는 방법이 있습니까?

다시 한번 감사드립니다.

p.s. 어쩌면 새로운 질문을해야합니까?

Answer 1

새로운 질문에 답하십시오. PNG를 위치 변경 맵으로 사용할 수도 있습니다. 공식 예를 살펴보십시오 : https://threejs.org/examples/webgl_materials_displacementmap.html 하지만 대체로 변위를 위해 "중앙 부분"을 세분화해야합니다.

은 아마도 귀하의 경우 다음이 예제를 확인 할 수 충분히 범프 맵 충분한 같은 PNG가있을 것입니다 : https://threejs.org/examples/webgl_materials_bumpmap.html