Last active
April 27, 2024 18:55
-
-
Save digitalbreed/f6d14d92d503219fefc25fd6ec0c1013 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Result: