three.js背景图用视频纹理

最新推荐文章于 2024-12-03 13:22:16 发布

置顶废柴小z

最新推荐文章于 2024-12-03 13:22:16 发布

阅读量2.4k

点赞数

分类专栏： Three&webGL&laya&babylon&Unity 文章标签： javascript 音视频前端

本文链接：https://blog.youkuaiyun.com/qq_34568700/article/details/122493487

版权

Three&webGL&laya&babylon&Unity 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个使用Three.js创建的3D场景应用案例，通过加载不同的3D模型和纹理实现了一个抢红包的游戏场景。该场景中包括了动态背景、多个3D模型以及平面红包元素，所有元素都在场景中动态移动，提供了丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抢红包</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
</body>
<script src="./js/three.js"></script>
<script src="./js/loaders/GLTFLoader.js"></script>
<script>
    var winWidth = window.innerWidth,winHeight = window.innerHeight;
    var scene = new THREE.Scene();
    var gltfLoader = new GLTFLoader(),textureLoader = new THREE.TextureLoader();
    var bg = textureLoader.load('./bg.jpg');
    scene.background = bg;
    // var camera = new THREE.PerspectiveCamera(75,winWidth / winHeight,0.1, 100);
    // camera.position.set(0,0,10);
    // camera.lookAt(new THREE.Vector3(0,0,0));
    var camera = new THREE.OrthographicCamera(winWidth / -2, winWidth / 2, winHeight / 2, winHeight/-2, 0.001,5000);
    scene.add(new THREE.AmbientLight(0xffffff, 1));
    var models = [];
    var moneys = [];

    gltfLoader.load('./models/denglong_2022_3.gltf', (obj) => {
        let m = obj.scene;
        // m.scale.set(5,5,5);
        m.scale.set(500,500,500);
        addModel(m, 20, 'model');
    });
    gltfLoader.load('./models/denglong2022_A.gltf', (obj) => {
        let m = obj.scene;
        m.position.set(4,0,0)
        // m.scale.set(20,20,20);
        m.scale.set(2000,2000,2000);
        addModel(m, 20, 'model');
    });

    function addModel(m,num,type){
        for(let i = 0; i < num; i++) {
            let nm = m.clone();
            // let x = Math.random() * 40 - 20;
            // let y = Math.random() * 20 - 15;
            // let z = -Math.random() * 10;
              let x = Math.random() * 4000 - 2000;
              let y = Math.random() * 2000 - 1500;
              let z = -(Math.random() * 4000 + 400);// 正交相机z值不论怎么设置大小都没区别,不过会影响模型的重叠时的显示前后层级
              nm.position.set(x,y,z);
            if (type === 'model') {
                let s = (Math.random() * 500 + 500);
                nm.scale.set(s,s,s);
                models.push(nm);
            } else {
                let s = Math.random()*0.5 + 0.5;
                nm.scale.set(s,s,s);
                moneys.push(nm);
            }
            scene.add(nm);
            
        }
        // console.log('mPos', JSON.stringify(mPos))
    }
    createMoney()
    function createMoney(){
        var p1 = new THREE.PlaneGeometry(100,140,1);
        var t1 = textureLoader.load('https://houtaicdn.alva.com.cn/medias/resources/wechat/arread/activity/teec2/hongbao1.png');
        var mat1 = new THREE.MeshBasicMaterial({map: t1})
        var m1 = new THREE.Mesh(p1,mat1);
        addModel(m1, 20, 'money');

        var p2 = new THREE.PlaneGeometry(100,140,1);
        var t2 = textureLoader.load('https://houtaicdn.alva.com.cn/medias/resources/wechat/arread/activity/teec2/hongbao2.png');
        var mat2 = new THREE.MeshBasicMaterial({map: t1})
        var m2 = new THREE.Mesh(p1,mat1);
        addModel(m2, 20, 'money');
    }

    // vdBg();
    function vdBg(){
        function setVideoStyle(elem) {
            elem.style.position = "absolute";
            elem.style.top = 0;
            elem.style.left = 0;
            elem.width = winWidth;
            elem.height = winHeight;
            // elem.classList.add('.camera-style');
        }
        var vd = document.createElement('video');
        vd.setAttribute('autoplay','');
        vd.setAttribute('muted','');
        vd.setAttribute('playsinline','');
        setVideoStyle(vd);
        document.body.appendChild(vd)

        navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                width: {ideal: winWidth},
                height: {ideal: winHeight},
                aspectRatio: {ideal: winWidth / winHeight},
                facingMode: 'environment'
            }
        }).then(stream => {
            vd.srcObject = stream;
            vd.onloadedmetadata = e => {
                vd.play();
                var vdCanvas = new THREE.VideoTexture(vd);
                scene.background = vdCanvas;
            }
        }).catch(err => {
        })

    }

    var renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        // preserveDrawingBuffer: true
    });
    renderer.setSize(winWidth,winHeight);
    renderer.domElement.style.position = 'relative';
    renderer.domElement.style.zIndex = 100;
    document.body.appendChild(renderer.domElement);

    ani()
    function ani(){
        renderer.render(scene,camera);
        requestAnimationFrame(ani);

        models.forEach(item => {
            // item.position.y += 0.01;
            item.position.y += 1;
            item.rotation.y += 0.01;
            if (item.position.y > 1000) {
                item.position.y = -1000;
            }
        });
        moneys.forEach(item => {
            item.position.y -= 1;
            if (item.position.y < -1000) {
                item.position.y = 1000;
            }
        })
    }
</script>
</html>