three实现风中毛发吹动的三维狐狸效果代码

代码语言:html

所属分类:三维

代码描述:three实现风中毛发吹动的三维狐狸效果代码

代码标签: three 三维 狐狸 毛发

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

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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
  margin: 0;
  overflow: hidden;
}

canvas {
  position: absolute;
  touch-action: none;
}
</style>



</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.122.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/THREEProjector.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OBJLoader-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MeshSurfaceSampler.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SubdivisionModifier.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
      <script>
console.clear();

/* SETUP */
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 8, 13);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 20);
camera.position.x = -1;
camera.position.y = 0.8;
camera.position.z = -4;

const webglRenderer = new THREE.WebGLRenderer({
  antialias: true });

webglRenderer.shadowMap.enabled = true;
webglRenderer.setSize(window.innerWidth, window.innerHeight);
webglRenderer.setClearColor(0x000000);
webglRenderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(webglRenderer.domElement);

/* CONTROLS */
const controls = new THREE.OrbitControls(camera, webglRenderer.domElement);

const linesGeom1 = new THREE.BufferGeometry();
const linesGeom2 = new THREE.BufferGeometry();
const linesGeom3 = new THREE.BufferGeometry();
const linesMatWhite = new THREE.LineBasicMaterial({ color: 0xffffff });
const linesMatOran.........完整代码请登录后点击上方下载按钮下载查看

网友评论0