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.144.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.144.js"></script> <script> ! function() { "use strict"; let t, e, n, i, o, a, r = 5, s = 0; function d() { t.aspect = window.innerWidth / window.innerHeight, t.updateProjectionMatrix(), n.setSize(window.innerWidth, window.innerHeight); }! function() { const E = document.createElement("div"); document.body.appendChild(E), (e = new THREE.Scene()).background = 0, (n = new THREE.WebGLRenderer({ antialias: !0 })).setPixelRatio(window.devicePixelRatio), n.setSize(window.innerWidth, window.innerHeight), n.outputEncoding = THREE.sRGBEncoding, E.appendChild(n.domElement); let w = 2 * r, c = 2 * r / (window.innerWidth / window.innerHeight); (t = new THREE.OrthographicCamera(-w, w, c, -c, .1, 10 * r)).position.set(0, .5 * r, r), t.lookAt(0, 0, 0); const u = new THREE.AmbientLight(16777215); e.add(u), a = new THREE.LineBasicMaterial({}); let l = function(t) { const e = new THREE.Group(); for (let n = 0; n < t.attributes.position.count - 1; n++) for (let i = n + 1; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0