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 linesMatOran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0