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

我如何獲得更好的結果？ 我必須改變我的模型？我的代碼？都？ 感謝

[編輯]

謝謝大家的意見。 這是現在的結果是：

現在，我還有一個問題。有沒有辦法擠出文字和其他元素？我只有中央部分的PNG元素。

感謝

[編輯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); 

我認爲問題是氣缸的800x400段，即生成一個齧合320000「面」。有一種方法可以優化性能，保持這一級別的細節？

再次感謝。

P.s.也許我必須開一個新的問題？

Answer 1

回答你的新問題：你也可以使用你的PNG作爲位移圖。看看官方的例子：https://threejs.org/examples/webgl_materials_displacementmap.html 但是，你可能需要重新細分你的「中心部分」的位移。

也許在你的情況下，將你的PNG作爲凹凸貼圖足以，那麼你可能會看看這個例子：https://threejs.org/examples/webgl_materials_bumpmap.html