three+chroma+perlin实现三维噪点斑点效果代码

代码语言:html

所属分类:三维

代码描述:three+chroma+perlin实现三维噪点斑点效果代码

代码标签: three chroma perlin 三维 噪点 斑点

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
      <script  >
console.clear();

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x3d0764, 20, 25);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

renderer.setClearColor(0x3d0764);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 25;
const controls = new THREE.OrbitControls(camera, renderer.domElement);

/* Global lightning  */
const light = new THREE.HemisphereLight(0xffffbb, 0x151515, 1);
scene.add(light);

/* Moving light */
const plight = new THREE.PointLight(0xffffff, 1, 40);
plight.position.z = 30;
let lGroup = new THREE.Group();
lGroup.add(plight);
scene.add(lGroup);

const colours = chroma.scale(['#A947F2', '#FF29BD', '#FF5286', '#FF905C', '#FFC84F', '#F9F871']);

let geometry = new THREE.IcosahedronGeometry(4, 40);
let material = new THREE.MeshPhongMaterial({
  wireframe: false,
  vertexColors: true });

let blob = new THREE.Mesh(geometry, m.........完整代码请登录后点击上方下载按钮下载查看

网友评论0