aframe glTF cube-env-map
aframe glTF cube-env-map
我无法使用“cube-env-map”在我的 gtLF 模型上看到任何反射。
我想得到这样的东西：
helmet from threejs.org examples
我不知道这是因为我使用的 .jpg 文件，还是 html 或链接的 javascript 脚本，或者...其他原因？
这是我的 html :
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam -->
<script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
<script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
<script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" embedded>
<a-assets>
<a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
</a-assets>
<a-entity
gltf-model="#toy"
cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;"
play-all-model-animations >
</a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>
非常感谢您的帮助，
（假设没有控制台错误提示不正确的立方体贴图路径或错误的扩展）
如果您的模型是这样的：
你希望它更像这样：
那么答案就在于两个因素——metalness, and roughness.
您至少可以通过两种方式处理此问题：
- 在 Blender 或 Maya 等建模软件中修改 material。
- 修改框架自定义组件中的属性。
组件必须等到模型加载完毕，然后更改所有（或某些选定的）模型节点。像这样：
AFRAME.registerComponent("foo", {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
mesh.traverse(node => {
// ignore nodes without materials
if (!node.material) return;
// assign the values.
node.material.metalness = 1;
node.material.roughness = 0;
})
})
}
})
您可以在 this 示例中查看。
头盔与 jpg and png maps. As for arjs, if your model will be glitchy, and you'll experience z-fighting 都兼容，只需在 renderer 中设置 logarithmicDepthBuffer:
<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>
示例here
.似乎按预期工作：
好的，我更改了 Blender 中的设置，添加了金属感，现在效果很好。这令人困惑，因为在 Blender 中你不需要设置金属度来获得反射（即：塑料瓶可能有反射）。我必须使用这些参数。非常感谢！
我无法使用“cube-env-map”在我的 gtLF 模型上看到任何反射。 我想得到这样的东西： helmet from threejs.org examples 我不知道这是因为我使用的 .jpg 文件，还是 html 或链接的 javascript 脚本，或者...其他原因？ 这是我的 html :
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam -->
<script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
<script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
<script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" embedded>
<a-assets>
<a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
</a-assets>
<a-entity
gltf-model="#toy"
cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;"
play-all-model-animations >
</a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>
非常感谢您的帮助，
（假设没有控制台错误提示不正确的立方体贴图路径或错误的扩展）
如果您的模型是这样的：
你希望它更像这样：
那么答案就在于两个因素——metalness, and roughness.
您至少可以通过两种方式处理此问题：
- 在 Blender 或 Maya 等建模软件中修改 material。
- 修改框架自定义组件中的属性。
组件必须等到模型加载完毕，然后更改所有（或某些选定的）模型节点。像这样：
AFRAME.registerComponent("foo", {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
mesh.traverse(node => {
// ignore nodes without materials
if (!node.material) return;
// assign the values.
node.material.metalness = 1;
node.material.roughness = 0;
})
})
}
})
您可以在 this 示例中查看。
头盔与 jpg and png maps. As for arjs, if your model will be glitchy, and you'll experience z-fighting 都兼容，只需在 renderer 中设置 logarithmicDepthBuffer:
<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>
示例here
.似乎按预期工作：
好的，我更改了 Blender 中的设置，添加了金属感，现在效果很好。这令人困惑，因为在 Blender 中你不需要设置金属度来获得反射（即：塑料瓶可能有反射）。我必须使用这些参数。非常感谢！