title category import { OrbitControl } from "@oasis-engine/controls" ; import * as dat from "dat.gui" ; import { AmbientLight , AssetType , BackgroundMode , Camera , DiffuseMode , DirectLight , Logger , MeshRenderer , PBRMaterial , PrimitiveMesh , SkyBoxMaterial , Vector3 , WebGLEngine } from "oasis-engine" ; Logger . enable ( ) ; const engine = new WebGLEngine ( "canvas" ) ; engine . canvas . resizeByClientSize ( ) ; const scene = engine . sceneManager . activeScene ; const rootEntity = scene . createRootEntity ( ) ; const gui = new dat . GUI ( ) ; const cameraNode = rootEntity . createChild ( "camera_node" ) ; cameraNode . transform . position = new Vector3 ( - 3 , 0 , 3 ) ; cameraNode . addComponent ( Camera ) ; cameraNode . addComponent ( OrbitControl ) ; const sky = scene . background . sky ; const skyMaterial = new SkyBoxMaterial ( engine ) ; scene . background . mode = BackgroundMode . Sky ; sky . material = skyMaterial ; sky . mesh = PrimitiveMesh . createCuboid ( engine , 1 , 1 , 1 ) ; const lightEntity = rootEntity . createChild ( ) ; lightEntity . addComponent ( DirectLight ) . intensity = 0.5 ; lightEntity . transform . setPosition ( 5 , 5 , 5 ) ; lightEntity . transform . lookAt ( new Vector3 ( 0 , 0 , 0 ) ) ; const ball = rootEntity . createChild ( "ball" ) ; const ballRender = ball . addComponent ( MeshRenderer ) ; const material = new PBRMaterial ( engine ) ; material . metallic = 0 ; material . roughness = 0 ; ballRender . mesh = PrimitiveMesh . createSphere ( engine , 1 , 64 ) ; ballRender . setMaterial ( material ) ; engine . resourceManager . load < AmbientLight > ( { type : AssetType . Env , url : "https://gw.alipayobjects.com/os/bmw-prod/258a783d-0673-4b47-907a-da17b882feee.bin" } ) . then ( ( ambientLight ) => { scene . ambientLight = ambientLight ; skyMaterial . textureCubeMap = ambientLight . specularTexture ; skyMaterial . textureDecodeRGBM = true ; openDebug ( ambientLight . specularTexture ) ; engine . run ( ) ; } ) ; function openDebug ( specularTexture ) { const info = { diffuseMode : "SphericalHarmonics" , diffuseSolidColor : [ 0.212 * 255 , 0.227 * 255 , 0.259 * 255 ] , specularTexture : true } ; gui . add ( info , "diffuseMode" , [ "SolidColor" , "SphericalHarmonics" ] ) . onChange ( ( v ) => { if ( v === "SphericalHarmonics" ) { scene . ambientLight . diffuseMode = DiffuseMode . SphericalHarmonics ; } else if ( v === "SolidColor" ) { scene . ambientLight . diffuseMode = DiffuseMode . SolidColor ; } } ) ; gui . addColor ( info , "diffuseSolidColor" ) . onChange ( ( v ) => { scene . ambientLight . diffuseSolidColor . setValue ( v [ 0 ] / 255 , v [ 1 ] / 255 , v [ 2 ] / 255 , 1 ) ; } ) ; gui . add ( info , "specularTexture" ) . onChange ( ( v ) => { if ( v ) { scene . ambientLight . specularTexture = specularTexture ; } else { scene . ambientLight . specularTexture = null ; } } ) ; gui . add ( scene . ambientLight , "specularIntensity" , 0 , 1 ) ; gui . add ( scene . ambientLight , "diffuseIntensity" , 0 , 1 ) ; }