threejs+canvas实现带纹理的简约3D车效果代码-html代码-BFW代码库

threejs+canvas实现带纹理的简约3D车效果代码

代码语言：html

所属分类：三维

代码描述：threejs+canvas实现带纹理的简约3D车效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
<style>

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 100;
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

#codepen {
  z-index: 20;
  display: block;
  position: fixed;
  bottom: 12px;
  left: 5px;
  padding: 25px;
  color: white;
  max-width: 300px;
}

#freecodecamp {
  z-index: 50;
  display: block;
  position: fixed;
  bottom: 18px;
  right: 5px;
  color: white;
  padding: 25px;
  font-family: "Roboto Mono", monospace;
}

#freecodecamp:hover,
#freecodecamp:focus {
  color: black;
}

#freecodecamp-card {
  display: none;
}
#freecodecamp:hover + #freecodecamp-card {
  z-index: 49;
  display: block;
  position: fixed;
  bottom: 12px;
  right: 10px;
  padding: 25px 150px 25px 25px;
  width: 300px;
  background-color: white;
}
</style>



</head>

<body>

 
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
      <script>
const scene = new THREE.Scene();

const car = createCar();
scene.add(car);

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(200, 500, 300);
scene.add(dirLight);

// Set up camera
const aspectRatio = window.innerWidth / window.innerHeight;
const cameraWidth = 150;
const cameraHeight = cameraWidth / aspectRatio;

const camera = new THREE.OrthographicCamera(
cameraWidth / -2, // left
cameraWidth / 2, // right
cameraHeight / 2, // top
cameraHeight / -2, // bottom
0, // near plane
1000 // far plane
);
camera.position.set(200, 200, 200);
camera.lookAt(0, 10, 0);

// var helper = new THREE.CameraHelper(dirLight.shadow.camera);
// var helper = new THREE.CameraHelper(camera);
// scene.add(helper);

// const gridHelper = new THREE.GridHelper(80, 8);
// scene.add(gridHelper);

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

// Set up renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

renderer.setAnimationLoop(() => {
  car.rotation.y -= 0.007;
  renderer.render(scene, camera);
});

document.body.appendChild(renderer..........完整代码请登录后点击上方下载按钮下载查看