Three.js+Perlin实现的热图动画效果源码.zip资源-CSDN文库

共5个文件

js：4个

html：1个

版权申诉

134 浏览量 2022-11-01 00:08:36 上传评论收藏 161KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Three.js+Perlin实现的热图动画效果源码.zip （5个子文件）

132677959584854010

index.html 2KB

jquery-1.11.1.min.js 94KB

OrbitControls.js 22KB

perlin.js 10KB

three.min.js 499KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Three.js Perlin热图</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="js/jquery-1.11.1.min.js"></script> <canvas></canvas> <script src="js/three.min.js"></script> <script src="js/perlin.js"></script> <script src="js/OrbitControls.js"></script> <script> var renderer, scene, camera, spheres; var ww = window.innerWidth, wh = window.innerHeight; function init() { renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('canvas'), antialias: true }); renderer.setSize(ww, wh); renderer.setClearColor(0x000000); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000); camera.position.set(180, 100, 180); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); controls = new THREE.OrbitControls(camera); createField(); } var size = 60; function createField() { spheres = new THREE.Object3D(); var geometry = new THREE.SphereGeometry(4, 10, 10); for (var y = -size / 2; y < size / 2; y++) { for (var x = -size / 2; x < size / 2; x++) { var material = new THREE.MeshBasicMaterial({ color: 0x000000 }); var sphere = new THREE.Mesh(geometry, material); sphere.position.set(x * 4, 0, y * 4); sphere.org = { x: x * 4, z: y * 4 }; spheres.add(sphere); } } scene.add(spheres); requestAnimationFrame(render); } noise.seed(Math.random()); function render(a) { requestAnimationFrame(render); for (var i = spheres.children.length - 1; i >= 0; i--) { var sphere = spheres.children[i]; var value = Math.round(Math.abs(noise.simplex3(sphere.org.x / 100, sphere.org.z / 100, a * 0.0001)) * 10) / 10; sphere.material.color = new THREE.Color("hsl(" + (180 - value * 180) + ",50%,50%)"); sphere.position.y = value * 18; } renderer.render(scene, camera); } init(); </script> </body> </html>

评论收藏

内容反馈

版权申诉