Question

我正在使用Thrre.js进行3D建模，并且在阅读.DAE文件后必须显示整洁干净的产品，但我的产品显示效果不是很好。任何人都可以帮助我，我也给了光源，但显示的产品仍然非常沉闷。Actual product to be shown

My product image render screen shot , no leather is shown in product and also very dull

我正在尝试关注代码：

<script>
var renderer, scene, camera, controls, light;
var geometry, material, mesh;

init();
animate();

function init() {

    document.body.style.cssText = 'margin: 0; overflow: hidden' ;
    renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff }  );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 50000 );
    camera.position.set( 100, 100, 100 );
    //camera.position.set(-15, 10, 15);
    controls = new THREE.TrackballControls( camera, renderer.domElement );
    scene.add(camera);

    light = new THREE.AmbientLight(0xffffff, 10);
    light.position.set(100,100, 100).normalize();
    scene.add(light);

    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(10, 10, 10).normalize();
    scene.add(light);

    var pointlight = new THREE.PointLight(0xffffff, 1, 0);
    pointlight.position.set(50, 100, 50)
    camera.add(pointlight);
    scene.add(pointlight);
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(10,10,10);
    scene.add(spotLight);

    var pointHelper = new THREE.PointLightHelper(pointlight, 0.1);
    scene.add(pointHelper);
    this.renderer.render(this.scene, this.camera);
    geometry = new THREE.BoxGeometry( 10, 10, 10 );
    material = new THREE.MeshLambertMaterial( { ambient: 0x333333, color: 0x888888, opacity: 0.000001, transparent: true } );
   // material = new THREE.MeshLambertMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors });
    mesh = new THREE.Mesh( geometry, material );
    mesh.name = 'basic template mesh';
    mesh.visible = false;
    scene.add( mesh );

}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    controls.update();
}``

通过这段代码，我得到了非常沉闷的产品。任何人都可以帮我解决这个问题吗？

Answer 1

您使用的是错误的材料。 MeshLambertMaterial用于漫反射表面，那些没有镜面高光的表面（纸张，原木，布料）。您需要使用MeshPhongMaterial，它允许椅子上的镜面高光（白点）。

在您的模型中，您有两种类型的表面：皮革和木材。虽然它们都有镜面高光，但它们的光泽却不同。您必须为两个表面定义单独的材料。但是，既然我看到你有一个对象，这可能很难。您可以为两个曲面定义单个MeshPhongMaterial，但您必须在参数中尝试多个值才能获得所需的效果。

Three.js 3D模型看起来不太干净

1 个答案: