three实现三维可打开摄像头的mac笔记本电脑代码
代码语言:html
所属分类:三维
代码描述:three实现三维可打开摄像头的mac笔记本电脑代码,可设置笔记本角度和内容滚动,还可以将本地摄像头投影到笔记本电脑屏幕上。
代码标签: three 三维 打开 摄像头 mac 笔记本 电脑 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { overflow: hidden; padding: 0; margin: 0; } .container { position: relative; overflow: hidden; background: #C6FFDD; background: linear-gradient(120deg, #f7797d, #FBD786, #C6FFDD); height: 100vh; } canvas { display: block; width: 100%; cursor: grab; } .lil-gui { --width: 450px; --name-width: 60%; max-width: 90%; --widget-height: 20px; font-size: 15px; --input-font-size: 15px; --padding: 10px; --spacing: 10px; --slider-knob-width: 5px; --background-color: rgba(5, 0, 15, .8); --widget-color: rgba(255, 255, 255, .3); --focus-color: rgba(255, 255, 255, .4); --hover-color: rgba(255, 255, 255, .5); --font-family: monospace; } </style> </head> <body translate="no"> <div class="container"> <canvas id="laptop"></canvas> </div> <script type="importmap">{ "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/151/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/151/jsm/" } } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script type="module"> import * as THREE from "three"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { GUI } from "//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js"; // ======================================================= // Globals const canvasEl = document.querySelector("#laptop"); const videoEl = document.createElement("video"); let mainTl, laptopAppearTl, laptopOpeningTl, screenOnTl, cameraOnTl, textureScrollTl, floatingTl; let scene, camera, renderer, orbit; let darkPlasticMaterial, cameraMaterial, baseMetalMaterial, logoMaterial, screenMaterial, keyboardMaterial; let macGroup, lidGroup, bottomGroup, screenMesh, lightHolder, screenLight; let screenImageTexture, screenCameraTexture; let openingControl, contentScrollControl; const controlParams = { cameraOn: false, openingProgress: 0, contentScrollProgress: 0 }; const screenSize = [29.4, 20]; // ======================================================= // Start the app initScene(); createMaterials(); // connectToWebcam(); // if you set the webcam in advance const modelLoader = new GLTFLoader(); modelLoader.load( "//repo.bfw.wiki/bfwrepo/threemodel/mac/mac-noUv.glb", glb => { parseModel(glb); addScreen(); addKeyboard(); createControls(); createTimelines(); mainTl.play(0); render(); updateSceneSize(); window.addEventListener("resize", () => updateSceneSize()); }); // ======================================================= // Three.js stuff function initScene() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 1000); camera.position.z = 75; renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: canvasEl }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); const ambientLight = new THREE.AmbientLight(0xffffff, .2); scene.add(ambientLight); lightHolder = new THREE.Group(); scene.add(lightHolder); const light = new THREE.PointLight(0xFFF5E1, .8); light.position.set(0, 5, 50); lightHolder.add(light); orbit = new OrbitControls(camera, renderer.domElement); orbit.minDistance = 45; orbit.maxDistance = 120; orbit.enablePan = false; orbit.enableDamping = true; macGroup = new THREE.Group(); macGroup.position.z = -10; scene.add(macGroup); lidGroup = new THREE.Group(); macGroup.add(lidGroup); bottomGroup = new THREE.Group(); macGroup.add(bottomGroup); } function updateSceneSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix().........完整代码请登录后点击上方下载按钮下载查看
网友评论0