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