Skip to content

Instantly share code, notes, and snippets.

@digitalbreed
Last active April 27, 2024 18:55
Show Gist options
  • Save digitalbreed/f6d14d92d503219fefc25fd6ec0c1013 to your computer and use it in GitHub Desktop.
Save digitalbreed/f6d14d92d503219fefc25fd6ec0c1013 to your computer and use it in GitHub Desktop.
// Load Synty Studio art pack FBX models with THREE.js
// Remarks:
// * Assumes the POLYGON City pack in subdirectory models/PolygonCity, adjust directories and filenames as you need
// * Relies on submesh naming conventions to assign glass material; if it doesn't work for your FBX, double-check that the glass actually ends with "_Glass"
// * Uses async/await to improve the readability and traceability of the program flow
// Standard THREE initialization code
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { TGALoader } from 'three/addons/loaders/TGALoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
camera.position.z = 50
// We need a light, too
const light = new THREE.DirectionalLight(0xffffff, 1)
light.rotation.z = 45
scene.add(light)
// Let's allow orbiting around the imported mesh
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.set(0, 0, 0)
// Create material and load model
const textureLoader = new THREE.TextureLoader()
const albedo = await textureLoader.loadAsync('models/PolygonCity/Textures/PolygonCity_Texture_01_A.png')
const normal = await textureLoader.loadAsync('models/PolygonCity/Textures/PolygonCity_Texture_Normal.png')
const tgaLoader = new TGALoader()
const metalness = await tgaLoader.loadAsync('models/PolygonCity/Textures/PolygonCity_Texture_Metallic.tga')
const material = new THREE.MeshStandardMaterial({
map: albedo,
normalMap: normal,
metalnessMap: metalness,
})
const glass = new THREE.MeshStandardMaterial({
color: '#049ef4',
transparent: true,
opacity: 0.5,
})
const fbxLoader = new FBXLoader()
const mesh = await fbxLoader.loadAsync('models/PolygonCity/Models/SM_Veh_Car_Van_01.fbx')
mesh.traverse((child) => {
if (child.isMesh) {
if (child.name.endsWith('_Glass')) {
child.material = glass
} else {
child.material = material
}
}
})
scene.add(mesh)
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
animate()
@digitalbreed
Copy link
Author

Result:

threejs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment