如何在 Autodesk Forge 中设置天空盒
How to set up skybox in Autodesk Forge
我想在我的 Forge 场景中添加一个天空盒,但是 Forge 与 three.js 不同。我想知道我能为它做什么。
我试过new THREE.CubeTextureLoader
,但是Forge中的three.js没有这个功能。然后我尝试构建一个CubeGeometry
,但效果不佳。
这是我的代码:
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);
这是我的场景:
下面是一些代码,用于创建适用于查看器的天空盒(在 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)
}
}
这在我这边运行良好,正如您在我创建的现场演示中看到的那样 here。
您需要注意的一件事是查看器使用 near/far 裁剪平面,这些裁剪平面是基于加载的模型边界框创建的。您的天空盒可能比模型大得多,因此一种解决方法是加载范围更大的第二个模型,这样场景裁剪平面就会自动更新。第二个模型只包含放置在所需范围内的微小立方体,例如 [(-500, -500, -500), (500, 500, 500)].
我使用天空盒的扩展源在这里:Viewing.Extension.Showcase。
我想在我的 Forge 场景中添加一个天空盒,但是 Forge 与 three.js 不同。我想知道我能为它做什么。
我试过new THREE.CubeTextureLoader
,但是Forge中的three.js没有这个功能。然后我尝试构建一个CubeGeometry
,但效果不佳。
这是我的代码:
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);
这是我的场景:
下面是一些代码,用于创建适用于查看器的天空盒(在 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)
}
}
这在我这边运行良好,正如您在我创建的现场演示中看到的那样 here。
您需要注意的一件事是查看器使用 near/far 裁剪平面,这些裁剪平面是基于加载的模型边界框创建的。您的天空盒可能比模型大得多,因此一种解决方法是加载范围更大的第二个模型,这样场景裁剪平面就会自动更新。第二个模型只包含放置在所需范围内的微小立方体,例如 [(-500, -500, -500), (500, 500, 500)].
我使用天空盒的扩展源在这里:Viewing.Extension.Showcase。