javascript - 三.js:物体光照和位移贴图

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