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);
                scene.add(camera);

                const light = new DirectionalLight(0xf5f5f5, 0.8);
                light.position.set(0.5, 1, -0.5);
                light.shadow.mapSize.width = 2048;
                light.shadow.mapSize.height = 2048;
                light.shadow.camera.near = 0.5;
                light.shadow.camera.far = 10;
                scene.add(light);
                light.castShadow = true;

                const ambientLight = new AmbientLight(0xeeeeee, 0.5);
                scene.add(ambientLight);

                const renderer = new WebGLRenderer({
                    antialias: true,
                    canvas: this.canvasEl,
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.outputEncoding = sRGBEncoding;
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.gammaFactor = 2.2;
                renderer.shadowMap.enabled = true;
                renderer.shadowMap.type = PCFSoftShadowMap;

                const {
                    orbitControls
                } = addDesktopControls(camera, renderer);
                this.camera = camera;
                this.renderer = renderer;
                this.scene = scene;

                this.orbitControls = orbitControls;
             .........完整代码请登录后点击上方下载按钮下载查看