#three.js #light
#three.js #свет
Вопрос:
Я совсем новичок в ThreeJS, и я прочитал документацию и следил за множеством руководств.
Теперь я знаю, как взаимодействовать с объектами (преобразование, наведение курсора мыши, поворот, вычисление положений и масштабов и т.д.), Но мне трудно справляться со светом. На данный момент в моей сцене есть 4 элемента, которые я добавил благодаря меню «Добавить> куб». Когда я воспроизводю сцену, все анимируется правильно, но цвет остается прежним: все в цвете #XXXXXX, который я установил. Чего бы я хотел, так это получить эффект света и тени, подобный этому: https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
Я думаю, что я разместил все варианты, как на этой странице. Что я сделал не так? Вот моя сцена:
{
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"type": "BoxBufferGeometry",
"width": 1.8,
"height": 1.8,
"depth": 1.8,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
},
{
"uuid": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"type": "SphereBufferGeometry",
"radius": 1,
"widthSegments": 8,
"heightSegments": 6,
"phiStart": 0,
"phiLength": 6.283185,
"thetaStart": 0,
"thetaLength": 3.141593
},
{
"uuid": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"type": "DodecahedronBufferGeometry",
"radius": 1.2,
"detail": 0
},
{
"uuid": "F0338DDF-165A-47ED-A094-2537432A503B",
"type": "IcosahedronBufferGeometry",
"radius": 1.5,
"detail": 0
}],
"materials": [
{
"uuid": "388DEE89-D57C-4853-A22D-01554B78FF5B",
"type": "MeshPhongMaterial",
"color": 16777215,
"emissive": 0,
"specular": 1118481,
"shininess": 30,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "C9CA005B-89BC-4CD7-A13E-6F18610A2907",
"type": "MeshStandardMaterial",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 14869218,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "B5419D03-751E-421C-980E-3B004191B7A9",
"type": "MeshStandardMaterial",
"name": "poly2",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 10658466,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
},
{
"uuid": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE",
"type": "MeshStandardMaterial",
"name": "poly3",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 7829367,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
}],
"object": {
"uuid": "70493730-BD58-409F-8879-037628764C76",
"type": "Scene",
"name": "Scene",
"userData": {
"souris": [],
"formes": [
"Box",
"Icosahedron",
"Dodecahedron",
"Sphere"]
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.04,-5.06,0,1],
"children": [
{
"uuid": "AE0F3376-E0B4-47A2-8EE4-821522A4E7E2",
"type": "Mesh",
"name": "Box",
"userData": {
"position": {
"x": 0,
"y": 7.6,
"z": 0
},
"couleurs": [
"FFFFFF",
"095256"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.003758,7.6,0.001485,1],
"geometry": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"material": "388DEE89-D57C-4853-A22D-01554B78FF5B"
},
{
"uuid": "68FBB0DB-A517-45DD-AE8D-E414E2B5730B",
"type": "Mesh",
"name": "Sphere",
"userData": {
"position": {
"x": 0,
"y": 1,
"z": 0
},
"couleurs": [
"FFFFFF",
"86A873"],
"decalage": 0.2
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,1],
"geometry": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"material": "C9CA005B-89BC-4CD7-A13E-6F18610A2907"
},
{
"uuid": "816269B9-8C50-4C7D-80B0-D688F0FFF6D2",
"type": "Mesh",
"name": "Dodecahedron",
"userData": {
"position": {
"x": 0,
"y": 3,
"z": 0
},
"couleurs": [
"FFFFFF",
"5AAA95"],
"decalage": 0.3
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,3,0,1],
"geometry": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"material": "B5419D03-751E-421C-980E-3B004191B7A9"
},
{
"uuid": "8A74081A-5E4F-46A5-9F9E-75537641605F",
"type": "Mesh",
"name": "Icosahedron",
"userData": {
"position": {
"x": 0,
"y": 5.4,
"z": 0
},
"couleurs": [
"FFFFFF",
"087F8C"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,5.4,0,1],
"geometry": "F0338DDF-165A-47ED-A094-2537432A503B",
"material": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE"
},
{
"uuid": "8666758A-A261-4E55-91DE-6B0B57C2A104",
"type": "AmbientLight",
"name": "AmbientLight",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.700659,1],
"color": 13355979,
"intensity": 0.5
}]
}
}
Ответ №1:
Проблема в том, что вы используете AmbientLight , у которого нет светлых или темных сторон. Он равномерно освещает каждую грань, как будто свет исходит со всех сторон, придавая всей вашей геометрии плоский вид. Попробуйте использовать что-нибудь более захватывающее, например DirectionalLight , Spotlight , или HemisphereLight , чтобы получить некоторые вариации затенения. Вы могли бы потратить некоторое время, играя с разными источниками света и читая документы, чтобы увидеть, как каждый источник света ведет себя по-разному. Смотрите здесь, чтобы прочитать об AmbientLight.
Вторая проблема заключается в том, что вы изменяете .emissive свойство материала. Добавление излучающего цвета означает, что он будет игнорировать огни и будет просто светиться сам по себе. Вот почему вы получаете такие плоские серые цвета. Попробуйте вместо этого изменить его .color свойство, которое будет более естественно взаимодействовать со светом.
Смотрите ниже, я добавил a DirectionalLight , удалил .emissive и добавил разные .color буквы s к каждой фигуре:
Комментарии:
1. Большое спасибо, это именно тот ответ, который мне был нужен. Теперь я вижу это более ясно, спасибо, что просветили меня: D