当前位置： 首页 > news >正文

3D词云图

news 2025/8/20 21:41:28

文章目录

  • 一：球体词云图
    • 1.效果展示
    • 2.HTML完整代码
  • 二：螺旋管道词云图
    • 1.效果展示
    • 2.HTML完整代码
  • 三：五角管道词云图
    • 1.效果展示
    • 2.HTML完整代码
  • 四：爱心词云图（彩蛋）
    • 1.效果展示
    • 2.HTML完整代码

一：球体词云图

1.效果展示

在这里插入图片描述

2.HTML完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>3D球体词云图</title><style>html,body {height: 100%;margin: 0;overflow: hidden;}body {font-family: Helvetica, sans-serif;position: relative;margin: 0;overflow: hidden;background-color: #000000;}body::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000000;}#container {width: 100%;height: 100%;}.word {width: auto;height: auto;text-align: center;cursor: default;font-size: 24px;font-weight: bold;padding: 10px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;transition: all 0.5s ease;}</style>
</head>
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script src="js/tween.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<script>var words = ["仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块"];var camera, scene, renderer;var controls;var objects = [];var targets = { sphere: [] };function createSphereLayout(objectsCount) {var vector = new THREE.Vector3();var targets = [];for (var i = 0; i < objectsCount; i++) {var phi = Math.acos(-1 + (2 * i) / objectsCount);var theta = Math.sqrt(objectsCount * Math.PI) * phi;var object = new THREE.Object3D();object.position.x = 800 * Math.cos(theta) * Math.sin(phi);object.position.y = 800 * Math.sin(theta) * Math.sin(phi);object.position.z = 800 * Math.cos(phi);vector.copy(object.position).multiplyScalar(2);object.lookAt(vector);targets.push(object);}return targets;}function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}init();animate();function init() {camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);camera.position.z = 3000;scene = new THREE.Scene();var vector = new THREE.Vector3();for (var i = 0; i < words.length; i++) {var element = document.createElement('div');element.className = 'word';element.style.color = getRandomColor();element.textContent = words[i];element.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';element.style.textShadow = '0 0 10px ' + getRandomColor();var object = new THREE.CSS3DObject(element);var radius = 2000;var theta = Math.random() * Math.PI * 2;var phi = Math.acos(2 * Math.random() - 1);object.position.x = radius * Math.sin(phi) * Math.cos(theta);object.position.y = radius * Math.sin(phi) * Math.sin(theta);object.position.z = radius * Math.cos(phi);object.rotation.x = Math.random() * Math.PI * 2;object.rotation.y = Math.random() * Math.PI * 2;object.rotation.z = Math.random() * Math.PI * 2;vector.copy(object.position).multiplyScalar(2);object.lookAt(vector);scene.add(object);objects.push(object);}targets.sphere = createSphereLayout(objects.length);transform(targets.sphere, 5000);renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);controls = new THREE.TrackballControls(camera, renderer.domElement);controls.rotateSpeed = 0.5;controls.minDistance = 500;controls.maxDistance = 6000;controls.addEventListener('change', render);window.addEventListener('resize', onWindowResize, false);}function transform(targets, duration) {TWEEN.removeAll();for (var i = 0; i < objects.length; i++) {var object = objects[i];var target = targets[i];new TWEEN.Tween(object.position).to({x: target.position.x,y: target.position.y,z: target.position.z}, duration).easing(TWEEN.Easing.Quadratic.InOut).start();new TWEEN.Tween(object.rotation).to({x: target.rotation.x,y: target.rotation.y,z: target.rotation.z}, duration).easing(TWEEN.Easing.Quadratic.InOut).start();}new TWEEN.Tween(this).to({}, duration * 1.5).onUpdate(render).start();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);render();}function animate() {requestAnimationFrame(animate);TWEEN.update();controls.update();objects.forEach(function (object) {var distance = camera.position.distanceTo(object.position);var element = object.element;var fontSize = Math.max(12, 72 - distance / 100);element.style.fontSize = fontSize + 'px';});}function render() {renderer.render(scene, camera);}
</script>
</body>
</html>

二：螺旋管道词云图

1.效果展示

在这里插入图片描述

2.HTML完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>螺旋管道词云图</title><style>html,body {height: 100%;margin: 0;overflow: hidden;}body {background-color: #000000;font-family: Helvetica, sans-serif;}#info {position: absolute;width: 100%;color: #ffffff;padding: 5px;font-family: Monospace;font-size: 13px;font-weight: bold;text-align: center;z-index: 1;}.element {width: 120px;height: 160px;text-align: center;cursor: default;display: flex;flex-direction: column;justify-content: center;padding: 10px;box-sizing: border-box;}.element .symbol {font-size: 20px;font-weight: bold;margin-bottom: 5px;word-break: break-word;}.element .details {font-size: 12px;word-break: break-word;}</style>
</head><body><script src="js/three.min.js"></script><script src="js/tween.min.js"></script><script src="js/TrackballControls.js"></script><script src="js/CSS3DRenderer.js"></script><div id="container"></div><script>var table = ["仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块","仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块"];var camera, scene, renderer;var controls;var objects = [];var targets = { helix: [] };function createHelixLayout(objectsCount) {var vector = new THREE.Vector3();var targets = [];for (var i = 0; i < objectsCount; i++) {var phi = i * 0.175 + Math.PI; var object = new THREE.Object3D();object.position.x = 900 * Math.sin(phi);object.position.y = -(i * 8) + 450; object.position.z = 900 * Math.cos(phi);vector.x = object.position.x * 2;vector.y = object.position.y;vector.z = object.position.z * 2;object.lookAt(vector);targets.push(object);}return targets;}function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}init();animate();function init() {camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);camera.position.z = 3000;scene = new THREE.Scene();for (var i = 0; i < table.length; i++) {var element = document.createElement('div');element.className = 'element';element.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';var symbol = document.createElement('div');symbol.className = 'symbol';symbol.textContent = table[i];symbol.style.color = getRandomColor();symbol.style.textShadow = '0 0 10px ' + getRandomColor();element.appendChild(symbol);var object = new THREE.CSS3DObject(element);object.position.x = Math.random() * 4000 - 2000;object.position.y = Math.random() * 4000 - 2000;object.position.z = Math.random() * 4000 - 2000;scene.add(object);objects.push(object);}targets.helix = createHelixLayout(objects.length);transform(targets.helix, 5000);renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);controls = new THREE.TrackballControls(camera, renderer.domElement);controls.rotateSpeed = 0.5;controls.minDistance = 500;controls.maxDistance = 6000;controls.addEventListener('change', render);window.addEventListener('resize', onWindowResize, false);}function transform(targets, duration) {TWEEN.removeAll();for (var i = 0; i < objects.length; i++) {var object = objects[i];var target = targets[i];new TWEEN.Tween(object.position).to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration).easing(TWEEN.Easing.Exponential.InOut).start();new TWEEN.Tween(object.rotation).to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration).easing(TWEEN.Easing.Exponential.InOut).start();}new TWEEN.Tween(this).to({}, duration * 2).onUpdate(render).start();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);render();}function animate() {requestAnimationFrame(animate);TWEEN.update();controls.update();}function render() {renderer.render(scene, camera);}</script>
</body>
</html>

三：五角管道词云图

1.效果展示

在这里插入图片描述

2.HTML完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>五角管道词云图</title><style>html,body {height: 100%;margin: 0;overflow: hidden;}body {background-color: #000000;font-family: Helvetica, sans-serif;}#info {position: absolute;width: 100%;color: #ffffff;padding: 5px;font-family: Monospace;font-size: 13px;font-weight: bold;text-align: center;z-index: 1;}.element {width: 120px;height: 160px;text-align: center;cursor: default;display: flex;flex-direction: column;justify-content: center;padding: 10px;box-sizing: border-box;border-radius: 10px;transition: all 0.3s ease;transform-style: preserve-3d;}.element .symbol {font-size: 20px;font-weight: bold;margin-bottom: 5px;word-break: break-word;color: #ffffff;}.element .details {font-size: 12px;word-break: break-word;color: #ffffff;}</style>
</head><body><script src="js/three.min.js"></script><script src="js/tween.min.js"></script><script src="js/TrackballControls.js"></script><script src="js/CSS3DRenderer.js"></script><div id="container"></div><script>var table = ["仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块","仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服"];var camera, scene, renderer;var controls;var objects = [];var targets = { helix: [] };function createTubeHelixLayout(objectsCount) {var vector = new THREE.Vector3();var targets = [];var radius = 600; var thickness = 300;var turns = 5; var height = 1000; for (var i = 0; i < objectsCount; i++) {var object = new THREE.Object3D();var theta = (i / objectsCount) * turns * Math.PI * 2;var layer = i % 5; var layerRadius = radius - (layer / 5) * thickness;object.position.x = layerRadius * Math.cos(theta);object.position.y = (i / objectsCount) * height - height/2;object.position.z = layerRadius * Math.sin(theta);vector.x = object.position.x * 2;vector.y = object.position.y;vector.z = object.position.z * 2;object.lookAt(vector);object.rotation.y = theta + Math.PI/2;var sizeFactor = 0.8 + (layer / 5) * 0.4;object.scale.set(sizeFactor, sizeFactor, sizeFactor);targets.push(object);}return targets;}function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}init();animate();function init() {camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);camera.position.z = 3000;scene = new THREE.Scene();for (var i = 0; i < table.length; i++) {var element = document.createElement('div');element.className = 'element';var symbol = document.createElement('div');symbol.className = 'symbol';symbol.textContent = table[i];symbol.style.color = getRandomColor();symbol.style.textShadow = '0 0 10px ' + getRandomColor();element.appendChild(symbol);var object = new THREE.CSS3DObject(element);object.position.x = Math.random() * 4000 - 2000;object.position.y = Math.random() * 4000 - 2000;object.position.z = Math.random() * 4000 - 2000;scene.add(object);objects.push(object);}targets.helix = createTubeHelixLayout(objects.length);transform(targets.helix, 5000);renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);controls = new THREE.TrackballControls(camera, renderer.domElement);controls.rotateSpeed = 0.5;controls.minDistance = 500;controls.maxDistance = 6000;controls.addEventListener('change', render);window.addEventListener('resize', onWindowResize, false);}function transform(targets, duration) {TWEEN.removeAll();for (var i = 0; i < objects.length; i++) {var object = objects[i];var target = targets[i];new TWEEN.Tween(object.position).to({ x: target.position.x, y: target.position.y, z: target.position.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();new TWEEN.Tween(object.rotation).to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();new TWEEN.Tween(object.scale).to({ x: target.scale.x, y: target.scale.y, z: target.scale.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();}new TWEEN.Tween(this).to({}, duration * 1.5).onUpdate(render).start();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);render();}function animate() {requestAnimationFrame(animate);TWEEN.update();controls.update();}function render() {renderer.render(scene, camera);}</script>
</body>
</html>

四：爱心词云图（彩蛋）

1.效果展示

在这里插入图片描述

2.HTML完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>爱心词云图</title><style>html,body {height: 100%;margin: 0;overflow: hidden;}body {background-color: #000000;font-family: Helvetica, sans-serif;}.element {width: 120px;height: 160px;text-align: center;cursor: default;display: flex;flex-direction: column;background-color: rgba(0, 0, 0, 0.3);justify-content: center;padding: 10px;box-sizing: border-box;}.element .symbol {font-size: 20px;font-weight: bold;margin-bottom: 5px;word-break: break-word;}.element .details {font-size: 12px;word-break: break-word;}</style>
</head>
<body><script src="js/three.min.js"></script><script src="js/tween.min.js"></script><script src="js/TrackballControls.js"></script><script src="js/CSS3DRenderer.js"></script><div id="container"></div><script>var table = ["仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块","仿生设计", "路况监控", "《缀术》", "祖冲之π", "柔性鳍面", "生态友好", "自然观", "文化共鸣", "天人合一", "宋代车船","能量循环", "模块化设计", "远程监控", "机械能转化", "东方智慧", "水下作业", "模块化装配", "水动力推进","生物运动", "哲学内核", "水陆一体化", "人机协作", "低能耗", "低噪音", "生态平衡", "历史对话", "《考工记》", "东方智慧","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","科技美学", "自然观", "鳍面波动", "垃圾清理", "结构修", "河床保护", "生态友好", "低噪音运行", "模块化设计","工程美学", "自主导航", "智能避障", "桥梁修复", "道器合一", "东方哲学", "天人合一", "自然规律", "生态平衡","仿生工程", "跨时空对话", "文化传承", "河流清理", "陆地巡逻", "协作创新", "技术突破", "问题解决", "挑战克服","团队协作", "未来导向", "持续优化", "精准设计", "动态调整", "知识传承", "智能机器人", "历史传承", "水陆一体化","自主维护", "低维护成本", "自然保护区", "应急救援", "智能部署", "环境治理", "生态监测", "驱动模块", "摄像头模块",];var camera, scene, renderer;var controls;var objects = [];var targets = { heart: [] };function createHeartLayout(objectsCount) {var vector = new THREE.Vector3();var targets = [];var scale = 800;for (var i = 0; i < objectsCount; i++) {var object = new THREE.Object3D();var theta = i * (2 * Math.PI) / objectsCount;var phi = Math.acos(2 * i / objectsCount - 1);var x = scale * Math.pow(Math.sin(theta), 3);var y = scale * (13 * Math.cos(theta) - 5 * Math.cos(2*theta) - 2 * Math.cos(3*theta) - Math.cos(4*theta)) / 16;var z = scale * Math.sin(phi) * 0.5;object.position.x = x;object.position.y = y;object.position.z = z;vector.x = object.position.x * 2;vector.y = object.position.y;vector.z = object.position.z * 2;object.lookAt(vector);targets.push(object);}return targets;}function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}init();animate();function init() {camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);camera.position.z = 3000;scene = new THREE.Scene();for (var i = 0; i < table.length; i++) {var element = document.createElement('div');element.className = 'element';element.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';var symbol = document.createElement('div');symbol.className = 'symbol';symbol.textContent = table[i];symbol.style.color = getRandomColor();symbol.style.textShadow = '0 0 10px ' + getRandomColor();element.appendChild(symbol);var object = new THREE.CSS3DObject(element);object.position.x = Math.random() * 4000 - 2000;object.position.y = Math.random() * 4000 - 2000;object.position.z = Math.random() * 4000 - 2000;scene.add(object);objects.push(object);}targets.heart = createHeartLayout(objects.length);transform(targets.heart, 5000);renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);controls = new THREE.TrackballControls(camera, renderer.domElement);controls.rotateSpeed = 0.5;controls.minDistance = 500;controls.maxDistance = 6000;controls.addEventListener('change', render);window.addEventListener('resize', onWindowResize, false);}function transform(targets, duration) {TWEEN.removeAll();for (var i = 0; i < objects.length; i++) {var object = objects[i];var target = targets[i];new TWEEN.Tween(object.position).to({ x: target.position.x, y: target.position.y, z: target.position.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();new TWEEN.Tween(object.rotation).to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();}new TWEEN.Tween(this).to({}, duration * 1.5).onUpdate(render).start();}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);render();}function animate() {requestAnimationFrame(animate);TWEEN.update();controls.update();}function render() {renderer.render(scene, camera);}</script>
</body>
</html>
http://www.lqws.cn/news/589825.html

相关文章：

  • 虚拟机配置过程中的知识点
  • shardingsphere5.2.1与SpringBoot3.X的版本冲突问题
  • 华为云Flexus+DeepSeek征文 | ​​华为云ModelArts Studio大模型与企业AI会议纪要场景的对接方案
  • 具身智能环境的构建和工作（具身智能入门四）
  • Oracle 进阶语法实战：从多维分析到数据清洗的深度应用​(第四课)
  • 贪心算法在C++中的应用与实践
  • Monorepo+Pnpm+Turborepo
  • 数据结构：链表
  • 认识 Spring AI
  • 华为云Flexus+DeepSeek征文｜基于华为云Flexus云服务的Dify 快速构建联网搜索助手
  • Zookeeper安装使用教程
  • 产品背景知识——API、SDK、Library、Framework、Protocol
  • guava限流器RateLimiter源码详解
  • SpringBoot -- 自动配置原理
  • 基于Python的GIS-RS多源数据处理(TIF/SHP/NC/...)【20250630】
  • P1967 [NOIP 2013 提高组] 货车运输
  • Spring生态：云原生与AI的革新突破
  • C++ 快速回顾（五）
  • 编程新手之环境搭建：node python
  • Excel转pdf实现动态数据绑定
  • 「Java案例」计算矩形面积
  • Linux随记（十九）
  • python+uniapp基于微信小程序的食堂菜品查询系统
  • [springboot系列] 探秘JUnit 5: Java单元测试利器
  • Spring 依赖注入：官方推荐方式及最佳实践
  • hono+postgresql+CURD
  • YOLOv13：最新的YOLO目标检测算法
  • Windows11系统中安装docker并配置docker镜像到pycharm中
  • 文旅数字孪生交付生态链：集成-交付-运维“三位一体”，100+案例助力行业数字化转型
  • 腾讯云空间，高性能显卡云，安装xinference报错，pip install 空间不够用了