This is the code snippet for creating a glass material:
const glassMaterial = new THREE.MeshPhysicalMaterial( {
// color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
color: 0xffffff,
metalness: 0.25,
roughness: 0,
transmission: 1.0,
transparent: true, // Enable transparency
opacity: 0.8,
});
Here is the code to assign the glass material to an object in a 3D model:
loader.load('model/bentley.glb', (gltf) => {
const carModel = gltf.scene.children[ 0 ];
carModel.getObjectByName( 'glassclear_headlights' ).material = glassMaterial;
scene.add(carModel);
})
However, the issue faced is that the object which has been assigned the glass material appears unchanged and flat. The logged object data confirms the update but it doesn't reflect in the canvas.
Below is the detailed object data:
Object { isObject3D: true, uuid: "eb2f4654-2800-408f-b829-7e49494fd212", name: "glassclear_headlights", type: "Object3D", ... }
For the complete code which includes the 3D scene setup, loading models, and controlling the camera, refer to the code below.
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
// Code for setting up the 3D scene, loading models, and camera controls
// ...
If anyone can provide assistance or guidance regarding this issue, it would be greatly appreciated.