一：球体词云图
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>