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