three制作一个立方体扭转动画效果代码-html代码-BFW代码库

three制作一个立方体扭转动画效果代码

代码语言：html

所属分类：三维

代码描述：three制作一个立方体扭转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">





</head>

<body>

    <canvas id="canvas-container" width="400" height="448" style="width: 320px; height: 359px;"></canvas>


    <script type="module">
        import anime from "https://cdn.skypack.dev/animejs";
        import {
            AmbientLight,
            BoxBufferGeometry,
            Color,
            DirectionalLight,
            Mesh,
            MeshLambertMaterial,
            PCFSoftShadowMap,
            PerspectiveCamera,
            PlaneBufferGeometry,
            Scene,
            sRGBEncoding,
            WebGLRenderer,
        } from "https://cdn.skypack.dev/three";
        import {
            OrbitControls
        } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls";

        const addDesktopControls = (camera, renderer) => {
            const orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.update();
            return {
                orbitControls,
            };
        };

        class Sketch {
            constructor({
                canvasEl
            }) {
                this.canvasEl = canvasEl;
                this.colors = {
                    LIGHT_GREY: new Color(0xdad2d8),
                    GUN_METAL: new Color(0x143642),
                    DARK_CYAN: new Color(0x0f8b8d),
                    CARROT_ORANGE: new Color(0xf57f17),
                    CARNELIAN: new Color(0xa8201a),
                    STRAW: new Color(0xcad178),
                    DARK_PURPLE: new Color(0x271f30),
                    LIGHT_FRENCH_BEIGE: new Color(0xc7aa74),
                    DARK_KHAKI: new Color(0xcdc078),
                    GOLD_FUSION: new Color(0x7a7054),
                    PERSIAN_PLUM: new Color(0x682025),
                    FALU_RED: new Color(0x882020),
                    COPPER_PENNY: new Color(0xb36163),
                    ROSY_BROWN: new Color(0xb68e96),
                    LAVENDER_GRAY: new Color(0xb9bbca),
                    BEAU_BLUE: new Color(0xbbd1e4),
                    URANIAN_BLUE: new Color(0xbce7fd),
                };
                this.init();
            }

            init = () => {
                const scene = new Scene();
                scene.background = new Color(0xffffff);

                const aspectRatio = window.innerWidth / window.innerHeight;

                const camera = new PerspectiveCamera(50, aspectRatio, 0.1, 50);
                camera.position.set(0, 1.6, 3);
   .........完整代码请登录后点击上方下载按钮下载查看