Three.js: object light & displacementMap

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/40628253/three-js-object-light-displacementmap