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

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

代码语言：html

所属分类：三维

代码描述：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 linesMatOrange = new THREE.LineBasicMaterial({ color: 0xfb8c00 });
const linesMatBrown = new THREE.LineBasicMaterial({ color: 0x4d3227 });
const line1 = new THREE.LineSegments(linesGeom1, linesMatWhite);
scene.add(line1);
const line2 = new THREE.LineSegments(linesGeom2, linesMatOrange);
scene.add(line2);
const line3 = new THREE.LineSegments(linesGeom3, linesMatBrown);
scene.add(line3);

const geometry = new THREE.PlaneGeometry(30, 30);
const material2 = new THREE.ShadowMaterial({
  color: 0x111111,
  side: 2 });

const plane = new THREE.Mesh(geometry, material2);
plane.rotation.x = Math.PI / 2;
plane.position.y = -1.6;
plane.receiveShadow = true;
scene.add(plane);

const light = new THREE.DirectionalLight(0xffffff, 1, 100);
light.position.set(0.2, 0.5, -1);
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.radius = 8;
scene.add(light);


const pointsWhite = [];
const pointsBrown = [];
const pointsOrange = [];

const loader = new THREE.OBJLoader();
loader.load(
"//repo.bfw.wiki/bfwrepo/threemodel/fox_low_poly.obj",
func.........完整代码请登录后点击上方下载按钮下载查看