THREE.RGBELoader is not a constructor: error solved
THREE.RGBELoader is not a constructor: error solved
hey guys i am new to threejs and im trying to load a texture on top of my own gltf model and im trying to load it with gltf loader, imported using cdn scripts, however, i got this error saying gltf is not a constructor, any ideas how to fix it? thanks in advance. have a nice day. below attached is the code and errors involving this issue.
Solution to fix the error:
This is your html File
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>MerinoLaminates Preview</title>
<link href="style.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
</head>
<body>
<div id="viewer">
<div id="threedeeViewer"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/jsm/lights/RectAreaLightUniformsLib.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/three-addons@1.2.0/build/three-addons.min.js"></script>
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/three-gltf-loader@1.111.0/index.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/three@0.146.0/examples/js/loaders/RGBELoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/RGBELoader.js"></script>
<script src="main copy.js" type="module"></script>
</body>
</html>Add Three Js Logic -
<script>
// Scene, Camera, Renderer
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 = 5;
// add lighting const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
const rgbeLoader = new THREE.RGBELoader();
rgbeLoader.load(
'path_to_your_hdr_file.hdr', // Replace with the path to your HDR file
function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
// Set the environment map of the scene
scene.environment = texture;
// Create a basic sphere with the environment map
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
metalness: 1,
roughness: 0,
envMap: texture,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
},
undefined,
function (error) {
console.error('An error occurred loading the HDR file:', error);
}
);
// Animation loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
Comments
Post a Comment