使用黄金分割来铺花子到花盘上

最新推荐文章于 2024-04-26 16:47:03 发布

JoyerHuang_悦

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量256

点赞数

分类专栏： 3D/图形学文章标签： javascript html5

本文链接：https://blog.csdn.net/delphinew/article/details/120765043

版权

3D/图形学专栏收录该内容

5 篇文章 0 订阅

订阅专栏

利用黄金分割在花盘或者花体上铺花子
最初是女儿看到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', onmousemove, false)
function onmousemove(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

    flower3d(); // 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>

JoyerHuang_悦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用黄金分割来铺花子到花盘上

利用黄金分割在花盘或者花体上铺花子最初是女儿看到entagma的一个动画(https://www.youtube.com/watch?v=yGwhnt7mZ50)觉得很漂亮，问我能不能做一个原始动画使用houdini的VEX实现的，了解原理后我觉得这个算法包含了程序之美和自然界的数学之美，用three.js在Web上尝试flower2d 产生平面花盘 flower3d 产生空间花盘，用抛物线举例<!DOCTYPE html><html> <h..
复制链接

扫一扫