ThreeJS中的CSS

参考：https://threejs.org/

const createTag = (object3d) => {
    // 创建各个区域的元素
    const element = document.createElement("div");
    element.className = "elementTag";
    element.innerHTML = `
      <div class="elementContent">
        <h3>${object3d.name}</h3>
        <p>温度：26℃</p>
        <p>湿度：50%</p>
      </div>
    `;

    const objectCSS3D = new CSS3DObject(element);
    objectCSS3D.position.copy(object3d.position);
    objectCSS3D.scale.set(0.2, 0.2, 0.2);
    return objectCSS3D;
}

厂房外形展示

厂房分层展开

展示第一层楼

展示第二层楼

const targets = { table: [], sphere: [], helix: [], grid: [] };
// table
for ( let i = 0; i < table.length; i += 5 ) {
	const element = document.createElement( 'div' );
	element.className = 'element';
	element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
	const number = document.createElement( 'div' );
	number.className = 'number';
	number.textContent = ( i / 5 ) + 1;
	element.appendChild( number );
	const symbol = document.createElement( 'div' );
	symbol.className = 'symbol';
	symbol.textContent = table[ i ];
	element.appendChild( symbol );
	const details = document.createElement( 'div' );
	details.className = 'details';
	details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
	element.appendChild( details );
	const objectCSS = new CSS3DObject( element );
	objectCSS.position.x = Math.random() * 4000 - 2000;
	objectCSS.position.y = Math.random() * 4000 - 2000;
	objectCSS.position.z = Math.random() * 4000 - 2000;
	scene.add( objectCSS );
	objects.push( objectCSS );
	//
	const object = new THREE.Object3D();
	object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
	object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
	targets.table.push( object );
}

// sphere

const vector = new THREE.Vector3();

for (let i = 0, l = objects.length; i < l; i++) {
  const phi = Math.acos(-1 + (2 * i) / l);
  const theta = Math.sqrt(l * Math.PI) * phi;

  const object = new THREE.Object3D();

  object.position.setFromSphericalCoords(800, phi, theta);

  vector.copy(object.position).multiplyScalar(2);

  object.lookAt(vector);

  targets.sphere.push(object);
}
// helix

for (let i = 0, l = objects.length; i < l; i++) {
  const theta = i * 0.175 + Math.PI;
  const y = -(i * 8) + 450;

  const object = new THREE.Object3D();

  object.position.setFromCylindricalCoords(900, theta, y);

  vector.x = object.position.x * 2;
  vector.y = object.position.y;
  vector.z = object.position.z * 2;

  object.lookAt(vector);

  targets.helix.push(object);
}

// grid

for (let i = 0; i < objects.length; i++) {
  const object = new THREE.Object3D();

  object.position.x = (i % 5) * 400 - 800;
  object.position.y = -(Math.floor(i / 5) % 5) * 400 + 800;
  object.position.z = Math.floor(i / 25) * 1000 - 2000;

  targets.grid.push(object);
}

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( render )
    .start();

}