宇宙飞机（space plane）
2024-05-15 23:43:30
飞机plane
- 示例
- HTML
- CSS
- JS
更多有趣示例 尽在知屋安砖社区
示例
HTML
.space
CSS
body {margin:0; overflow:hidden;}/** BACKGROUND SPACE ANIMATION BORROWED FROM Alan Crissey https://codepen.io/TheRealAlan/pen/gzqsy**//* Animations */@keyframes spin {from {transform: rotate( 0deg );}to {transform: rotate( 360deg );}
}/* Global */html {height: 100%;overflow: hidden;
}body {background-color: #000000;height: 100%;
}/* Space */.space {position: absolute;width: 400vw;height: 400vh;top: 50%;left: 50%;margin-top: -200vh;margin-left: -200vw;animation: spin 240s linear infinite;background-size: 240px;backface-visibility: visible;/* Had to base64 SVG background for FF compatibility */background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0MCAyNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0MCAyNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjEwNiIgeT0iOTAiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI3NCIgeT0iNjMiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIyMyIgeT0iNjYiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI1MCIgeT0iMTEwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNjMiIHk9IjEyOCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjQ1IiB5PSIxNDkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI5MiIgeT0iMTUxIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNTgiIHk9IjgiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNDciIHk9IjMzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOTEiIHk9IjQzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTY5IiB5PSIyOSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE4MiIgeT0iMTkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNjEiIHk9IjU5IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTM4IiB5PSI5NSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE5OSIgeT0iNzEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiLz48cmVjdCB4PSIyMTMiIHk9IjE1MyIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyOCIgeT0iMTYzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMjA1IiB5PSIxNzQiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNTIiIHk9IjIwMCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjUyIiB5PSIyMTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB5PSIxOTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxMTAiIHk9IjE4NCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjwvc3ZnPg==);
}canvas {z-index:10; position:relative;}JS
var container;var camera, scene, renderer;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var dirLight;const TEXTURE_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1037366';init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );camera.position.z = 100;// scenescene = new THREE.Scene();var ambient = new THREE.AmbientLight( 0xFF6347 );scene.add( ambient );//LIGHTSdirLight = new THREE.DirectionalLight( 0xffffff );dirLight.position.set( 1, 0, 3 ).normalize();scene.add( dirLight );var spotLight = new THREE.SpotLight( 0xffffff );spotLight.position.set( 400, 1000, 100 );spotLight.castShadow = true;spotLight.shadow.mapSize.width = 1024;spotLight.shadow.mapSize.height = 1024;spotLight.shadow.camera.near = 500;spotLight.shadow.camera.far = 400;spotLight.shadow.camera.fov = 30;scene.add( spotLight );var directionalLight = new THREE.DirectionalLight( 0xffeedd );directionalLight.position.set( 0, 0, 2 );scene.add( directionalLight );// texturevar manager = new THREE.LoadingManager();manager.onProgress = function ( item, loaded, total ) {console.log( item, loaded, total );};var texture = new THREE.Texture();var onProgress = function ( xhr ) {if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( Math.round(percentComplete, 2) + '% downloaded' );}};var onError = function ( xhr ) {};// modelloader = new THREE.TextureLoader();loader.setCrossOrigin( 'https://s.codepen.io' );var texture = loader.load( TEXTURE_PATH + '/texture.png' );var loader = new THREE.OBJLoader( manager );loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1037366/fighter.obj', function ( object ) {object.traverse( function ( child ) {if ( child instanceof THREE.Mesh ) {child.material.map = texture;}} );object.position.y = 0;scene.add( object );}, onProgress, onError );//renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setClearColor( 0x000000, 0 );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );document.addEventListener( 'mousemove', onDocumentMouseMove, false );//window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function onDocumentMouseMove( event ) {mouseX = ( event.clientX - windowHalfX ) / 2;mouseY = ( event.clientY - windowHalfY ) / 2;}//function animate() {requestAnimationFrame( animate );render();}function render() {camera.position.x += ( mouseX - camera.position.x ) * .05;camera.position.y += ( - mouseY - camera.position.y ) * .05;camera.lookAt( scene.position );renderer.render( scene, camera );renderer.domElement.id = 'c';}宇宙飞机（space plane）相关推荐
- 怎么用计算机弹出行星,宇宙模拟器space engine教程2：创建自定义太阳系，包括创建恒星，行星等（上）...
本次教程用宇宙模拟器space engine 0.980版本教大家如何创建自定义太阳系系统,包括创建恒星,行星,卫星,小行星,彗星等天体,最后教如何制作插件,打包压缩成pak文件. 把链接复制到浏览器 ...
- iFIERO -- (一) 宇宙大战 SPACE BATTLE — 新建场景SCENE、精灵节点、PARTICLE粒子及背景音乐
开始游戏教程前,首先介绍一下SpriteKit是什么? SpriteKit提供了一个图形渲染和动画的基础结构,你可以使用它让任意类型的纹理图片或者精灵动起来.SpriteKit使用传统的渲染循环,在每 ...
- Problem N: 设计飞机类Plane及其派生类
Problem Description 设计一个飞机Plane类,由它派生出歼击机Fighter类和轰炸机Bomber类,歼击机Fighter类和轰炸机Bomber类又共同派生出歼轰机(多用途战斗机) ...
- Unity初级项目实战：官方宇宙飞机大战游戏（一）
一.创建项目和下载素材,设置背景 1.新建一个项目,取名为MySpaceShooterDemo 2.在资源商店搜索Space Shooter tutorial,然后下载导入,导入时会询问是否覆盖,点击 ...
- Unity初级项目实战：官方宇宙飞机大战游戏（二）
二.设置玩家飞行器,控制玩家移动和限制范围,制作子弹,控制发射子弹 1.在Models文件夹里面找到vehicle_playerShip,拉进Scene面板,取名为Player,位置往上拉5米 2.给 ...
- 飞机大战小游戏(超详细)
偷学Python之最后的项目二:飞机大战小游戏(超详细) 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼 甜甜先说 这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思 ...
- Python+Pgzrun制作打飞机游戏（附源码）
目录 基本框架 创建滚动背景 创建飞机 让plane移动 发射子弹 创建敌机 敌机移动 金币制度 关卡制度 设置 创建更高级飞机(SRplane和SSRplane ) 开始 炸弹 介绍 源码 基本框架 ...
- 手把手教你使用Pygame制作飞机大战小游戏，4万字超详细讲解！
点击上方"早起Python",关注并"星标" 每日接收原创Python干货! 大家好,偷学Python系列是由小甜同学从初学者的角度学习Python的笔记,其特 ...
- python入门笔记——飞机大战（极简版、未进行继承优化）
python入门笔记--飞机大战(极简版.未进行继承优化) import random import pygame# 引用pygame里的模块 from pygame.locals import *# ...
最新文章
- 自动 Android* 应用测试
- 友盟-统计不到线上应用数据的坑
- Going Home
- 【常用】数学符号及读法大全
- python numpy中sum()时出现负值
- 在线生成大全（这里真的什么都有）
- 1109: 数根（函数专题）
- 收藏 | 损失函数实现数据扩增
- IP地址转换函数——inet_pton inet_ntop inet_aton inet_addr inet_ntoa
- hdu 2873 Bomb Game 博弈论
- iOS 14.7 中的所有新功能
- 近期生活中将会发生的一点变化！
- 查找100-200以内素数
- MMORPG游戏服务器技术选型参考
- 这个被上帝抛弃的国家，创立了全球一半的科技公司
- Array，String 方法
- 中国大陆网站TOP100
- 如何系统学习MySQL数据库？
- 关于数学计算机手抄报简单的,简单漂亮的数学手抄报图片大全
- 关于matlab求含有nan矩阵的均值