CSS3DRenderer是 Three.js 中的一个渲染器，它允许使用标准 HTML 和 CSS 来渲染 3D 对象，而不是通过 WebGL 渲染。这对于在 3D 场景中集成 DOM 元素非常有用，比如制作交互式用户界面、文本或其他基于 DOM 的内容，使其能够以 3D 形式展示。
CSS3DRenderer 有三个方法
// CSS3DRenderer()
<template>
<div id="parkingLot" ref="parkingLot">
<div id="menu">
<button id="table">TABLE</button>
<button id="sphere">SPHERE</button>
<button id="helix">HELIX</button>
<button id="grid">GRID</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from 'three';
import hdrImg from "@public/hdr/bgImage.hdr"
import imgPng from "@public/rg.png"
import person from "@public/person.jpg"
import TWEEN from 'three/addons/libs/tween.module.js';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
const parkingLot = ref();
onMounted(async () => {
// 获取 DOM 元素，用于渲染 Three.js 场景
const DOMEl = parkingLot.value;
// 获取 DOM 元素的宽度和高度，以确保渲染器大小与容器匹配
const width = DOMEl.clientWidth;
const height = DOMEl.clientHeight;
// 创建 CSS3DRenderer（适用于 HTML 和 CSS 元素的渲染器）
const renderer = new CSS3DRenderer();
renderer.setSize(width, height); // 设置渲染器的宽度和高度
DOMEl.appendChild(renderer.domElement); // 将渲染器的 DOM 元素添加到容器中
// 创建 Three.js 场景
const scene = new THREE.Scene();
// 创建透视摄像机，视角为 75 度，设置宽高比，以及近远平面
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(0, 80, 0); // 将摄像机放置在场景的上方
camera.lookAt(0, 0, 0); // 让摄像机朝向场景中心（0, 0, 0）
// 定义元素周期表数据，每组数据包含 5 个字段：符号、名称、质量、列、行
const table = [
'H', 'Hydrogen', '1.00794', 1, 1,
'He', 'Helium', '4.002602', 18, 1,
'Li', 'Lithium', '6.941', 1, 2,
'Be', 'Beryllium', '9.012182', 2, 2,
'B', 'Boron', '10.811', 13, 2,
'C', 'Carbon', '12.0107', 14, 2,
'N', 'Nitrogen', '14.0067', 15, 2,
'O', 'Oxygen', '15.9994', 16, 2,
'F', 'Fluorine', '18.9984032', 17, 2,
'Ne', 'Neon', '20.1797', 18, 2,
'Na', 'Sodium', '22.98976...', 1, 3,
'Mg', 'Magnesium', '24.305', 2, 3,
'Al', 'Aluminium', '26.9815386', 13, 3,
'Si', 'Silicon', '28.0855', 14, 3,
'P', 'Phosphorus', '30.973762', 15, 3,
'S', 'Sulfur', '32.065', 16, 3,
'Cl', 'Chlorine', '35.453', 17, 3,
'Ar', 'Argon', '39.948', 18, 3,
'K', 'Potassium', '39.948', 1, 4,
'Ca', 'Calcium', '40.078', 2, 4,
'Sc', 'Scandium', '44.955912', 3, 4,
'Ti', 'Titanium', '47.867', 4, 4,
'V', 'Vanadium', '50.9415', 5, 4,
'Cr', 'Chromium', '51.9961', 6, 4,
'Mn', 'Manganese', '54.938045', 7, 4,
'Fe', 'Iron', '55.845', 8, 4,
'Co', 'Cobalt', '58.933195', 9, 4,
'Ni', 'Nickel', '58.6934', 10, 4,
'Cu', 'Copper', '63.546', 11, 4,
'Zn', 'Zinc', '65.38', 12, 4,
'Ga', 'Gallium', '69.723', 13, 4,
'Ge', 'Germanium', '72.63', 14, 4,
'As', 'Arsenic', '74.9216', 15, 4,
'Se', 'Selenium', '78.96', 16, 4,
'Br', 'Bromine', '79.904', 17, 4,
'Kr', 'Krypton', '83.798', 18, 4,
'Rb', 'Rubidium', '85.4678', 1, 5,
'Sr', 'Strontium', '87.62', 2, 5,
'Y', 'Yttrium', '88.90585', 3, 5,
'Zr', 'Zirconium', '91.224', 4, 5,
'Nb', 'Niobium', '92.90628', 5, 5,
'Mo', 'Molybdenum', '95.96', 6, 5,
'Tc', 'Technetium', '(98)', 7, 5,
'Ru', 'Ruthenium', '101.07', 8, 5,
'Rh', 'Rhodium', '102.9055', 9, 5,
'Pd', 'Palladium', '106.42', 10, 5,
'Ag', 'Silver', '107.8682', 11, 5,
'Cd', 'Cadmium', '112.411', 12, 5,
'In', 'Indium', '114.818', 13, 5,
'Sn', 'Tin', '118.71', 14, 5,
'Sb', 'Antimony', '121.76', 15, 5,
'Te', 'Tellurium', '127.6', 16, 5,
'I', 'Iodine', '126.90447', 17, 5,
'Xe', 'Xenon', '131.293', 18, 5,
'Cs', 'Caesium', '132.9054', 1, 6,
'Ba', 'Barium', '132.9054', 2, 6,
'La', 'Lanthanum', '138.90547', 4, 9,
'Ce', 'Cerium', '140.116', 5, 9,
'Pr', 'Praseodymium', '140.90765', 6, 9,
'Nd', 'Neodymium', '144.242', 7, 9,
'Pm', 'Promethium', '(145)', 8, 9,
'Sm', 'Samarium', '150.36', 9, 9,
'Eu', 'Europium', '151.964', 10, 9,
'Gd', 'Gadolinium', '157.25', 11, 9,
'Tb', 'Terbium', '158.92535', 12, 9,
'Dy', 'Dysprosium', '162.5', 13, 9,
'Ho', 'Holmium', '164.93032', 14, 9,
'Er', 'Erbium', '167.259', 15, 9,
'Tm', 'Thulium', '168.93421', 16, 9,
'Yb', 'Ytterbium', '173.054', 17, 9,
'Lu', 'Lutetium', '174.9668', 18, 9,
'Hf', 'Hafnium', '178.49', 4, 6,
'Ta', 'Tantalum', '180.94788', 5, 6,
'W', 'Tungsten', '183.84', 6, 6,
'Re', 'Rhenium', '186.207', 7, 6,
'Os', 'Osmium', '190.23', 8, 6,
'Ir', 'Iridium', '192.217', 9, 6,
'Pt', 'Platinum', '195.084', 10, 6,
'Au', 'Gold', '196.966569', 11, 6,
'Hg', 'Mercury', '200.59', 12, 6,
'Tl', 'Thallium', '204.3833', 13, 6,
'Pb', 'Lead', '207.2', 14, 6,
'Bi', 'Bismuth', '208.9804', 15, 6,
'Po', 'Polonium', '(209)', 16, 6,
'At', 'Astatine', '(210)', 17, 6,
'Rn', 'Radon', '(222)', 18, 6,
'Fr', 'Francium', '(223)', 1, 7,
'Ra', 'Radium', '(226)', 2, 7,
'Ac', 'Actinium', '(227)', 4, 10,
'Th', 'Thorium', '232.03806', 5, 10,
'Pa', 'Protactinium', '231.0588', 6, 10,
'U', 'Uranium', '238.02891', 7, 10,
'Np', 'Neptunium', '(237)', 8, 10,
'Pu', 'Plutonium', '(244)', 9, 10,
'Am', 'Americium', '(243)', 10, 10,
'Cm', 'Curium', '(247)', 11, 10,
'Bk', 'Berkelium', '(247)', 12, 10,
'Cf', 'Californium', '(251)', 13, 10,
'Es', 'Einstenium', '(252)', 14, 10,
'Fm', 'Fermium', '(257)', 15, 10,
'Md', 'Mendelevium', '(258)', 16, 10,
'No', 'Nobelium', '(259)', 17, 10,
'Lr', 'Lawrencium', '(262)', 18, 10,
'Rf', 'Rutherfordium', '(267)', 4, 7,
'Db', 'Dubnium', '(268)', 5, 7,
'Sg', 'Seaborgium', '(271)', 6, 7,
'Bh', 'Bohrium', '(272)', 7, 7,
'Hs', 'Hassium', '(270)', 8, 7,
'Mt', 'Meitnerium', '(276)', 9, 7,
'Ds', 'Darmstadium', '(281)', 10, 7,
'Rg', 'Roentgenium', '(280)', 11, 7,
'Cn', 'Copernicium', '(285)', 12, 7,
'Nh', 'Nihonium', '(286)', 13, 7,
'Fl', 'Flerovium', '(289)', 14, 7,
'Mc', 'Moscovium', '(290)', 15, 7,
'Lv', 'Livermorium', '(293)', 16, 7,
'Ts', 'Tennessine', '(294)', 17, 7,
'Og', 'Oganesson', '(294)', 18, 7
];
const objects = [];
const targets = { table: [], sphere: [], helix: [], grid: [] };
// 使用 for 循环遍历 `table` 数组，按 5 个元素为一组进行处理
// `i += 5` 使得每次跳跃 5 个元素，处理一组数据
for (let i = 0; i < table.length; i += 5) {
// 创建一个 `div` 元素，作为每个 "元素" 的容器
const element = document.createElement('div');
element.className = 'element';
// 设置元素的背景颜色，背景色的透明度通过 Math.random() 随机设置，范围在 0.25 到 0.75 之间
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
// 创建一个 `div` 元素，用于显示编号
const number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1; // 根据 i 的值，计算元素的编号
element.appendChild(number); // 将编号添加到 `element` 元素中
// 创建一个 `div` 元素，用于显示符号（来自 `table[i]`）
const symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = table[i]; // `table[i]` 存储了符号
element.appendChild(symbol); // 将符号添加到 `element` 元素中
// 创建一个 `div` 元素，用于显示详细信息（来自 `table[i+1]` 和 `table[i+2]`）
const details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i + 1] + '<br>' + table[i + 2]; // 显示 `table[i+1]` 和 `table[i+2]` 的内容
element.appendChild(details); // 将详细信息添加到 `element` 元素中
// 将 `element` 转换为一个 Three.js CSS3DObject 对象
const objectCSS = new CSS3DObject(element);
// 设置 `objectCSS` 的随机位置，使它在 3D 空间中随机分布
objectCSS.position.x = Math.random() * 4000 - 2000; // X 轴随机位置，范围在 -2000 到 2000 之间
objectCSS.position.y = Math.random() * 4000 - 2000; // Y 轴随机位置，范围在 -2000 到 2000 之间
objectCSS.position.z = Math.random() * 4000 - 2000; // Z 轴随机位置，范围在 -2000 到 2000 之间
// 将 `objectCSS` 添加到 Three.js 场景中
scene.add(objectCSS);
// 将 `objectCSS` 存入 `objects` 数组，方便后续操作
objects.push(objectCSS);
// 创建一个新的 `Object3D` 对象，用于 Three.js 的 3D 空间中的位置设置
const object = new THREE.Object3D();
// 使用 `table[i+3]` 和 `table[i+4]` 来设置 `object` 的位置
object.position.x = (table[i + 3] * 140) - 1330; // X 轴位置根据 `table[i+3]` 调整
object.position.y = - (table[i + 4] * 180) + 990; // Y 轴位置根据 `table[i+4]` 调整
// 将 `object` 添加到 `targets.table` 数组中，作为目标位置
targets.table.push(object);
}
// 定义一个三维向量，用于计算对象的方向
const vector = new THREE.Vector3();
// 遍历所有元素对象，计算它们在球体布局中的位置
for (let i = 0, l = objects.length; i < l; i++) {
// 计算当前对象的极角 phi，基于对象的序号和总数
// Math.acos 生成从 -1 到 1 的弧度值，用于控制对象在球体上的纵向分布
const phi = Math.acos(-1 + (2 * i) / l);
// 计算当前对象的方位角 theta
// Math.sqrt(l * Math.PI) 保证对象均匀分布在球体表面
const theta = Math.sqrt(l * Math.PI) * phi;
// 创建一个空的 Three.js 对象，用于存储对象的目标位置和方向
const object = new THREE.Object3D();
// 使用球坐标系计算对象的位置
// setFromSphericalCoords(radius, phi, theta) 方法将球面坐标转换为三维直角坐标
object.position.setFromSphericalCoords(800, phi, theta);
// 将对象的位置复制到向量 vector，并放大两倍，用于设置目标方向
vector.copy(object.position).multiplyScalar(2);
// 让对象面向 vector 的方向，即从球心指向对象的位置
object.lookAt(vector);
// 将该对象添加到 sphere 布局目标数组
targets.sphere.push(object);
}
// 使用 for 循环将所有对象排列成螺旋状（helix）
for (let i = 0, l = objects.length; i < l; i++) {
// 计算当前对象在螺旋布局中的方位角 theta
// i * 0.175 控制螺旋的每个对象旋转的增量
// 加上 Math.PI 用于起始角度的偏移
const theta = i * 0.175 + Math.PI;
// 计算当前对象的高度 y，随着索引值递减
// -(i * 8) 使对象均匀地沿 Y 轴向下分布
// 450 为高度的初始偏移量
const y = -(i * 8) + 450;
// 创建一个空的 Three.js 对象，用于存储对象的目标位置和方向
const object = new THREE.Object3D();
// 使用柱坐标系设置对象的位置
// setFromCylindricalCoords(radius, theta, y) 将柱坐标转换为三维直角坐标
object.position.setFromCylindricalCoords(900, theta, y);
// 设置用于对象朝向的向量
// X 和 Z 坐标被放大两倍，Y 坐标保持不变
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
// 让对象看向由 vector 指定的方向
object.lookAt(vector);
// 将对象添加到 helix 布局目标数组中
targets.helix.push(object);
}
// 使用 for 循环将所有对象排列成网格状（grid）
for (let i = 0; i < objects.length; i++) {
// 创建一个空的 Three.js 对象，用于存储对象的目标位置
const object = new THREE.Object3D();
// 计算对象的 X 轴位置
// (i % 5) 取模操作用于在网格的每一行中放置最多 5 个对象
// 每个对象之间间隔 400，减去 800 使网格居中
object.position.x = ((i % 5) * 400) - 800;
// 计算对象的 Y 轴位置
// Math.floor(i / 5) 将索引转换为当前行数
// (- (Math.floor(i / 5) % 5)) 确保 Y 轴上每 5 行的对象分布在一个模块内
// 每个对象之间间隔 400，增加 800 使网格居中
object.position.y = (-(Math.floor(i / 5) % 5) * 400) + 800;
// 计算对象的 Z 轴位置
// Math.floor(i / 25) 将索引转换为当前的深度层数
// 每一层的间隔为 1000，初始偏移为 -2000，确保网格沿 Z 轴扩展
object.position.z = (Math.floor(i / 25)) * 1000 - 2000;
// 将对象添加到 grid 布局目标数组中
targets.grid.push(object);
}
const buttonTable = document.getElementById( 'table' );
buttonTable.addEventListener( 'click', function () {
transform( targets.table, 2000 );
} );
const buttonSphere = document.getElementById( 'sphere' );
buttonSphere.addEventListener( 'click', function () {
transform( targets.sphere, 2000 );
} );
const buttonHelix = document.getElementById( 'helix' );
buttonHelix.addEventListener( 'click', function () {
transform( targets.helix, 2000 );
} );
const buttonGrid = document.getElementById( 'grid' );
buttonGrid.addEventListener( 'click', function () {
transform( targets.grid, 2000 );
} );
transform( targets.table, 2000 );
function transform( targets, duration ) {
// 移除进行中的过度
TWEEN.removeAll();
// 循环每一个物体
for ( let i = 0; i < objects.length; i ++ ) {
const object = objects[ i ];
const 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( () => {
renderer.render( scene, camera );
} )
.start();
}
const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener( 'change', () => {
renderer.render( scene, camera );
} );
// 设置控制器的目标点
controls.target.set(0, 0, 0); // 将目标点设置为立方体的中心
function animate() {
requestAnimationFrame(animate);
controls.update(); // 更新 OrbitControls
TWEEN.update();
}
animate();
});
</script>
<style lang="scss" scoped="scoped">
#parkingLot {
width: 940px;
height: 940px;
border: 1px solid #ccc;
margin: 30px auto;
}
</style>
方法
- getSize () : Object 返回一个包含有渲染器宽和高的对象。
- render ( scene : Scene, camera : PerspectiveCamera ) : undefined 使用perspective camera渲染scene。
- setSize (width : Number, height : Number) : undefined 将渲染器尺寸重新调整为(width, height)。
