赞
踩
<!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>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。