three实现三维散光灯照射墙壁画册动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维散光灯照射墙壁画册动画效果代码
代码标签: three 三维 散光灯 照射 墙壁 画册 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> canvas {display:block} img {display:none} body{overflow:hidden} </style> </head> <body > <img id="elImg" src="//repo.bfw.wiki/bfwrepo/image/61132edb7fba9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90" alt="" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script > // Threejs stuff const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 100); const renderer = new THREE.WebGLRenderer(); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; // GPU % // BasicShadowMap 1x // PCFShadowMap 2x (default) // PCFSoftShadowMap 4x renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Controls stuff const controls = new THREE.OrbitControls(camera); controls.maxAzimuthAngle = Math.PI / 3; //hor controls.minAzimuthAngle = -Math.PI / 3; controls.maxPolarAngle = Math.PI / 180 * 160; //vert controls.minPolarAngle = Math.PI / 180 * 20; controls.update(); // Lights animation stuff const lights = []; const lightMoDirs = [1, 1, -1]; const lightMoSpeeds = [0.03, 0.05, 0.04]; (function tick() { requestAnimationFrame(tick); renderer.render(scene, camera); for (const [i, light] of lights.entries()) { const lightOldX = light.position.x; const lightNewX = light.position.x + lightMoDirs[i] * lightMoSpeeds[i]; if (lightNewX > 4 || lightNewX < -4) { lightMoDirs[i] *= -1; } light.position.x = lightNewX; } })(); // Events addEventListener("resize", () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }); // Main Flow preload().then(main); function preload() { return new Promise((res, rej) => { const imgsrc = elImg.src; new THREE.TextureLoader().load(imgsrc, res, undefined, rej); }); } function main(texture) { texture.minFilter = THREE.LinearMipMapLinearFilter; addWall(); addLights(addFrame(texture)); camera.position.set(-0.3, -0.5, 0.8); controls.update(); } function addWall() { const s = 100; const color = 0xaa6666; {// wall const geometry = new THREE.PlaneGeometry(s, s, 1, 1); const material = new THREE.MeshPhongMaterial({ color: color }); const object = new THREE.Mesh(geometry, material); object.castShadow = true; object.receiveShadow = true; scene.add(object); } {// cube "wrapping" the scene, i.e a room const geometry = new THREE.BoxGeometry(s, s, s); const material = new THREE.MeshPhongMaterial({ color: color }); material.side = THREE.DoubleSide; const object = new THREE.Mesh(geometry, material); object.castShadow = false; object.receiveShadow = true; scene.add(object); } }; function addFrame(texture) { const frameDepth = 0.01; //z const borderWidth = 0.05; //along x (/y) const borderDepth = frameDepth * 4; //thicker s.t. it casts shadow on board const borderColor = 0x222222; //if fullblack, absorb all light(no way) const frameBg = 0xffffff; //bg colo of picture(imagine if its translucent) const pictureScale = 0.8; //control amount of frame board to be seen const frameBBox = {}; //frame bbox, return object // frame max dim = 1 in webgl space let frameWidth, frameHeight; if (texture.image.width > texture.image.height) { frameWidth = 1; frameHeight = texture.image.height / texture.image.width; } else { frameHeight = 1; frameWidth = texture.image.width / texture.image.height; } {// picture plane const geometry = new THREE.PlaneGeometry(frameWidth * pictureScale, frameHeight * pictureScale, 1, 1); const material .........完整代码请登录后点击上方下载按钮下载查看
网友评论0