three打造一个三维飞行胡萝卜和兔子效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three打造一个三维飞行胡萝卜和兔子效果代码

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
 



    <style>
        :root {
            font-size: 16px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        a {
            color: red;
        }

        canvas {
            display: block;
        }

        .credits {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            font-family: Open Sans, sans-serif;
            font-size: 0.55rem;
            color: var(--color-a);
        }

            .credits > span {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-top: .5rem;
            }
    </style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>


    <script>
        var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var internals = {};

        internals.W = 500;
        internals.H = 500;

        internals.randomIntFromInterval = function (min, max) {
            return (
                Math.floor(Math.random() * (max - min + 1) + min));
        };

        internals.materials = {
            orange: new THREE.MeshPhongMaterial({ color: 0xB7513C, flatShading: true }),
            green: new THREE.MeshPhongMaterial({ color: 0x379351, flatShading: true }),
            brown: new THREE.MeshPhongMaterial({ color: 0x5C2C22, flatShading: true }),
            pink: new THREE.MeshPhongMaterial({ color: 0xB1325E, flatShading: true }),
            gray: new THREE.MeshPhongMaterial({ color: 0x666666, flatShading: true }),
            clouds: new THREE.MeshPhongMaterial({ color: 0xeeeeee, flatShading: true }),
            rabbit: new THREE.MeshPhongMaterial({ color: 0xaaaaaa, flatShading: true })
        };


        internals.shadowSupport = function (group) {

            group.traverse(function (object) {

                if (object instanceof THREE.Mesh) {
                    object.castShadow = true;
                    object.receiveShadow = true;
                }
            });
        };


        console.log('????????'); var


        Cloud = function () {
            function Cloud(config) {
                _classCallCheck(this, Cloud);

                console.log('??');

                this.mesh = new THREE.Group();

                var cloud = this._createCould();

                this.mesh.position.x = 200;
                this.mesh.position.y = config.y || Math.random();
                this.mesh.position.z = config.z || 0;

                this.mesh.add(cloud);

                this.animate(config);
            } _createClass(Cloud, [{
                key: 'animate', value: function animate(

                  config) {
                    var _this = this;

                    TweenMax.to(this.mesh.position, 3.5, {
                        x: -200,
                        repeat: Infinity,
                        delay: config.delay || 0,
                        onRepeat: function onRepeat() {

                            _this.mesh.position.y = internals.randomIntFromInterval(-10, 20);
                        }
                    });

                }
            }, {
                key: '_createCould', value: function _createCould() {

                    var group = new THREE.Group();

                    var cloudGeo = new THREE.SphereGeometry(5, 4, 6);
                    var cloud = new THREE.Mesh(cloudGeo, internals.materials.clouds);
                    cloud.scale.set(1, 0.8, 1);

                    var cloud2 = cloud.clone();
                    cloud2.scale.set(.55, .35, 1);
                    cloud2.position.set(5, -1.5, 2);

                    var cloud3 = cloud.clone();
                    cloud3.scale.set(.75, .5, 1);
                    cloud3.position.set(-5.5, -2, -1);

                    group.add(cloud);
                    group.add(cloud2);
                    group.add(cloud3);

                    internals.shadowSupport(group);

                    return group;
                }
            }]); return Cloud;
        }(); var


    Carrot = function () {
        function Carrot() {
            _classCallCheck(this, Carrot);

            console.log('??');

            this.mesh = new THREE.Group();

            this.body = this._createBody();
            this.wings = this._createWings();
            this.leafs = this._createLeafs();
            this.pilot = new Pilot();

            this.mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
            this.mesh.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);

            this.mesh.add(this.body);
            this.mesh.add(this.wings);
            this.mesh.add(this.leafs);
            this.mesh.add(this.pilot.mesh);

            this.animate();
        } _createClass(Carrot, [{
            key: 'animate', value: function animate() {

                TweenMax.to(this.mesh.position, 1, {
                    x: -2,
                    y: 4,
                    repeat: Infinity,
                    yoyo: true,
                    ease: Sine.easeInOut
                });


                TweenMax.to(this.mesh.rotation, 1, {
                    x: -1.7,
                    repeat: Infinity,
                    yoyo: true,
                    ease: Sine.easeInOut
                });


                TweenMax.to(this.leafs.rotation, 0.1, {
                    y: Math.PI,
                    repeat: Infinity,
                    ease: Power0.easeNone
                });

            }
        }, {
            key: '_createBody', value: function _createBody() {

                var group = new THREE.Group();

                var bodyGeom = new THREE.CylinderGeometry(5, 2, 25);
                bodyGeom.vertices[16].y += 3;
                bodyGeom.vertices[17].y -= 2;

                group.add(new THREE.Mesh(bodyGeom, internals.materials.orange));

                internals.shadowSupport(group);

                return group;
            }
        }, {
            key: '_createWings', value: function _createWings() {

                console.log('??');

                var group = new THREE.Group();
                var geometry = new THREE.CubeGeometry(7, 7, 0.5);

                geometry.vertices[2].y += 2;
                geometry.vertices[3].y += 2;
                geometry.vertices[2].x -= 1;
                geometry.vertices[3].x -= 1;

                var wingR = new THREE.Mesh(geometry, internals.materials.brown);
                wingR.position.x = 6;
                wingR.position.y = 2;
                wingR.position.z = 1;

                var wingL = wingR.clone();
                wingL.position.x = -6;
                wingL.rotation.y = Math.PI;

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