3D-модели Three.js не выглядят хорошо и чисто

Lakhdeep Kumar спросил: 28 апреля 2018 в 08:19 в: javascript

Я работаю над 3D-моделированием с помощью Thrre.js и должен отображать аккуратный и чистый продукт после чтения файла .DAE, но мой дисплей продукта не очень чист и хорош. Может кто-нибудь, пожалуйста, помогите мне, я также предоставил источники света, но все же показанный продукт очень скучный. Обратный продукт, который будет показан.

Мой снимок изображения изображения продукта, ни одна кожа не показана в продукте, а также очень скучна

Я пытаюсь выполнить код:

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

С помощью этого кода я получил очень скучный продукт. Кто-нибудь Пожалуйста, помогите мне разобраться с этой проблемой?

1 ответ

sosegon ответил: 28 апреля 2018 в 08:58

Вы используете неправильный материал. Материал MeshLambertMaterial используется для диффузных поверхностей, которые не имеют зеркальных бликов (бумага, сырая древесина, ткань). Вам нужно использовать MeshPhongMaterial, который позволяет видеть зеркальные блики (белые пятна) в кресле.

В вашей модели у вас есть два типа поверхности: кожа и дерево. Несмотря на то, что оба они имеют зеркальные блики, их сияние отличается. Вам нужно будет определить отдельные материалы для обеих поверхностей. Но, поскольку я вижу, что у вас есть один объект, это может быть сложно. Вы можете определить один MeshPhongMaterial для обеих поверхностей, но вам придется попробовать несколько значений в параметрах, чтобы получить желаемый эффект.

Lakhdeep Kumar ответил: 28 апреля 2018 в 11:44
Спасибо sosegon за ответ, я последую вашим предложениям и вернусь к вам. В любом случае спасибо !!
Lakhdeep Kumar ответил: 29 апреля 2018 в 11:05
Привет sosegen, я применил MeshPhongMaterial, как вы предложили, и попробовал разные шаблоны, но он все еще не работает. материал = новый THREE.MeshPhongMaterial ({ambient: 0x333333, цвет: 0x888888, зеркальный: 0x555555, блеск: 30, непрозрачность: 0,000001, прозрачный: истина}); Можете ли вы предложить и поместить любой подходящий код.