如何在 Autodesk Forge 中设置天空盒 [英] How to set up skybox in Autodesk Forge
问题描述
我想在我的 Forge 场景中添加一个天空盒,但 Forge 与three.js 不同.我想知道我能为它做什么.
我试过new THREE.CubeTextureLoader
,但是Forge中的three.js没有这个功能.然后我尝试构建一个 CubeGeometry
,但效果不佳.
这是我的代码:
var materialArr=[];var 方向 = ["aa_RT","aa_LF","aa_UP","aa_DN","aa_FR","aa_BK"] ;for (var i = 0; i <6; i++){materialArray.push(新三.MeshBasicMaterial({地图:THREE.ImageUtils.loadTexture("lib/img/aa/"+方向[i] + ".jpg"),侧面:三.BackSide}));}var skyBoxGeom = new THREE.CubeGeometry(80,80,80);var skyBoxMaterial = new THREE.MeshFaceMaterial(materialArr);var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial);查看器.impl.scene.add(skyBox);
这是我的场景:
以下是一些用于创建适用于查看器的天空盒的代码(在 ES6 中):
导出默认类 ViewerSkybox {构造函数(查看器,选项){const faceMaterials = options.imageList.map((url) => {返回新的 THREE.MeshBasicMaterial({地图:THREE.ImageUtils.loadTexture(url),侧面:三.BackSide})})const skyMaterial = new THREE.MeshFaceMaterial(面材)const geometry = new THREE.CubeGeometry(options.size.x,options.size.y,options.size.z,1, 1, 1,空,真)const 天空盒 = 新的 THREE.Mesh(几何,天空材质)查看器.impl.scene.add(天空盒)}}
这在我这边工作正常,正如您在我创建的实时演示中看到的那样
您需要注意的一件事是查看器使用基于加载的模型边界框创建的近/远裁剪平面.您的天空盒可能比模型大得多,因此一种解决方法是加载具有更大范围的第二个模型,以便自动更新场景裁剪平面.第二个模型只包含放置在所需范围内的小立方体,例如 [(-500, -500, -500), (500, 500, 500)].
我使用天空盒的扩展源在这里:Viewing.Extension.Showcase.
I want to add a skybox to my Forge scene, but Forge is different from three.js. I want to know what I can do for it.
I have tried new THREE.CubeTextureLoader
, but the three.js in Forge doesn't have this function. Then I tried to build a CubeGeometry
, but it did't work well.
This is my code:
var materialArr=[];
var directions = ["aa_RT","aa_LF","aa_UP","aa_DN","aa_FR","aa_BK"] ;
for (var i = 0; i < 6; i++){
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( "lib/img/aa/"+ directions[i] + ".jpg" ),
side: THREE.BackSide
}));
}
var skyBoxGeom = new THREE.CubeGeometry(80,80,80);
var skyBoxMaterial = new THREE.MeshFaceMaterial(materialArr);
var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial);
viewer.impl.scene.add(skyBox);
This is my scene:
Here is some code for creating a skybox that works for the viewer (in ES6):
export default class ViewerSkybox {
constructor (viewer, options) {
const faceMaterials = options.imageList.map((url) => {
return new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(url),
side: THREE.BackSide
})
})
const skyMaterial = new THREE.MeshFaceMaterial(
faceMaterials)
const geometry = new THREE.CubeGeometry(
options.size.x,
options.size.y,
options.size.z,
1, 1, 1,
null, true)
const skybox = new THREE.Mesh(
geometry, skyMaterial)
viewer.impl.scene.add(skybox)
}
}
This is working fine on my side, as you can see in the live demo I created here.
One thing you need to take care about is that the viewer uses near/far clipping planes which are created based on the loaded model bounding box. Your skybox is probably much bigger than the model, so one workaround is to load a second model with a much bigger extents, so the scene clipping planes are updated automatically. The second model only contains tiny cubes placed at the desired extents, for example [(-500, -500, -500), (500, 500, 500)].
The source of my extension using the skybox is here: Viewing.Extension.Showcase.
这篇关于如何在 Autodesk Forge 中设置天空盒的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!