three实现webgl奥运五环标识三维效果代码
代码语言:html
所属分类:三维
代码描述:three实现webgl奥运五环标识三维效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script> <style> body { font-family: Monospace; background: white; margin: 0px; overflow: hidden; } h1 { font-size: 33px; color: #202022; font-family: Montserrat, sans-serif; position: absolute; left: 50%; top: 20%; text-transform: uppercase; font-weight: normal; margin-left: -276px; margin-top: -20px; pointer-events: none; } h1 strong { font-weight: 700; } h1 em { font-family: 'Playfair Display', serif; text-transform: lowercase; font-style: italic; } </style> </head> <body> <h1><strong>WebGL</strong> Olympics Games Logo</h1> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.58.js"></script> <script> if (!Modernizr.webgl) alert('Your browser dosent support WebGL'); var container, stats; var camera, scene, renderer; var mouseX = 0,mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; init(); animate(); function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); camera.position.y = 400; scene = new THREE.Scene(); var light, object, object2; scene.add(new THREE.AmbientLight(0xffffff, 0.8)); light = new THREE.DirectionalLight(0xffffff, 0.2); light.position.set(1, 1, 1); scene.add(light); var material = new THREE.MeshLambertMaterial({ ambient: 0x0885c2, side: THREE.DoubleSide }); var material2 = new THREE.MeshLambertMaterial({ ambient: 0x000000, side: THREE.DoubleSide }); var material3 = new THREE.MeshLambertMaterial({ a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0