three实现中文三维柱状体数据排名对比动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现中文三维柱状体数据排名对比动画效果代码
代码标签: three 中文 三维 柱状体 数据 排名 对比 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D柱状图 - Three.js</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.umd.js"></script> <script> let scene, camera, renderer, bars = []; const barData = [ { height: 5, text: "第一", imageUrl: "//repo.bfw.wiki/bfwrepo/image/5f82b89590850.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { height: 9, text: "第二", imageUrl: "//repo.bfw.wiki/bfwrepo/image/5f82b89590850.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { height: 7, text: "第三", imageUrl: "//repo.bfw.wiki/bfwrepo/image/5f82b89590850.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { height: 2, text: "第四", imageUrl: "//repo.bfw.wiki/bfwrepo/image/5f82b89590850.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" }, { height: 6, text: "第五", imageUrl: "//repo.bfw.wiki/bfwrepo/image/5f82b89590850.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" } ]; function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // 光照 const sunLight = new THREE.DirectionalLight(0xffffaa, 1.2); sunLight.position.set(50, 100, 50); sunLight.castShadow = true; scene.add(sunLight); const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); // 天空 scene.background = new THREE.Color(0x87CEEB); //.........完整代码请登录后点击上方下载按钮下载查看
网友评论0