标签：动画 point WebGL THREE scene position new Houdini Math
利用黄金分割在花盘或者花体上铺花子
最初是女儿看到entagma的一个动画(https://www.youtube.com/watch?v=yGwhnt7mZ50)觉得很漂亮，问我能不能做一个
原始动画使用houdini的VEX实现的，了解原理后我觉得这个算法包含了程序之美和自然界的数学之美，用three.js在Web上尝试
flower2d 产生平面花盘 flower3d 产生空间花盘，用抛物线举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="./three.js"></script>
<script>
/// 利用黄金分割在花盘或者花体上铺花子
/// 最初是女儿看到entagma的一个动画(https://www.youtube.com/watch?v=yGwhnt7mZ50)觉得很漂亮，问我能不能做一个
/// 原始动画使用houdini的VEX实现的，了解原理后我觉得这个算法包含了程序之美和自然界的数学之美，用three.js在Web上尝试
/// flower2d 产生平面花盘 flower3d 产生空间花盘，用抛物线举例
/// Created by Joyer Huang 2021
var golden_angle = 137.5, camera, scene, renderer, point_light, empty, mouse = new THREE.Vector2();
var d2r = d => d*(Math.PI/180);;
function flower2d() {
var N = 100;
for (var i=0; i<N; i++) {
var r = Math.sqrt(i);
var x = Math.sin(d2r(golden_angle * i)) * r;
var y = Math.cos(d2r(golden_angle * i)) * r;
emit(x, y, 0, 1);
}
}
function flower3d() {
// Y = -X*X + 30
var Y = 30, Xlast = 0, emit_space = 1, d = 0.01, accumulate_space = 0, golden_angle_i = 0;
while (Y > 0) {
X = Math.sqrt(30-Y);
Xd = X - Xlast;
df = Math.sqrt(Xd*Xd + d);
af = Math.PI * X * X * df;
accumulate_space += af;
if (accumulate_space > emit_space) {
accumulate_space -= emit_space;
var x = Math.sin(d2r(golden_angle * golden_angle_i)) * X;
var y = Math.cos(d2r(golden_angle * golden_angle_i)) * X;
var z = Y;
golden_angle_i++;
emit(y, z, x, emit_space/5);
}
Y -= d;
Xlast = X;
}
}
function emit(x, y, z, r) {
geo = new THREE.SphereGeometry(r);
mat = new THREE.MeshLambertMaterial({ color: 0xffcb00 });
mat.reflectivity = 0.2
mesh = new THREE.Mesh(geo, mat);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.receiveShadow = true;
mesh.castShadow = true;
empty.add(mesh);
}
init();
animate();
document.addEventListener('mousemove', onm ousemove, false)
function onm ousemove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 100; // view distance
scene.add(camera);
const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
empty = new THREE.Object3D();
scene.add(empty);
point_light = new THREE.PointLight( 0xff0040, 5, 50 );
point_light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
scene.add( point_light );
scene.add(new THREE.AmbientLight( 0x040404, 20 )); // base ambient
flower2d(); // or use flower2d if you want simple projection
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// basic object animation
const time = Date.now() * 0.0005;
point_light.position.x = Math.sin( time * 0.7 * 2 ) * 20;
point_light.position.y = Math.cos( time * 0.5 * 2) * 25;
point_light.position.z = Math.cos( time * 0.3 * 2) * 30;
empty.rotation.y += 0.03;
empty.position.y = mouse.y * 50;
renderer.render(scene, camera);
}
</script>
</body>
</html>
标签：动画,point,WebGL,THREE,scene,position,new,Houdini,Math 来源： https://blog.csdn.net/weixin_61232699/article/details/120764127
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。