three 필드 전환

박스 를 사용 해서 하늘 박스 를 모 의 하 는 거 예요.
지금 바로 필드 로 전환 합 니 다.
 예:@약 현 소 매

    
    
    
    
    
    
    




      
         


    
    
    











    const el = document.getElementById('box')

    const app = new YsThree(el,{
        // gridHelper:true,//     
        // axes:true,//    
        //clearColor:'#000'//    
    })

    const renderer = app.renderer
    const clock = new THREE.Clock()
    app.initStatus(Stats)
    function initControls(camera) {
        const  controls = new THREE.OrbitControls(camera,renderer.domElement)
        //     animate   ，      
        //controls.addEventListener( 'change', render );
        //                      
        controls.enableDamping = true;
        //                  
        //controls.dampingFactor = 0.25;
        //      
        controls.enableZoom = true;
        //      
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.3;
        //             
        controls.minDistance = 1;
        //             
        // controls.maxDistance = 1000;
        //        
        controls.enablePan = true
        this.controls = controls

        return controls
    }


    
    /*  **** ****      ****   ****/
    const textures = []
    const loader = new THREE.TextureLoader()
    for ( let i = 0; i < 6; i ++ ) {
        textures[ i ] = loader.load( '../../images/ysThree/transition/transition' + ( i + 1 ) + '.png' )
    }
    const  transitionParams = {
        useTexture: true, //  false        
        transition: 0,
        transitionSpeed: 0.01,
        texture: textures[0],
        animate: false,
    }

    function OneScene( option ) {

        //camera
        this.camera = new THREE.PerspectiveCamera( 45, el.offsetWidth / el.offsetHeight, 1, 10000 )
        this.camera.position = option.cameraPosition

        // Setup scene
        this.scene = new THREE.Scene()
        this.scene.add( new THREE.AmbientLight( 0x555555 ) )

        //light
        const light = new THREE.SpotLight( 0xffffff, 1.5 )
        light.position.set( 0, 500, 2000 )
        this.scene.add( light )

        // WebGLRenderTarget
        const renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
        this.fbo = new THREE.WebGLRenderTarget( el.offsetWidth, el.offsetHeight, renderTargetParameters )

        this.controls = initControls(this.camera)
        this.render = function ( delta, rtt ) {
            if(option.renderCallBack) option.renderCallBack()
            renderer.setClearColor( option.clearColor )
            if ( rtt ) {
                renderer.setRenderTarget( this.fbo )
                renderer.clear()
                renderer.render( this.scene, this.camera )
            } else {
                renderer.setRenderTarget( null )
                renderer.render( this.scene, this.camera )
            }
            this.controls.update()
        };

    }

    const sceneA  =  new OneScene({
        cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
        clearColor: '#fff',
        renderCallBack: function () {

        }
    })
    const sceneB  =  new OneScene({
        cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
        fov: 45,
        clearColor: '#000',
        renderCallBack: function () {

        }
    })
    const sceneC  =  new OneScene({
        cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
        fov: 45,
        clearColor: '#efa7db',
        renderCallBack: function () {

        }
    })
    const sceneD  =  new OneScene({
        cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
        fov: 45,
        clearColor: '#A2EFAE',
        renderCallBack: function () {

        }
    })


    //  A    
    for (let i = 0; i<100; i++) {
        const box = new THREE.Mesh(new THREE.BoxBufferGeometry(5,5,5), new THREE.MeshBasicMaterial({color: 'red'}))
        box.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
        sceneA.scene.add(box)
    }
    //  B    
    for (let i = 0; i<100; i++) {
        const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'yellow'}))
        sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
        sceneB.scene.add(sphere)
    }
    //  C    
    for (let i = 0; i<100; i++) {
        const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'green'}))
        sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
        sceneC.scene.add(sphere)
    }
    //  D    
    for (let i = 0; i<100; i++) {
        const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'blue'}))
        sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
        sceneD.scene.add(sphere)
    }


    const transition = new app.SceneTransition( sceneA, sceneB,transitionParams )

    let FLOG = 0

    $(".change-scene").click(function () {
        transitionParams.texture = textures[parseInt(Math.random()*6)]
        if(FLOG === 0) {
            transition.update(sceneA,sceneB,true)
        }else if(FLOG === 1) {
            transition.update(sceneB,sceneC,true)
        }else if(FLOG === 2) {
            transition.update(sceneC,sceneD,true)
        }else if(FLOG === 3) {
            transition.update(sceneD,sceneA,true)
            FLOG = -1
        }
        FLOG ++
    })

    /*  **** ****        ****   ****/
    function render() {
        app.staus.update()
        requestAnimationFrame(render)
        //
        transition.render( clock.getDelta() )
    }
    render()