three打造一个三维飞行胡萝卜和兔子效果代码
代码语言: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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0