three三维方块小人跟随鼠标动画效果
代码语言:html
所属分类:三维
代码描述:three三维方块小人跟随鼠标动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; background: #57068c88; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; align-content: center; } /* Name Badge */ html, body { margin: 0; padding: 0; overflow: hidden; } #name-card-container { position: fixed; bottom: 0px; height: 38px; width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } #name-card { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; font-family: Avenir; font-size: 14px; font-weight: 500; line-height: 38px; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.2); } #name-card > div.dark-background { background: #1d1e22; padding: 0 10px 0 20px; height: 100%; color: #fff; } #name-card > div.light-background { background: #fff; padding: 0 20px 0 10px; height: 100%; } #name-card span.emoji { font-size: 18px; } #name-card a { text-decoration: none; } #name-card a:hover { text-decoration: underline; } #name-card a:visited { text-decoration: none; } #name-card div.dark-background a { color: #fff; } #name-card div.light-background a { color: #000; } </style> </head> <body translate="no"> <canvas id="artboard"></canvas> <div id='name-card-container'> <div id='name-card'> <div class='dark-background'><span class='emoji'>👀</span><a href="https://bit.ly/creative_coding" target='_blank'>More pens</a> by <a href="https://bit.ly/codepen_yitliu" target='_blank'>@yitliu</a></div> <div class='light-background'><span class='emoji'>🕊</span><a href="https://bit.ly/twitter_yitliu" target='_blank'>Twitter</a></div> </div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script> <script > //colors var col_primary = 0x57068c; var scene = new THREE.Scene(); var h = window.innerHeight, w = window.innerWidth; var aspectRatio = w / h, fieldOfView = 25, nearPlane = 0.1, farPlane = 1000; var camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane); var renderer = new THREE.WebGLRenderer({ canvas: artboard, alpha: true, antialias: true }); renderer.setSize(w, h); renderer.shadowMapEnabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); //set atomic unit // var au=Math.round(Math.min(w,h)/800); // au=Math.max(au,1); // console.log("atomic unit: "+ au); //camera camera.position.set(40, 1, 0); camera.lookAt(new THREE.Vector3(0, 0, 0)); //lights, 3 point lighting var light = new THREE.AmbientLight(col_primary, 0.5); var keyLight = new THREE.DirectionalLight(col_primary, 1); keyLight.position.set(10, 15, 10); keyLight.castShadow = true; var fillLight = new THREE.DirectionalLight(col_primary, 0.7); fillLight.position.set(10, 10, -10); var backLight = new THREE.DirectionalLight(col_primary, 0.4); backLight.position.set(-10, 0, 0); scene.add(light); scene.add(keyLight); scene.add(fillLight); scene.add(backLight); //axis // var axesHelper = new THREE.AxesHelper( 50 ); // scene.add( axesHelper ); //materials var material = new THREE.MeshLambertMaterial({ color: 0xffffff }); //plane var geo_plane = new THREE.BoxGeometry(10, 1, 10); var material_plane = new THREE.ShadowMaterial({ opacity: 0.4 }); var plane = new THREE.Mesh(geo_plane, material_plane); plane.position.set(0, -4.8, 0); plane.receiveShadow =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0