three场景过渡切换

之前使用的是box去模拟天空盒

现在直接使用场景去切换

 示例

ys-three

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>场景切换</title>
    <link rel="stylesheet" href="../../plugins/ys/ys.min.css">
    <link rel="stylesheet" href="../../css/ysThree/pageStyle.css">
</head>
<body>
<div class="ys-absolute-container" id="box" style="overflow: hidden"></div>
<div class="fix-btns">
    <span class="ys-btn ys-btn-warm ys-btn-sm  tips-btn">小记</span>
    <span class="ys-btn ys-btn-sm  change-scene">下一个场景</span>
</div>
<div class="tips-container ys-absolute-container">
    <div class="ys-tit">场景切换</div>
    <div class="ys-block"></div>
</div>

</body>
<script src="../../plugins/ys/ys.min.js"></script>
<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/createJs/tween.min.js"></script>
<script src="../../plugins/threeLibrary/js/libs/stats.min.js"></script>
<script src="../../plugins/ysThree/ysThree.js"></script>
<script>
    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()
</script>
<!--此脚本与案例无关 可忽略-->
<script src="../../js/ysThree/pageJs.js"></script>
</html>
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跃焱邵隼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值