threejs制作一个三维缆车上下山动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：threejs制作一个三维缆车上下山动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
html,
body {
  margin: 0;
  height: 100%;
}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a1424;
  opacity: 0.95;
}
</style>




</head>

<body>
  <!-- Inspired by https://dribbble.com/shots/9894256-Ski-Hill/attachments/1927981?mode=media -->
<div id="canvas"></div>
<script id="vertexShader" type="x-shader/x-vertex">
  varying vec3 vNormal; void main() { vNormal = normalize( normalMatrix * normal ); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
    </script>
<script id="fragmentShader" type="x-shader/x-vertex">
  varying vec3 vNormal; void main() { float intensity = pow( 0.7 - dot( vNormal, vec3( 0.0, 0.0, 0.5 ) ), 4.0 ); gl_FragColor = vec4( 0.89, 0.82, 0.69, 1.0 ) * intensity; }
    </script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
      <script>
const ColorsCableCar = {
  orange: 0xdf1209,
  red: 0xb60909,
  black: 0x0c0d0b,
  gray: 0x110e14,
  light: 0xf2c572,
  moonLight: 0xb38014
};

let scene,
  camera,
  controls,
  fieldOfView,
  aspectRatio,
  nearPlane,
  farPlane,
  renderer,
  container,
  hemisphereLight,
  spotLight,
  ambientLight,
  HEIGHT,
  WIDTH;

const createScene = () => {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x1816eb, 10, 1500);

  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );

  camera.position.x = 0;
  camera.position.z = 300;
  camera.position.y = 100;
  camera.rotation.x = 50;

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(WIDTH, HEIGHT);

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  container = document.getElementById("canvas");
  container.appendChild(renderer.domElement);

  window.addEventListener("resize", handleWindowResize, false);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var loader = new THREE.GLTFLoader();
  loader.load(
    "//repo.bfw.wiki/bfwrepo/threemodel/env3.gltf",
    (gltf) => {
      gltf.scene.position.y = -100;
      gltf.scene.children.forEach((child) => {
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      scene.add(gltf.scene);
    }
  );
};

const handleWindowResize = () => {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
};

const createLights = () => {
  ambientLight = new THREE.AmbientLight(0x111111, 4);

  const houseLight = new THREE.PointLight(ColorsCableCar.light, 25, 25, 4);
  houseLight.position.set(-113, 10, 47);

  hemisphereLight = new THREE.HemisphereLight(0x0c0733, 5);

  spotLight = new THREE.SpotLight(0xc79461, 0.3);
  spotLight.castShadow = true;
  spotLight.shadow.bias = -0.0001;
  spotLight.shadow.mapSize.width = 1024 * 4;
  spotLight.shadow.mapSize.height = 1024 * 4;

  scene.add(ambientLight, houseLight, spotLight, hemisphereLight);
};

function CableCar() {
  this.mesh = new THREE.Group();

  let geomBox1 = new THREE.BoxGeometry(10, 4.5, 10, 1, 1, 1);
  geomBox1.vertices[7].y += 0.5;
  geomBox1.vertices[7].z -= 1;
  geomBox1.vertices[2].z -= 1;
  geomBox1.vertices[2].y += 0.5;
  geomBox1.vertices[3].y += 0.5;
  geomBox1.vertices[3].z += 1;
  geomBox1.vertices[6].y += 0.5;
  geomBox1.vertices[6].z += 1;

  let matBox1 = new THREE.MeshPhongMaterial({
    color: ColorsCableCar.orange,
    flatShading: true
  });
  let box1 = new THREE.Mesh(geomBox1, matBox1);
  box1.castShadow = true;
  box1.receiveShadow = true;

  let geomBox2 = new THREE.BoxGeometry(10.1, 5.5, 10, 1, 1, 1);
  let matBox2 = new THREE.MeshPhongMaterial({
    color: ColorsCableCar.red,
    flatShading: true
  });
  let box2 = new THREE.Mesh(geomBox2, matBox2);
  box2.position.y = 3.8;
  box2.castShadow = true;
  box2.receiveShadow = true;

  let geomBox3 = new THREE.BoxGeometry(7, 2, 7, 1, 1, 1);
  let matBox3 = new THREE.MeshPhongMaterial({
    color: ColorsCableCar.black,
    flatShading: true
  });
  let box3 = new THREE.Mesh(geomBox3, matBox3);
  box3.position.y = 7;
  box3.castShadow = true;
  box3.receiveShadow = true;

  let geomWindow = new THREE.BoxGeometry(3, 2, 7, 1, 1, 1);
  let matWindow = new THREE.MeshPhongMaterial({
    color: ColorsCableCar.light,
    flatShading: true
  });
  let window = new THREE.Mesh(geomWindow, matWindow);
  window.rotation.z = 1.6;
  window.position.y = 4;
  window.position.x = 4.5;

  const cableCarLight1 = new THREE.PointLight(ColorsCableCar.light, 20, 15, 2);
  cableCarLight1.position.x = 7;
  cableCarLight1.position.y = 4;
  this.mesh.add(cableCarLight1);

  let window2 = window.clone();
  window2.position.x = -4.5;

  const cableCarLight2 = new THREE.PointLight(ColorsCableCar.light, 20, 15, 2);
  cableCarLight2.position.x = -7;
  cableCarLight2.position.y = 4;
  this.mesh.add(cableCarLight2);

  let geomLever = new THREE.BoxGeometry(1, 15, 1, 1, 1, 1);
  let lever = new THREE.Mesh(geomLever, matBox3);
  lever.position.y = 13;
  lever.castShadow = true;
  lever.receiveShadow = true;

  var cabin = new THREE.Group();
  cabin.add(box1);
  cabin.add(box2);
  cabin.add(box3);
  cabin.add(lever);
  cabin.add(window);
  cabin.add(window2);

  this.mesh.add(cabin);
}

const cableCar.........完整代码请登录后点击上方下载按钮下载查看