threejs实现的3D柱形图_threejs立体柱状图资源-CSDN文库

共3个文件

js：2个

html：1个

threejs

3D柱状图

html

5星 · 超过95%的资源需积分: 9 153 浏览量 2022-12-18 19:24:25 上传评论收藏 221KB ZIP 举报

在本文中，我们将深入探讨如何使用Three.js库在HTML/JavaScript环境中实现3D柱状图。Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。通过结合HTML、JavaScript和Three.js，我们可以创建出交互式且引人入胜的数据可视化应用。 `columnchart.html`是主HTML文件，它包含了页面结构和JavaScript脚本引用。在这个文件中，你会看到一个`<canvas>`元素，它是Three.js渲染3D场景的基础。同时，`<script>`标签用于引入Three.js库以及`OrbitControls.js`，后者是Three.js的一个插件，提供了对3D视图的轨道控制，使得用户可以通过鼠标操作来旋转、缩放和平移视角。 `three.js`是Three.js库的核心文件，它提供了构建3D模型、光照、材质、相机等所有必要的功能。在这个项目中，我们将会用到Three.js的几何体、材质、光源和相机对象来创建3D柱状图。 `OrbitControls.js`是Three.js的一个附加组件，它提供了一套完整的鼠标交互控制，使用户能够自由地查看3D场景。这个文件包含了处理鼠标事件和更新相机位置的代码，对于制作具有良好用户体验的3D可视化至关重要。实现3D柱状图的主要步骤包括： 1. **初始化场景**：我们需要创建一个Three.js的`Scene`对象，它是所有3D物体的容器。然后，创建一个`Camera`对象来定义观察者的位置，并设置其视角、纵横比和近远裁剪平面。 2. **创建几何体**：3D柱状图的每个柱子都需要一个几何体来表示。Three.js提供了多种几何体，如`BoxGeometry`，可以用来创建立方体，适合做柱状图。每个柱子的宽度、高度和深度（在3D空间中的z轴位置）都需要根据数据进行计算。 3. **应用材质**：使用`MeshBasicMaterial`或`MeshLambertMaterial`等材质，为柱子添加颜色和表面效果。可以通过调整颜色、透明度等属性，使柱子看起来更美观。 4. **组合物体**：将每个柱子的几何体与材质结合成一个`Mesh`对象，并将其添加到场景中。 5. **添加光源**：为了使3D图形有立体感，我们需要至少一个光源。Three.js提供了点光源、平行光和聚光灯等多种光源类型，可以根据需求选择。 6. **渲染场景**：设置渲染循环，使用`renderer.render(scene, camera)`定期更新屏幕上的图像。 7. **添加交互控制**：导入并实例化`OrbitControls`，将其关联到相机，让用户可以自由地查看柱状图。 8. **数据绑定**：将数据绑定到柱子的高度上，这样当数据变化时，柱子的高度也会相应改变，实现动态可视化。通过以上步骤，我们可以利用Three.js在HTML/JavaScript环境中创建一个交互式的3D柱状图，这在数据可视化、报表展示等领域有着广泛的应用。这个项目不仅展示了Three.js的基本用法，还展示了如何将2D数据转换为3D视觉效果，增强了数据的表达力。

资源推荐

资源详情

资源评论

收起资源包目录

columnchart.zip （3个子文件）

OrbitControls.js 24KB

three.js 1.03MB

columnchart.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { margin: 0; overflow: hidden; } </style> <script src="three.js"></script> <script src="OrbitControls.js"></script> </head> <body> <div id="mydiv" style="width: 600px;height: 500px;margin:auto;"> </div> <script> const pointer = new THREE.Vector2(); const raycaster = new THREE.Raycaster(); const WIDTH = 600; const HEIGHT = 500; const data = [ [55 + 10, 20], [50 + 10, 10], [60 + 10, 10], [10 + 10, 20], [40 + 10, 30], [0 + 10, 40], ]; let maxY = 0n data.forEach(d => { if (d[0] + d[1] > maxY) { maxY = d[0] + d[1] } }); var scene = new THREE.Scene(); const light = new THREE.DirectionalLight(0xffffff, 0.6) light.lookAt(0, 0, 0) light.position.setX(WIDTH + 300) light.position.setY(0) light.position.setZ(380) scene.add(light); const light2 = new THREE.DirectionalLight(0xffffff, 0.6) light2.lookAt(0, 0, 0) light2.position.setX(0) light2.position.setY(HEIGHT + 400) light2.position.setZ(400) scene.add(light2); const light3 = new THREE.AmbientLight(0x404040); // soft white light scene.add(light3); const barWidth = Math.floor(WIDTH / data.length * 0.691 * 0.70721); data.forEach((d, i) => { const group = new THREE.Group() let box1 = new THREE.BoxBufferGeometry(barWidth, HEIGHT / maxY * d[0], barWidth, 1, 1, 1) let box2 = new THREE.BoxBufferGeometry(barWidth, HEIGHT / maxY * d[1], barWidth, 1, 1, 1) box1.computeBoundingBox(); box2.computeBoundingBox(); const count = box1.attributes.position.count; const color1 = new THREE.Color() const color2 = new THREE.Color() box1.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3)); box2.addAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3)); const colors1 = box1.attributes.color; const colors2 = box2.attributes.color; for (let i = 0; i < count; i++) { const x = box1.attributes.position.getX(i); const y = box1.attributes.position.getY(i); const z = box1.attributes.position.getZ(i); //console.log(i, x, y, z) if (y > 0) { color1.setHex(0x1C8CFF) color2.setHex(0x00FFC2) } else { color1.setHex(0x093783) color2.setHex(0x117B5C) } colors1.setXYZ(i, color1.r, color1.g, color1.b) colors2.setXYZ(i, color2.r, color2.g, color2.b) } const material1 = new THREE.MeshLambertMaterial({ transparent: true, opacity: 0.91, // side: THREE.DoubleSide, vertexColors: THREE.VertexColors }) const boxMesh1 = new THREE.Mesh(box1, material1) const boxMesh2 = new THREE.Mesh(box2, material1.clone()) boxMesh1.morphTargetInfluences boxMesh2.position.y = HEIGHT / maxY * d[0] / 2 + HEIGHT / maxY * d[1] / 2 group.add(boxMesh1) group.add(boxMesh2) group.position.x = i * WIDTH / data.length + (WIDTH / data.length / 2) group.position.y = HEIGHT / maxY * d[0] / 2 group.position.z = -barWidth / 2 group.rotateY(-Math.PI / 4) scene.add(group); }) // var axes = new THREE.AxisHelper(1030); // scene.add(axes); const camera = new THREE.OrthographicCamera(0, WIDTH, HEIGHT, 0) camera.position.z = 1000 camera.position.y = 412 camera.rotateX(-Math.PI / 8) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setSize(WIDTH, HEIGHT) document.getElementById('mydiv').appendChild(renderer.domElement); //document.body.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement) const rayCastOrigin = new THREE.Vector3(WIDTH / 2, HEIGHT, 800) let INTERSECTED = null; function animate() { requestAnimationFrame(animate) rayCastOrigin.transformDirection raycaster.setFromCamera(pointer, camera) //console.log(scene.children,'scene.children'); const intersects = raycaster.intersectObjects(scene.children, true); //console.log(intersects,'intersects'); if (intersects.length > 0) { if (INTERSECTED != intersects[0].object) { if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); INTERSECTED = intersects[0].object; INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); INTERSECTED.material.emissive.setHex(0x444444); } } else { if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); INTERSECTED = null; } controls.update() renderer.render(scene, camera) } animate(); document.getElementById('mydiv').addEventListener('pointermove', e => { pointer.x = (e.offsetX - WIDTH / 2) / (WIDTH / 2) pointer.y = (e.offsetY - HEIGHT / 2) / (HEIGHT / 2) * -1 }) </script> </body> </html>

评论收藏

内容反馈