Как задать MeshNormalMaterial цвет?

Question

[node_js]

Всё почти устраивает нужен серый цвет и чёткость подскажите что не так делаю не понимаю (
мой скрин

Вот мой код подскажите как менять цвет у MeshNormalMaterial ?

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {STLLoader} from "https://threejs.org/examples/jsm/loaders/STLLoader.js";
const scene = new THREE.Scene();
const loader = new THREE.TextureLoader();
scene.background = new THREE.Color( 0xafdafc );
const camera = new THREE.PerspectiveCamera();
const renderer = new THREE.WebGLRenderer({canvas: viewer});
const controls = new OrbitControls(camera, renderer.domElement);
function render() {
requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
}

var input = document.getElementById( 'input' );
input.addEventListener( 'change', function( event ) {
var file = this.files[ 0 ];
var reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {
var contents = event.target.result;


var material = new THREE.MeshNormalMaterial({});

var geometry = new STLLoader().parse( contents );
var mesh = new THREE.Mesh( geometry,material);

camera.position.set(0, 480, 0);
scene.add( mesh );
scene.add(new THREE.AmbientLight(0x404040));
}, false );
if ( reader.readAsBinaryString !== undefined ) {
reader.readAsBinaryString( file );
} else {
reader.readAsArrayBuffer( file );
}
});
render();

Answer 1

[McBernar]

Вы же в курсе, да, что MeshNormalMaterial просто представляет нормали геометрии в определенных цветах? Грубо говоря, в какую сторону смотрит поверхность - такой и будет цвет.

Если вам нужен определенный цвет - используйте любой из подходящих материалов - Ламберт, Физик.

Comments

[node_js]

хорошо вот зашёл я редактор https://threejs.org/editor/, получилось вот такое :
Переношу параметры у меня просто сплошной цвет, выбрал MeshPhysicalMaterial.

Что делаю не так.

var material = new THREE.MeshPhysicalMaterial({
color: 0x00afaf,
side: THREE.DoubleSide
});

[McBernar]

Свет добавьте и тени включите.

[node_js]

McBernar, как они правильно добавляются просто ищу не где не могу найти(

[node_js]

McBernar, 2 недели уже мучуюсь не могу понять (

[node_js]

McBernar,

needsUpdate=true;
renderer.ShadowMapEnabled = true;

и куда их вставлять ? куда не вставлю их везде ошибка выходит

[McBernar]

Вы же можете сделать это в редакторе TJS. Выбрать объект и нажать галочки нужные.
Если в коде, то

//Добавить свет
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0, 2, 5)
light.castShadow = true
scene.add(light)

//Установить тень на модели
model.castShadow = true
model.receiveShadow= true

//В рендере
renderer.shadowMap.enabled = true
renderer.shadowMapSoft = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

[node_js]

McBernar, спасибо огромное получилось, 2 недели просто читал документацию искал примеры не мог понять теперь буду знать что к чему относиться спасибо огромное ))