three打造一个建造潜艇的三维动画场景效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three打造一个建造潜艇的三维动画场景效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0px;
  overflow: hidden;
 }

#scene-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>



</head>

  <body>
		<div id="scene-container"></div>
	</body>
<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/gsap.3.5.2.js"></script>
      <script>
//



let container;
let camera;
let renderer;
let scene;

let crane;
let craneHook;

let upperArm;
let rtCrLine;
let rtCrLine1;

let angle = 0;
let clock = new THREE.Clock();

function init() {
  container = document.querySelector("#scene-container");

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x05bdd5);
  scene.fog = new THREE.Fog(0x05bdd5, 8, 30); // 10, 25 // 12, 50

  // const axesHelper = new THREE.AxesHelper( 10 );
  // scene.add( axesHelper );

  createCamera();
  createControls();
  createLights();
  createMeshes();
  createRenderer();

  renderer.setAnimationLoop(() => {
    update();
    render();
  });
}

function createCamera() {
  camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 100);
  camera.position.set(8, 8, 18);
}

function createControls() {
  controls = new THREE.OrbitControls(camera, container);
}

function createLights() {
  const ambLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambLight);

  const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
  dirLight.position.set(15, 10, 24);
  scene.add(dirLight);
}

function createMeshes() {
  craneLeft();
  groundWater();
  sub();
  craneRight();
  barge();
}

function createRenderer() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.physicallyCorrectLights = true;
  container.appendChild(renderer.domElement);
}

function update() {

  // move cranes
  angle += 0.01;

  crane.position.z += Math.sin(angle) / 20;
  craneHook.rotation.x += Math.sin(angle) / 50;

  upperArm.position.x += Math.sin(angle) / 75;
  rtCrLine.position.x += Math.sin(angle) / 75;
  rtCrLine1.position.x += Math.sin(angle) / 75;

  // move camera with GSAP
  let tl = gsap.timeline({ yoyo: true });
  tl.to(camera.position, { duration: 30, x: 0, y: 8, z: 15, delay: 7 });
}

function render() {
  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener("resize", onWindowResize);

init();

function barge() {
  barge = new THREE.Group();
  const bow = new THREE.Group();

  const triShape = new THREE.Shape();
  triShape.moveTo(0, 0);
  triShape.lineTo(-1, 1);
  triShape.lineTo(1, 1);
  triShape.lineTo(0, 0);
  const extrudeSettings = {
    steps: 2,
    depth: 0.2,
    bevelEnabled: false };

  const triGeo = new THREE.ExtrudeBufferGeometry(triShape, extrudeSettings);
  const triMat = new THREE.MeshStandardMaterial({ color: 0xff0000 });
  const triangle = new THREE.Mesh(triGeo, triMat);
  triangle.position.y = 5;

  const triangle1 = triangle.clone();
  triangle1.scale.set(0.8, 0.8, 1);
  triangle1.position.z = -0.2;
  triangle1.position.y = 5.2;

  const triangle2 = triangle.clone();
  triangle2.scale.set(0.6, 0.6, 1);
  triangle2.position.z = -0.4;
  triangle2.position.y = 5.4;

  bow.add(triangle);
  bow.add(triangle1);
  bow.add(triangle2);
  barge.add(bow);
  bow.position.z = 10;
  bow.position.y = 1.2;
  bow.rotateX(-Math.PI / 2);

  const hullGeo = new THREE.BoxBufferGeometry(2, 1, 4);
  const hullMat = new THREE.MeshStandardMaterial({ color: 0xff0000 });
  const hull = new THREE.Mesh(hullGeo, hullMat);
  hull.position.y = 0.9;
  hull.position.z = 2;

  barge.add(hull);

  const cabinGeo = new THREE.BoxBufferGeometry(1.5, 1, 2);
  const cabinMat = new THREE.MeshStandardMaterial({ color: 0xff0000 });
  const cabin = new THREE.Mesh(cabinGeo, cabinMat);
  cabin.position.y = 1.5;
  cabin.position.z = 2.5;
  barge.add(cabin);

  barge.position.set(15, -1.5, 6);
  barge.rotation.y = -90 * Math.PI / 180;
  barge.scale.z = 2;
  barge.scale.x = 1.5;

  scene.add(barge);
}
function craneLeft() {

  // materials
  const orangeMat = new THREE.MeshStandardMaterial({
    color: 0xfa4e05 });


  const dkGrayMat = new THREE.MeshStandardMaterial({
    color: 0x5c5646 });


  const windowMat = new THREE.MeshStandardMaterial({
    color: 0x05bdfa,
    emissive: 0x05bdfa });



  /////////////
  // crane  //
  ////////////
  crane = new THREE.Group();

  // base
  const baseGeo = new THREE.BoxBufferGeometry(4, 1.5, 4);
  const base = new THREE.Mesh(baseGeo, orangeMat);
  crane.add(base);

  // engine cab
  const engineCabGeo = n.........完整代码请登录后点击上方下载按钮下载查看