<style>
body {
margin: 0;
}
</style>
<script
async
src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcadc82c2c0cbdac3ca82dcc7c6c2dcef9e8199819c">[email protected]</a>/dist/es-module-shims.js"
></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f0512123747594642475946">[email protected]</a>/build/three.module.js",
"three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13677b61767653233d2226233d22">[email protected]</a>/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild(renderer.domElement)
const skyboxTexture = new URL('./textures/skybox.hdr', import.meta.url)
const loader = new RGBELoader()
loader.load(skyboxTexture, function ( texture ) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
} );
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256 );
cubeRenderTarget.texture.type = THREE.HalfFloatType;
const controls = new OrbitControls(camera, renderer.domElement)
const cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0, metalness: 1, envMap: cubeRenderTarget.texture})
const cube = new THREE.Mesh(geometry, material)
cube.castShadow = true
scene.add(cube)
const light = new THREE.AmbientLight(0xffffff, 10)
light.castShadow = true
// scene.add(light)
light.position.z = 2
light.position.y = 3
camera.position.z = 5
const gg = new THREE.BoxGeometry(5, 0.5, 10)
const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
const ground = new THREE.Mesh(gg, gm)
ground.receiveShadow = true
ground.position.y = -3
scene.add(ground)
renderer.shadowMap.enabled = true
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
cubeCamera.update( renderer, scene );
}
animate()
</script>
https://i.sstatic.net/cx3Pt.jpg
My scene doesn't show my HDR background. I also made my cube roughness to 0 and metallic to 1. It's is dark but sometimes show blue color of the ground. Everything is dark. I want to show my HDR background. No errors saying!
I used everything from a YouTube video but not working. Everything is error.