threejs使用简单形状的几何图形组装一台汽车三维模型效果代码-html代码-BFW代码库

threejs使用简单形状的几何图形组装一台汽车三维模型效果代码

代码语言：html

所属分类：三维

代码描述：threejs使用简单形状的几何图形组装一台汽车三维模型效果代码

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

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

<head>

  <meta charset="UTF-8">

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




</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
      <script  >
let camera, controls, scene, renderer;

init();
animate();

function Car() {
  const car = new THREE.Group();

  const backWheel = new THREE.Mesh(
  new THREE.CylinderGeometry(6, 6, 33, 64),
  new THREE.MeshLambertMaterial({ color: 0x333333 }));

  backWheel.position.z = 6;
  backWheel.position.x = -18;
  car.add(backWheel);

  const backWheelRim = new THREE.Mesh(
  new THREE.CylinderGeometry(3, 3, 34, 64),
  new THREE.MeshLambertMaterial({ color: 0x000000 }));

  backWheelRim.position.z = 6;
  backWheelRim.position.x = -18;
  car.add(backWheelRim);

  const frontWheel = new THREE.Mesh(
  new THREE.CylinderGeometry(6, 6, 33, 64),
  new THREE.MeshLambertMaterial({ color: 0x333333 }));

  frontWheel.position.z = 6;
  frontWheel.position.x = 18;
  car.add(frontWheel);

  const frontWheelRim = new THREE.Mesh(
  new THREE.CylinderGeometry(3, 3, 34, 64),
  new THREE.MeshLambertMaterial({ color: 0x000000 }));

  frontWheelRim.position.z = 6;
  frontWheelRim.position.x = 18;
  car.add(frontWheelRim);

  const carBody = new THREE.Mesh(
  new THREE.BoxGeometry(60, 30, 15),
  new THREE.MeshLambertMaterial({ color: 0xa52523 }));

  carBody.position.z = 12;
  car.add(carBody);

  const carCabin = new THREE.Mesh(
  new THREE.BoxGeometry(40, 30, 11),
  new THREE.MeshLambertMaterial(0xffffff));

  carCabin.position.z = 25;
  carCabin.position.x = -10;
  car.add(carCabin);

  const frontWindow = new THREE.Mesh(
  new THREE.BoxGeometry(2, 8, 24),
  new THREE.MeshBasicMaterial({ color: 0x00bfff, side: THREE.DoubleSide }));

  frontWindow.position.z = 25;
  frontWindow.position.x = 10;
  frontWindow.rotation.x = Math.PI / 2;
  car.add(frontWindow);

  const rearWindow = new THREE.Mesh(
  new THREE.BoxGeometry(2, 8, 24),
  new THREE.MeshBasicMaterial({ color: 0x00bfff, side: THREE.DoubleSide }));

  rearWindow.position.z = 25;
  rearWindow.position.x = -30;
  rearWindow.rotation.x = Math.PI / 2;
  car.add(rearWindow);

  const leftWindow = new THREE.Mesh(
  new THREE.BoxGeometry(2, 8, 30),
  new THREE.MeshBasicMaterial({ color: 0x00bfff, side: THREE.DoubleSide }));

  leftWindow.position.z = 25;
  leftWindow.position.x = -10;
  leftWindow.position.y = 15;
  leftWindow.rotation.y = Math.PI / 2;
  leftWindow.rotation.z = Math.PI / 2;
  car.add(leftWindow);

  const rightWindow = new THREE.Mesh(
  new THREE.BoxGeometry(2, 8, 30),
  new THREE.MeshBasicMaterial({ color: 0x00bfff, side: THREE.DoubleSide }));

  rightWindow.position.z = 25;
  rightWindow.position.x = -10;
  rightWindow.position.y = -15;
  rightWindow.rotation.y = Math.P.........完整代码请登录后点击上方下载按钮下载查看