示例

HTML

<script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></script><!-- >=2.2 (provide/inject) -->
<script src="https://unpkg.com/three@0.100.0/build/three.min.js"></script><!-- >=0.87 (img.crossorigin) -->
<script src="https://unpkg.com/dat.gui"></script>
<script src="https://unpkg.com/oimo"></script>
<script src="https://unpkg.com/vue-threejs"></script>
<script>Vue.config.productionTip = falseVue.use(VueThreejs) // must be placed before div#demo to renderconsole.log(VueThreejs)// https://stackoverflow.com/a/24103129/10939480THREE.TextureLoader.prototype.crossOrigin = ''VueThreejs.MTLLoader.prototype.crossOrigin = ''
</script><div id="demo"><renderer :size="size"><dat-gui :setup="uiSetup" :model="ui"></dat-gui><scene><orbit-controls :position="ui.camera":rotation="{ x: 2, y: 0, z: 3 }"><camera></camera><audio-listener></audio-listener></orbit-controls><light :hex="0xefefff" :intensity="2" :position="{ x: 50, y: 50, z: 50 }"></light><light :hex="0xefefff" :intensity="2" :position="{ x: -50, y: -50, z: -50 }"></light><ocean :position="ui.ocean"></ocean><sf03 :position="{ y: 10 }" :scale="ui.sf03.scale"></sf03><positional-audio loop url="https://raw.githubusercontent.com/fritx/vue-threejs/chore/vuecli3/public/static/Project_Utopia.ogg":volume="0.3" :position="{ y: 10 }"></positional-audio></div></scene></renderer>
</div>

CSS

body { margin: 0; overflow: hidden; }

JS

/raw.githubusercontent.com/fritx/vue-threejs/chore/vuecli3/examples/water.jpg',wrapS: THREE.RepeatWrapping,wrapT: THREE.RepeatWrapping,repeat: [5, 5]},geom: null}},methods: {handleMesh (mesh) {if (!mesh) returnlet g = mesh.geometryg.rotateX(-Math.PI / 2)for (let i = 0, l = g.vertices.length; i < l; i++) {g.vertices[ i ].y = 10 * Math.sin(i / 2)}this.geom = g},animate (tt) {let g = this.geomfor (let i = 0, l = g.vertices.length; i < l; i++) {g.vertices[i].y = 10 * Math.sin(i / 5 + (tt + i) / 7)}g.verticesNeedUpdate = true}}
})Vue.component('sf03', {template: `
<object3d v-bind="$attrs"><object3d :position="pos" base-url="https://raw.githubusercontent.com/fritx/vue-threejs/chore/vuecli3/public/static/threex/spaceships/"><mesh><m-obj-mtl obj-url="SpaceFighter03.obj"mtl-url="SpaceFighter03.mtl":process="getBody"></m-obj-mtl></mesh><mesh v-for="n in 2" :key="\`1-\${n}\`" :scale="4":position="{ x: 5 * Math.sign(n - 1.5), z: 0.8 }"><geometry type="Plane" :args="[1, 1]"></geometry><material type="MeshBasic" :options="detonation.matOpts"><texture url="lensflare0_alpha.png"></texture></material></mesh><object3d v-for="n in 2" :key="\`2-\${n}\`":rotation="{ y: Math.PI / 2 }" :scale="4":position="{ x: 5 * Math.sign(n - 1.5), z: 2.6 }"><mesh v-for="n1 in 4" :key="n1":rotation="{ x: (n1 - 1) * Math.PI / 4 }"><geometry type="Plane" :args="[1, 1]"></geometry><material type="MeshBasic" :options="shoot.matOpts"><texture :canvas="shoot.txtCanvas"></texture></material></mesh></object3d><animation :fn="animate"></animation></object3d>
</object3d>`,data () {return {detonation: {matOpts: {color: 0x00ffff,side: THREE.DoubleSide,blending: THREE.AdditiveBlending,opacity: 2,depthWrite: false,transparent: true}},shoot: {matOpts: {color: 0xffaacc,side: THREE.DoubleSide,blending: THREE.AdditiveBlending,depthWrite: false,transparent: true},txtCanvas: this.generateShootCanvas()},pos: null}},methods: {animate (tt) {this.pos = { y: Math.sin(tt) }},getBody (group) {let body = group.children[0]body.material.color.set(0xffffff)return body},/* eslint-disable semi, space-in-parens */generateShootCanvas () {// init canvasvar canvas = document.createElement( 'canvas' );var context = canvas.getContext( '2d' );canvas.width = 16;canvas.height = 64;// set gradientvar gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0,canvas.width / 2, canvas.height / 2, canvas.width / 2);gradient.addColorStop( 0, 'rgba(255,255,255,1)' );gradient.addColorStop( 0.5, 'rgba(192,192,192,1)' );gradient.addColorStop( 0.8, 'rgba(128,128,128,0.7)' );gradient.addColorStop( 1, 'rgba(0,0,0,0)' );// fill the rectanglecontext.fillStyle = gradient;context.fillRect(0, 0, canvas.width, canvas.height);// return the just built canvasreturn canvas;}}
})new Vue({el: '#demo',data () {const ui = getModel()return {ui,uiSetup: setupPanel,size: {w: window.innerWidth,h: window.innerHeight}}}
})function getModel () {const ui = {camera: {x: 9, y: 26, z: 20},ocean: {y: -200},sf03: {scale: 1},}return ui
}function setupPanel (gui, ui) {const fc = gui.addFolder('Camera')fc.add(ui.camera, 'x', -50, 50).step(0.01)fc.add(ui.camera, 'y', -50, 50).step(0.01)fc.add(ui.camera, 'z', -50, 50).step(0.01)fc.open()let fo = gui.addFolder('Ocean')fo.add(ui.ocean, 'y', -250, 10).step(0.01)fo.open()let fs = gui.addFolder('SF03')fs.add(ui.sf03, 'scale', 0.1, 7).step(0.01)fs.open()
}

太空船海洋号（spaceship）相关推荐

马斯克公布火星太空船最新照片：施工已达最后一步，10月有望正式推出
鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 脸书上"攻占51区"寻找外星人的热度未消,这厢马斯克又爆"大新闻". 马斯克的星际飞船Starshi ...
BOI 2003 Problem. Spaceship
题目 The Romanian Space Association (RSA) discovered a new asteroid, which they called BOI2003. RSA is ...
外星人图像和外星人太空船_卫星图像：来自太空的见解
外星人图像和外星人太空船 By Christophe Restif & Avi Hoffman, Senior Software Engineers, Crisis Response 危机应对 ...
Datawhale打卡活动 Kaggle Spaceship Titanic Day3
文章目录 Datawhale打卡活动 Kaggle Spaceship Titanic Day 3 验证集划分与树模型步骤1:学习sklearn中的数据划分方法 K折交叉验证(KFold.Strat ...
Kaggle系列（一）：Spaceship Titanic（太空飞船泰坦尼克）
开坑开坑Kaggle系列(通过kaggel练习机器学习与数据分析能力) 2022年3月9日,这是第一个版本的太空泰坦尼克任务我的Github中发布了本任务包含的相应源码与思路分析讲解,欢迎来⭐. 本 ...
Spaceship pilot: 把你的iPhone变成游戏手柄
小霸王.红白机这些已经逐渐淡出了人们的视线,这是属于80后们儿时最难以忘怀的记忆,还记得魂斗罗.90坦克这些经典游戏么?相信现在还有很多人在电脑上使用模拟器重温儿时的经典吧. 伦敦的一家网页开发公司W ...
Kaggle项目——Spaceship Titanic
做了下Kaggle的Spaceship Titanic项目,算是对CNN学习的一个总结,也是回归机器学习的一个响应(第三章的练习题提出可以做一做Kaggle的Titanic案例),具体代码如下: # ...
kaggle入门（二）——Spaceship Titanic
Spaceship Titanic | KagglePredict which passengers are transported to an alternate dimensionhttps:// ...
Datawhale打卡活动 Kaggle Spaceship Titanic Day4
Datawhale打卡活动 Kaggle Spaceship Titanic 尝试了一个coggle科学的打卡活动(Coggle 30 Days of ML(22年10月)),记录一下学习过程! Da ...

太空船海洋号（spaceship）

太空船海洋号

示例

HTML

CSS

JS

太空船海洋号（spaceship）相关推荐

最新文章

热门文章