import'./style.css'import*asTHREEfrom'three'import{OrbitControls}from'three/addons/controls/OrbitControls.js'import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js'import{RGBELoader}from'three/addons/loaders/RGBELoader.js'importStatsfrom'three/addons/libs/stats.module.js'importJEASINGSfrom'jeasings'constscene=newTHREE.Scene()constgridHelper=newTHREE.GridHelper()gridHelper.position.y=-1scene.add(gridHelper)awaitnewRGBELoader().loadAsync('img/venice_sunset_1k.hdr').then((texture)=>{texture.mapping=THREE.EquirectangularReflectionMappingscene.environment=texture})constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,100)camera.position.set(0,1,4)constrenderer=newTHREE.WebGLRenderer({antialias:true})renderer.toneMapping=THREE.ACESFilmicToneMappingrenderer.toneMappingExposure=0.8renderer.shadowMap.enabled=truerenderer.setSize(window.innerWidth,window.innerHeight)document.body.appendChild(renderer.domElement)window.addEventListener('resize',()=>{camera.aspect=window.innerWidth/window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth,window.innerHeight)//render() //this line is unnecessary if you are re-rendering within the animation loop})constcontrols=newOrbitControls(camera,renderer.domElement)controls.enableDamping=true//controls.addEventListener('change', render) //this line is unnecessary if you are re-rendering within the animation loopletsuzanne:THREE.Mesh,plane:THREE.MeshnewGLTFLoader().load('models/suzanne_scene.glb',(gltf)=>{suzanne=gltf.scene.getObjectByName('Suzanne')asTHREE.Meshsuzanne.castShadow=true;((suzanne.materialasTHREE.MeshStandardMaterial).mapasTHREE.Texture).colorSpace=THREE.LinearSRGBColorSpaceplane=gltf.scene.getObjectByName('Plane')asTHREE.Meshplane.scale.set(50,1,50);(plane.materialasTHREE.MeshStandardMaterial).envMap=scene.environment// since three@163, we need to set `envMap` before changing `envMapIntensity` has any effect.;(plane.materialasTHREE.MeshStandardMaterial).envMapIntensity=0.05plane.receiveShadow=trueconstspotLight=gltf.scene.getObjectByName('Spot')asTHREE.SpotLightspotLight.intensity/=500spotLight.castShadow=truespotLight.target=suzannescene.add(gltf.scene)//render()})constraycaster=newTHREE.Raycaster()constmouse=newTHREE.Vector2()renderer.domElement.addEventListener('dblclick',(e)=>{mouse.set((e.clientX/renderer.domElement.clientWidth)*2-1,-(e.clientY/renderer.domElement.clientHeight)*2+1)raycaster.setFromCamera(mouse,camera)constintersects=raycaster.intersectObjects([suzanne,plane],false)if(intersects.length){constp=intersects[0].point//controls.target.set(p.x, p.y, p.z)// // JEasing the controls.target// new JEASINGS.JEasing(controls.target)// .to(// {// x: p.x,// y: p.y,// z: p.z// },// 500// )// //.delay (1000)// //.easing(JEASINGS.Cubic.Out)// //.onUpdate(() => render())// .start()// // slding x,z// new JEASINGS.JEasing(suzanne.position)// .to(// {// x: p.x,// z: p.z// },// 500// )// .start()// // going up// new JEASINGS.JEasing(suzanne.position)// .to(// {// y: p.y + 3// },// 250// )// //.easing(JEASINGS.Cubic.Out)// .start()// //.onComplete(() => {// // going down// new JEASINGS.JEasing(suzanne.position)// .to(// {// y: p.y + 1// },// 250// )// .delay(250)// //.easing(JEASINGS.Cubic.In)// .start()// //})}})conststats=newStats()document.body.appendChild(stats.dom)functionanimate(){requestAnimationFrame(animate)controls.update()JEASINGS.update()render()stats.update()}functionrender(){renderer.render(scene,camera)}animate()