3d文字直升飞机效果-html代码-BFW代码库

3d文字直升飞机效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	margin: 0;
	overflow: hidden;
}
canvas {
	cursor: grab;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<script >
window.addEventListener("DOMContentLoaded", app);

function app() {
  var scene,
  camera,
  renderer,
  roflcopter,
  colors = [0xf1f1f1, 0x171717],

  adjustWindow = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  },
  detectScheme = mq => {
    if (mq.matches) {
      // dark
      renderer.setClearColor(new THREE.Color(colors[1]));
      roflcopter.material.color.set(colors[0]);
    } else {
      // light
      renderer.setClearColor(new THREE.Color(colors[0]));
      roflcopter.material.color.set(colors[1]);
    }
  },
  init = () => {
    // setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(colors[0]));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // roflcopter
    roflcopter = new Roflcopter(colors[1]);
    scene.add(roflcopter.mesh);

    // camera
    camera.position.set(-30, 0, 0);
    camera.lookAt(scene.position);
    let camControls = new THREE.OrbitControls(camera, renderer.domElement);

    // use proper scheme for light or dark mode
    if (window.matchMedia) {
      const mq = window.matchMedia("(prefers-color-scheme: dark)");
      mq.addListener(detectScheme);
      detectScheme(mq);
    }

    // render
    document.body.appendChild(renderer.domElement);
    renderScene();
  },
  renderScene = () => {
    update();
    renderer.render(scene, camera);
    requestAnimationFrame(renderScene);
  },
  update = () => {
    // allow characters to look at user
    roflcopter.mesh.traverse(child => {
      if (child instanceof THREE.Mesh)
      child.lookAt(camera.position);
    });
    roflcopter.spin();
  };

  init();
  window.addEventListener("resize", adjustWindow);
}

class Roflcopter {
  constructor(color) {
    this.spinAngle = 0;
    this.spinSpeed = 6;

    this.material = new THREE.MeshBasicMaterial({
      color: color });

    this.mesh = new THREE.Object3D();
    this.mesh.name = "roflcopter";

    this.propeller = new THREE.Object3D();
    this.propeller.position.y = 5.25;
    this.mesh.add(this.propeller);

    this.rearBlades = new THREE.Object3D();
    this.rearBlades.position.set(0, 0.75, -9);
    this.mesh.add(this.rearBlades);

    let fontLoader = new THREE.FontLoader();
    fontLoader.load("https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", font => {
      let params = {
        font: font,
        size: 1,
        height: 0,
        curveSegments: 8 },

      mat = this.material,
      chars = [
      new THREE.TextBufferGeometry("R", params),
      new THREE.TextBufferGeometry("O", params),
      new THREE.TextBufferGeometry("F", params),
      new THREE.TextBufferGeometry("L", params),
      new THREE.TextBufferGeometry("I", params),
      new THREE.TextBufferGeometry(":", params),
      new THREE.TextBufferGeometry("^", params),
      new THREE.TextBufferGeometry("-", params),
      new THREE.TextBufferGeometry("—", params),
      new THREE.TextBuff.........完整代码请登录后点击上方下载按钮下载查看