three实现三维星星旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维星星旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } canvas { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RGBELoader.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script> <script > !function () { "use strict"; let e, t, o, n, a, i, r, l, d, s, E, c = 5, m = 1, w = "", h = new THREE.Group(), p = new THREE.Group(); function R() { e.aspect = window.innerWidth / window.innerHeight, e.updateProjectionMatrix(), o.setSize(window.innerWidth, window.innerHeight); } function H() { requestAnimationFrame(H), n.update(), h.rotation.x += 0.003, h.rotation.y -= 0.005, h.rotation.z -= 0.002, p.rotation.x -= 0.002, p.rotation.y -= 0.005, p.rotation.z += 0.001, o.render(t, e); } !function () { const u = document.createElement("div"); document.body.appendChild(u), (t = new THREE.Scene()).background = 0, (o = new THREE.WebGLRenderer({ antialias: !0 })). setPixelRatio(window.devicePixelRatio), o.setSize(window.innerWidth, window.innerHeight), o.outputEncoding = THREE.sRGBEncoding, o.shadowMap.enabled = !0, u.appendChild(o.domElement), new THREE.RGBELoader().load( "//repo.bfw.wiki/bfwrepo/threemodel/leadenhall_market_1k.hdr", function (e) { e.mapping = THREE.EquirectangularReflectionMapping, e.flipY = !1, t.environment = e; }), (e = new THREE.PerspectiveCamera( 35, window.inn.........完整代码请登录后点击上方下载按钮下载查看
网友评论0