I want the envmap to be loaded in the background when the page is loaded in three.js editor, but I failed, can you help.
Here my example code
<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
<script src="js/libs/codemirror/codemirror.js"></script>
<script src="js/libs/codemirror/mode/javascript.js"></script>
<script src="js/libs/codemirror/mode/glsl.js"></script>
<script src="js/libs/esprima.js"></script>
<script src="js/libs/jsonlint.js"></script>
<script src="js/libs/glslprep.min.js"></script>
<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">
<script src="js/libs/codemirror/addon/dialog.js"></script>
<script src="js/libs/codemirror/addon/show-hint.js"></script>
<script src="js/libs/codemirror/addon/tern.js"></script>
<script src="js/libs/acorn/acorn.js"></script>
<script src="js/libs/acorn/acorn_loose.js"></script>
<script src="js/libs/acorn/walk.js"></script>
<script src="js/libs/ternjs/polyfill.js"></script>
<script src="js/libs/ternjs/signal.js"></script>
<script src="js/libs/ternjs/tern.js"></script>
<script src="js/libs/ternjs/def.js"></script>
<script src="js/libs/ternjs/comment.js"></script>
<script src="js/libs/ternjs/infer.js"></script>
<script src="js/libs/ternjs/doc_comment.js"></script>
<script src="js/libs/tern-threejs/threejs.js"></script>
<script src="js/libs/signals.min.js"></script>
<script src="../examples/js/vr/HelioWebXRPolyfill.js"></script>
<script type="module">
import * as THREE from '../build/three.module.js';
import { Command } from './js/Command.js';
import { SetSceneCommand } from './js/commands/SetSceneCommand.js';
import { AddObjectCommand } from './js/commands/AddObjectCommand.js';
import { GLTFLoader } from '../examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '../examples/jsm/loaders/DRACOLoader.js';
import { RGBELoader } from '../examples/jsm/loaders/RGBELoader.js';
import { Editor } from './js/Editor.js';
import { Viewport } from './js/Viewport.js';
import { Toolbar } from './js/Toolbar.js';
import { Script } from './js/Script.js';
import { Player } from './js/Player.js';
import { Sidebar } from './js/Sidebar.js';
import { Menubar } from './js/Menubar.js';
import { Test } from './js/Test.js';
import { VRButton } from '../examples/jsm/webxr/VRButton.js';
window.URL = window.URL || window.webkitURL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
Number.prototype.format = function () {
return this.toString().replace( /(\d)(?=(\d{3})+(?!\d))/g, "$1," );
};
//
var editor = new Editor();
window.editor = editor; // Expose editor to Console
window.THREE = THREE; // Expose THREE to APP Scripts and Console
window.VRButton = VRButton; // Expose VRButton to APP Scripts
var viewport = new Viewport( editor );
document.body.appendChild( viewport.dom );
var toolbar = new Toolbar( editor );
document.body.appendChild( toolbar.dom );
var script = new Script( editor );
document.body.appendChild( script.dom );
var player = new Player( editor );
document.body.appendChild( player.dom );
var sidebar = new Sidebar( editor );
document.body.appendChild( sidebar.dom );
var menubar = new Menubar( editor );
document.body.appendChild( menubar.dom );
var test = new Test( editor );
document.body.appendChild( test.dom );
editor.storage.init( function () {
editor.storage.get( function ( state ) {
if ( isLoadingFromHash ) return;
if ( state !== undefined ) {
editor.fromJSON( state );
}
var selected = editor.config.getKey( 'selected' );
if ( selected !== undefined ) {
editor.selectByUuid( selected );
}
} );
//
var timeout;
function saveState() {
if ( editor.config.getKey( 'autosave' ) === false ) {
return;
}
clearTimeout( timeout );
timeout = setTimeout( function () {
editor.signals.savingStarted.dispatch();
timeout = setTimeout( function () {
editor.storage.set( editor.toJSON() );
editor.signals.savingFinished.dispatch();
}, 100 );
}, 1000 );
}
var signals = editor.signals;
signals.geometryChanged.add( saveState );
signals.objectAdded.add( saveState );
signals.objectChanged.add( saveState );
signals.objectRemoved.add( saveState );
signals.materialChanged.add( saveState );
signals.sceneBackgroundChanged.add( saveState );
signals.sceneFogChanged.add( saveState );
signals.sceneGraphChanged.add( saveState );
signals.scriptChanged.add( saveState );
signals.historyChanged.add( saveState );
} );
//
document.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false );
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
if ( event.dataTransfer.types[ 0 ] === 'text/plain' ) return; // Outliner drop
if ( event.dataTransfer.items ) {
// DataTransferItemList supports folders
editor.loader.loadItemList( event.dataTransfer.items );
} else {
editor.loader.loadFiles( event.dataTransfer.files );
}
}, false );
function onWindowResize() {
editor.signals.windowResize.dispatch();
}
window.addEventListener( 'resize', onWindowResize, false );
onWindowResize();
//
var isLoadingFromHash = false;
var hash = window.location.hash;
if ( hash.substr( 1, 5 ) === 'file=' ) {
var file = hash.substr( 6 );
if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
var loader = new THREE.FileLoader();
loader.crossOrigin = '';
loader.load( file, function ( text ) {
editor.clear();
editor.fromJSON( JSON.parse( text ) );
} );
isLoadingFromHash = true;
}
}
//test tanımlayıp loaderi aktifettik
function al(){
var loader = new GLTFLoader( );
var a='logo_urun.glb';
//loader.crossOrigin = '';
loader.load(a, function ( gltf ) {
//editor.clear();
var scenek = gltf.scene;
//scenek.scale.set(10,10,10);
editor.addAnimation( scenek, gltf.animations );
editor.execute( new AddObjectCommand( editor, scenek ) );
scenek.receiveShadow=true;
scenek.castShadow=true;
} );
}
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.outputEncoding = THREE.sRGBEncoding;
var scene = new THREE.Scene();
new RGBELoader()
.setDataType( THREE.UnsignedByteType ) // alt: FloatType, HalfFloatType
.load( 'lightroom_14b.hdr', function ( texture, textureData ) {
//console.log( textureData );
//console.log( texture );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
var mesh = new THREE.Mesh( quad, material );
scene.add( mesh );
} );
// ServiceWorker
if ( 'serviceWorker' in navigator ) {
try {
navigator.serviceWorker.register( 'sw.js' );
} catch ( error ) {
}
}
/*
window.addEventListener( 'message', function ( event ) {
editor.clear();
editor.fromJSON( event.data );
}, false );
*/
</script>