Three.js：物体光＆displacementMap

Question

は、私はこのような現実的なシルバーリングを作るしようとしている：

を異なる色やサイズで。あなたは私のリングがスムーズではありません見ることができるように

：

はこれが現時点での私の結果です。 それはモデルの、またはコードの問題だ場合、私は知らない。

を私のモデル（私は暗いいずれかの2モデル、光銀用と別のものを使用しています）

があります。

• 光：http://www.websuvius.it/atma/myring/assets/3d/anello-1/interno.obj
• ダーク：http://www.websuvius.it/atma/myring/assets/3d/anello-1/esterno.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(); 

どうすればより良い結果が得られますか？ 私のモデルを変更する必要がありますか？私のコード？どちらも？ おかげ

[EDIT]

おかげで、コメントのみんな。

今、私は別の質問を持っている： これが今の結果があります。テキストやその他の要素を押し出す方法はありますか？私は中心部の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