threejs打造3d跑车竞赛动画效果-html代码-BFW代码库

threejs打造3d跑车竞赛动画效果

代码语言：html

所属分类：三维

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
	margin: 0;
	overflow: hidden;
}
canvas {
	cursor: move;
}
</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 src='http://repo.bfw.wiki/bfwrepo/js/dat.gui.min.js'></script>
<script >
      window.addEventListener("DOMContentLoaded", app);

function app() {
  var scene,
  camera,
  renderer,
  textureLoader = new THREE.TextureLoader(),
  controls,
  GUI,
  road,
  cybertruck,
  ambientLight,
  daylight,
  fogColor;

  var adjustWindow = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  },
  init = () => {
    // setup
    let licensePlate = textureLoader.load("http://repo.bfw.wiki/bfwrepo/image/5df5d982ef313.png"),
    grassTile = textureLoader.load("http://repo.bfw.wiki/bfwrepo/image/5df5d982ef313.png"),
    roadTile = textureLoader.load("http://repo.bfw.wiki/bfwrepo/image/5df5d96d46d8e.png");

    scene = new THREE.Scene();
    fogColor = {
      h: 215,
      s: 80,
      l: 80 };

    scene.fog = new THREE.Fog(`hsl(${fogColor.h},${fogColor.s}%,${fogColor.l}%)`, 0.01, 272);

    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 20);
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer({
      logarithmicDepthBuffer: false });

    renderer.setClearColor(scene.fog.color.getStyle());
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    let camControls = new THREE.OrbitControls(camera, renderer.domElement);
    camControls.enablePan = false;

    // road
    road = new Road(grassTile, roadTile);

    // cybertruck
    cybertruck = new Cybertruck(licensePlate);
    cybertruck.mesh.name = "Cybertruck";
    cybertruck.mesh.position.y = cybertruck.height / 2;

    // ambient light
    ambientLight = new THREE.AmbientLight(0xffffff);
    ambientLight.intensity = 1;
    scene.add(ambientLight);

    // daylight
    daylight = new THREE.PointLight(0xffffff, ambientLight.intensity * 2);
    daylight.position.set(0, 64, 0);
    daylight.castShadow = true;
    scene.add(daylight);

    // config
    controls = {
      daylight: ambientLight.intensity,
      speed: cybertruck.speed,
      resetCam: () => {
        camControls.reset();
      } };

    GUI = new dat.GUI();
    GUI.add(controls, "daylight", 0.1, 1, 0.01).name("Daylight").onChange(e => {
      let newVal = controls.daylight;
      cybertruck.headlight.intensity = (1 - newVal) * 2;
      cybertruck.rearlight.intensity = (1 - newVal) * 2;
      ambientLight.intensity = newVal;
      daylight.intensity = newVal * 2;

      let h = fogColor.h,
      s = fogColor.s,
      l = newVal * 100;
      fogColor.l = l * 0.8;

      let daylightColorStr = `hsl(${h},${s}%,${l.toFixed(0)}%)`,
      fogColorStr = `hsl(${h},${s}%,${fogColor.l.toFixed(0)}%)`;

      daylight.color = new THREE.Color(daylightColorStr);
      renderer.setClearColor(fogColorStr);
      scene.fog.color.set(fogColorStr);
    });
    GUI.add(controls, "speed", 0, 60, 1).name("Speed (MPH)").onChange(e => {
      cybertruck.speed = controls.speed;
    });
    GUI.add(controls, "resetCam").name("Reset Camera");

    // first render
    document.body.appendChild(renderer.domElement);
    renderScene();
  },
  renderScene = () => {
    updateObjects();
    renderer.render(scene, camera);
    requestAnimationFrame(renderScene);
  },
  spawnObjects = () => {
    scene.add(road.mesh);
    scene.add(cybertruck.mesh);
  },
  updateObjects = () => {
    if (scene.getObjectByName(cybertruck.mesh.name)) {
      cybertruck.move();

      if (cybertruck.mesh.position.z > road.tileSize)
.........完整代码请登录后点击上方下载按钮下载查看