i kept getting black render from cubeCamera.
here is my code.
i am not sure if its the reason of the order of loading scene or is there anything else i did wrong?
`
three.js webgl - glTF loader<body>
<script type="text/javascript" src="./js/boxProjectShader.js" ></script>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';
import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
import { RectAreaLightHelper } from './jsm/helpers/RectAreaLightHelper.js';
import { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
import { LightProbeHelper } from './jsm/helpers/LightProbeHelper.js';
import { LightProbeGenerator } from './jsm/lights/LightProbeGenerator.js';
import { Reflector } from './jsm/objects/Reflector.js';
var container, controls;
var camera, cubeCamera, scene, renderer;
var hdrCubeRenderTarget, cubeRenderTarget;
var hdrCubeMap, refractionCube, lightMap1, lightMap2, lightMap3, lightMap4;
var meshObject = new Map();
var meshMaterials = new Map();
var cubeCameraHelper;
var pngCubeRenderTarget, pngBackground;
var lightProbe;
var cubeMap1;
init();
render();
function init() {
container = document.createElement( 'div' )
document.body.appendChild( container );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
// Tone Mapping
// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMapping = THREE.CineonToneMapping;
// renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
// scene
scene = new THREE.Scene();
scene.fog = false;
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set(.1, 1, 1.5);
// camera.lookAt(0, 0, -2);
// base helper
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
// load Light
loadLight();
loadTexture();
loadMesh();
// renderTarget();
container.appendChild( renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function loadLight(){
// probe
//lightProbe = new THREE.LightProbe();
//scene.add( lightProbe );
// hemisphere light
var light = new THREE.HemisphereLight( 0xffffbb, 0xffffbb, .2);
// scene.add( light );
//spot light
var spotLight = new THREE.SpotLight( 0xffffff );
var spotLightHelper = new THREE.SpotLightHelper(spotLight);
spotLight.position.set(0, 10, 3 );
spotLight.castShadow = true;
// scene.add(spotLightHelper);
// scene.add(spotLight);
//amibentLight
var ambientLight = new THREE.AmbientLight( 0x111111 ); // soft white light
ambientLight.intensity = 1;
// scene.add( ambientLight );
//Directional light
var dirLight = new THREE.DirectionalLight();
const dirHelper = new THREE.DirectionalLightHelper( dirLight, 5 );
dirLight.lookAt(-1, -1, -1);
dirLight.intensity = 1;
// scene.add(dirLight);
// scene.add(dirHelper);
}
function loadTexture(){
// cube map hdr Generator
var pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
// var hdrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
hdrCubeMap = new HDRCubeTextureLoader()
.setPath( './textures/cube/pisaHDR/' )
// .setPath( './textures/cube/cubeMap/' )
.setDataType( THREE.UnsignedByteType )
.load( hdrUrls, function () {
hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
hdrCubeMap.magFilter = THREE.LinearFilter;
hdrCubeMap.needsUpdate = true;
} );
}
// load cube map
var path = 'textures/cube/cubeMap/';
var format = '.png';
var urls = [ // These are some reflectionCube demo textures
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = new THREE.CubeTextureLoader().load( urls );
var refractionCube = new THREE.CubeTextureLoader().load( urls );
refractionCube.mapping = THREE.CubeRefractionMapping;
reflectionCube.mapping =THREE.CubeReflectionMapping;
// scene.background = reflectionCube;
// scene.environment = hdrCubeMap;
// scene.environment = reflectionCube;
function loadMesh(){
var pmremGenerator = new THREE.PMREMGenerator(renderer);
// var rgbeLoader = new THREE.RGBELoader().setDataType(THREE.UnsignedByteType).setPath('mesh/test/test_HDR/lightmap/');
var rgbeLoader = new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setPath( 'mesh/test/lightmap/' );
// gltf
// var loader = new GLTFLoader().setPath( 'mesh/test/' );
// loader.load( 'test.gltf', function ( gltf ) {
var Gtexture = new THREE.CanvasTexture( generateTexture() );
Gtexture.magFilter = THREE.NearestFilter;
Gtexture.wrapT = THREE.RepeatWrapping;
Gtexture.wrapS = THREE.RepeatWrapping;
Gtexture.repeat.set( 1, 3.5 );
// glb
var loader = new GLTFLoader().setPath( 'mesh/test/' );
loader.load( 'test_metal.glb', function ( gltf ) {
var i = 0;
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
var tempName = child.name;
// ------------------------------------
var tempLightmap = rgbeLoader.load(tempName + '_baked.hdr', function(texture, textureData){
texture.flipY = false;
child.material.lightMap = texture;
child.material.lightMapIntensity = 1;
child.material.needsUpdate = true;
});
i++;
}
});
scene.add( gltf.scene );
// changeMaterials();
// updateCubeMap();
renderTarget();
render();
} );
}
function renderTarget(){
var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
cubeCamera = new THREE.CubeCamera( 0, 5, cubeRenderTarget );
scene.add( cubeCamera );
// cubeCamera.position.set(0, .1, 0);
var floorMaterial = new THREE.MeshStandardMaterial( { envMap: cubeRenderTarget.texture, side:THREE.DoubleSide, roughness:0, metalness: 1 } );
var floorGeometry = new THREE.SphereGeometry(.7, 30);
let floor = new THREE.Mesh(floorGeometry, floorMaterial);
console.log(floor.material);
// floor.rotation.y = Math.PI / 2 - 45;
floor.position.set(-1, .5, 0);
scene.add(floor);
for(var m in meshObject){
if(console.log(m.material.metalness != 0)){
// setup EnvMap----------------------------------------------------------------------------------------------
child.material.envMap = reflectionCube;
// change EnvMap intensity
child.material.envMapIntensity = 1;
}
}
window.addEventListener('resize', onWindowResize, false);
}
function generateTexture() {
var canvas = document.createElement( 'canvas' );
canvas.width = 2;
canvas.height = 2;
var context = canvas.getContext( '2d' );
context.fillStyle = 'white';
context.fillRect( 0, 0, 4, 4);
return canvas;
}
function changeMaterials() {
// to do
}
</script>
</body>