纯代码的3D玫瑰花，有个这个还怕女朋友不开心？

news2024/11/29 0:41:01

先上效果图：
在这里插入图片描述
再上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap");
        * {
            margin: 0;
            padding: 0;
        }
        body {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle, #82707a, #24111e 100%);
        }
        main {
            position: relative;
            z-index: 1;
        }
        h1 {
            font-family: "Niconne", cursive;
            font-size: 10vw;
            margin-left: 1rem;
            color: rgba(255, 255, 255, 0.2);
        }
        p {
            position: fixed;
            bottom: 0;
            margin: 10px;
            font-size: max(3.3vw, 15px);
            color: rgba(255, 255, 255, 0.5);
        }
        #filter {

        }
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            z-index: 0;
        }
        header {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 1% 1%;
            width: 100%;
            z-index: 3;
            height: 7em;
            font-family: "Bebas Neue", sans-serif;
            font-size: clamp(0.66rem, 2vw, 1rem);
            letter-spacing: 0.5em;
        }

        a{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<main>
    <h1></h1>
    <p></p>
</main>
<header>
    <div>Animated Sections</div>
    <div><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</header>
<div id="filter"></div>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
    }
  }
</script>
</body>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    import { OBJLoader } from "three/addons/loaders/OBJLoader.js";

    let container;
    let camera, scene, renderer, controls;
    let manager;
    let object;
    let material = new THREE.MeshStandardMaterial({
        metalness: 0,
        roughness: 0.8,
        side: THREE.DoubleSide
    });

    init();
    animate();

    function init() {
        container = document.createElement("div");
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
            33, //45
            window.innerWidth / window.innerHeight,
            1,
            2000
        );
        camera.position.y = 150;
        camera.position.z = 250;

        scene = new THREE.Scene();

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

        const pointLight = new THREE.PointLight(0xffffff, 0.5);
        pointLight.castShadow = true;
        camera.add(pointLight);
        scene.add(camera);

        // manager
        function loadModel() {
            object.traverse(function (child) {
                if (child.isMesh) {
                    if (child.name == "rose") {
                        material = material.clone();
                        material.color.set("crimson");
                    } else if (child.name == "calyx") {
                        material = material.clone();
                        material.color.set("#001a14");
                    } else if (child.name == "leaf1" || child.name == "leaf2") {
                        material = material.clone();
                        material.color.set("#00331b");
                    }
                    child.material = material;
                }
            });
            object.rotation.set(0, Math.PI / 1.7, 0);
            object.receiveShadow = true;
            object.castShadow = true;
            scene.add(object);
        }

        manager = new THREE.LoadingManager(loadModel);

        // model
        function onProgress(xhr) {
            if (xhr.lengthComputable) {
                const percentComplete = (xhr.loaded / xhr.total) * 100;
            }
        }
        function onError() {}

        const loader = new OBJLoader(manager);
        loader.load(
            "https://happy358.github.io/Images/Model/red_rose3.obj",
            function (obj) {
                object = obj;
            },
            onProgress,
            onError
        );

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

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.autoRotate = true; //true
        controls.autoRotateSpeed = 2;
        controls.enableDamping = true;
        controls.enablePan = false;
        controls.minPolarAngle = 0;
        controls.maxPolarAngle = Math.PI / 2;
        controls.target.set(0, 0, 0);
        controls.update();

        window.addEventListener("resize", onWindowResize);
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        render();
    }
    function render() {
        renderer.render(scene, camera);
    }

</script>
</html>