如何在 ThreeJS 编辑器中对添加的形状使用灯光效果
How to use light effects in ThreeJS editor on added shapes
我是 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
}]
}
}
问题是您使用的 AmbientLight 没有明暗面。它均匀地照亮每张脸，就好像光线来自各个方向，让您的所有几何图形呈现平坦的外观。尝试使用更令人兴奋的东西，例如 DirectionalLight、Spotlight 或 HemisphereLight 来获得一些阴影变化。您可以花一些时间玩弄不同的灯并阅读文档以了解每种灯的行为有何不同。 See here to read about AmbientLight.
第二个问题是您正在修改 material 的 the .emissive property。添加自发光颜色意味着它会忽略灯光，并且只会自己发光。这就是为什么你会得到如此平坦的灰色。尝试改变其 .color 属性，这将更自然地与光线互动。
见下文，我添加了一个DirectionalLight，删除了.emissive，并为每个形状添加了不同的.color：
我是 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
}]
}
}
问题是您使用的 AmbientLight 没有明暗面。它均匀地照亮每张脸，就好像光线来自各个方向，让您的所有几何图形呈现平坦的外观。尝试使用更令人兴奋的东西，例如 DirectionalLight、Spotlight 或 HemisphereLight 来获得一些阴影变化。您可以花一些时间玩弄不同的灯并阅读文档以了解每种灯的行为有何不同。 See here to read about AmbientLight.
第二个问题是您正在修改 material 的 the .emissive property。添加自发光颜色意味着它会忽略灯光，并且只会自己发光。这就是为什么你会得到如此平坦的灰色。尝试改变其 .color 属性，这将更自然地与光线互动。
见下文，我添加了一个DirectionalLight，删除了.emissive，并为每个形状添加了不同的.color：