three实现三维可交互可爱小牛线吊在空中代码
代码语言:html
所属分类:三维
代码描述:three实现三维可交互可爱小牛线吊在空中代码
代码标签: three 三维 交互 可爱 小牛 线 吊 空中 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:800); #world { background: #222626; position:absolute; width:100%; height:100%; overflow:hidden; } #instructions{ position:absolute; width:100%; top:50%; margin: auto; margin-top:100px; font-family:'Open Sans', sans-serif; color:#ffffff; font-size:.9em; text-transform: uppercase; text-align : center; } .lightInstructions { color:#6fbf98; font-size:.8em; } #credits{ position:absolute; width:100%; margin: auto; bottom:0; margin-bottom:20px; font-family:'Open Sans', sans-serif; color:#3d565e; font-size:0.7em; text-transform: uppercase; text-align : center; } #credits a { color:#3d565e; } </style> </head> <body translate="no"> <div id="world"></div> <div id="instructions">Press and drag <br><span class="lightInstructions">to rotate the scene</span></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.72.js"></script> <script > //THREEJS RELATED VARIABLES var scene, camera, controls, fieldOfView, aspectRatio, nearPlane, farPlane, shadowLight, backLight, light, renderer, container; //SCENE //SCREEN VARIABLES var HEIGHT, WIDTH, windowHalfX, windowHalfY, mousePos = { x: 0, y: 0 }; //INIT THREE JS, SCREEN AND MOUSE EVENTS function init() { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x363d3d, -1, 3000); HEIGHT = window.innerHeight; WIDTH = window.innerWidth; aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 2000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane); camera.position.z = 800; camera.position.y = 300; camera.lookAt(new THREE.Vector3(0, 0, 0)); renderer = new THREE.WebGLRenderer({ alpha: true, antia.........完整代码请登录后点击上方下载按钮下载查看
网友评论0