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

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

代码语言：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);
  c.........完整代码请登录后点击上方下载按钮下载查看