html部分

<!DOCTYPE html>
<html lang="en" class="no-js"><head><meta charset="UTF-8" /><title>飞机</title><script type="text/javascript" src="js/three.js"></script><script type="text/javascript" src="js/main.js"/></script><style type="text/css">.world {position: absolute;width: 100%;height: 100%;overflow: hidden;background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);}</style></head><body><div class="world" id="world"></div></body>
</html>

js部分

//将会用到的颜色
var Colors = {red:0xf25346,white:0xd8d0d1,brown:0x59332e,pink:0xF5986E,brownDark:0x23190f,blue:0x68c3c0,
};var scene,camera, fieldOfView, aspectRatio, nearPlane, farPlane,renderer, container;//相对于屏幕鼠标坐标var HEIGHT, WIDTH,mousePos = { x: 0, y: 0 };//初始化function createScene() {HEIGHT = window.innerHeight;WIDTH = window.innerWidth;scene = new THREE.Scene();aspectRatio = WIDTH / HEIGHT;fieldOfView = 60;nearPlane = 1;farPlane = 10000;camera = new THREE.PerspectiveCamera(fieldOfView,aspectRatio,nearPlane,farPlane);scene.fog = new THREE.Fog(0xFFE4FF, 100,950);camera.position.x = 0;camera.position.z = 200;camera.position.y = 100;renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });renderer.setSize(WIDTH, HEIGHT);renderer.shadowMap.enabled = true;container = document.getElementById('world');container.appendChild(renderer.domElement);window.addEventListener('resize', handleWindowResize, false);
}// 窗口改变function handleWindowResize() {HEIGHT = window.innerHeight;WIDTH = window.innerWidth;renderer.setSize(WIDTH, HEIGHT);camera.aspect = WIDTH / HEIGHT;camera.updateProjectionMatrix();
}// 光源var ambientLight, hemisphereLight, shadowLight;function createLights() {hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)shadowLight = new THREE.DirectionalLight(0xffffff, .9);shadowLight.position.set(150, 350, 350);shadowLight.castShadow = true;shadowLight.shadow.camera.left = -400;shadowLight.shadow.camera.right = 400;shadowLight.shadow.camera.top = 400;shadowLight.shadow.camera.bottom = -400;shadowLight.shadow.camera.near = 1;shadowLight.shadow.camera.far = 900;shadowLight.shadow.mapSize.width = 2048;shadowLight.shadow.mapSize.height = 2048;scene.add(hemisphereLight);scene.add(shadowLight);
}var AirPlane = function(){this.mesh = new THREE.Object3D();this.mesh.name = "airPlane";// Create the cabinvar geomCockpit = new THREE.BoxGeometry(60,50,50,1,1,1);//长宽高 都是一段var matCockpit = new THREE.MeshPhongMaterial({color:Colors.blue, shading:THREE.FlatShading});var cockpit = new THREE.Mesh(geomCockpit, matCockpit);cockpit.castShadow = true;cockpit.receiveShadow = true;this.mesh.add(cockpit);// Create Enginevar geomEngine = new THREE.BoxGeometry(20,50,50,1,1,1);var matEngine = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});var engine = new THREE.Mesh(geomEngine, matEngine);engine.position.x = 40;engine.castShadow = true;engine.receiveShadow = true;this.mesh.add(engine);// Create Tailplanevar geomTailPlane = new THREE.BoxGeometry(15,20,5,1,1,1);var matTailPlane = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);tailPlane.position.set(-35,25,0);tailPlane.castShadow = true;tailPlane.receiveShadow = true;this.mesh.add(tailPlane);// Create Wingvar geomSideWing = new THREE.BoxGeometry(40,8,150,1,1,1);var matSideWing = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});var sideWing = new THREE.Mesh(geomSideWing, matSideWing);sideWing.position.set(0,0,0);sideWing.castShadow = true;sideWing.receiveShadow = true;this.mesh.add(sideWing);// 螺旋桨var geomPropeller = new THREE.BoxGeometry(20,10,10,1,1,1);var matPropeller = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});this.propeller = new THREE.Mesh(geomPropeller, matPropeller);this.propeller.castShadow = true;this.propeller.receiveShadow = true;// Bladesvar geomBlade = new THREE.BoxGeometry(1,100,20,1,1,1);var matBlade = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});var blade = new THREE.Mesh(geomBlade, matBlade);blade.position.set(8,0,0);blade.castShadow = true;blade.receiveShadow = true;this.propeller.add(blade);this.propeller.position.set(50,0,0);this.mesh.add(this.propeller);
};Sky = function(){this.mesh = new THREE.Object3D();this.nClouds = 20;this.clouds = [];var stepAngle = Math.PI*2 / this.nClouds;for(var i=0; i<this.nClouds; i++){var c = new Cloud();this.clouds.push(c);var a = stepAngle*i;var h = 750 + Math.random()*200;c.mesh.position.y = Math.sin(a)*h;c.mesh.position.x = Math.cos(a)*h;c.mesh.position.z = -400-Math.random()*400;c.mesh.rotation.z = a + Math.PI/2;var s = 1+Math.random()*2;c.mesh.scale.set(s,s,s);this.mesh.add(c.mesh);}
}Sea = function(){var geom = new THREE.CylinderGeometry(600,600,800,40,10);geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));var mat = new THREE.MeshPhongMaterial({color:Colors.blue,transparent:true,opacity:.6,shading:THREE.FlatShading,});this.mesh = new THREE.Mesh(geom, mat);this.mesh.receiveShadow = true;
}Cloud = function(){this.mesh = new THREE.Object3D();this.mesh.name = "cloud";var geom = new THREE.CubeGeometry(20,20,20);var mat = new THREE.MeshPhongMaterial({color:Colors.white,});var nBlocs = 3+Math.floor(Math.random()*3);for (var i=0; i<nBlocs; i++ ){var m = new THREE.Mesh(geom.clone(), mat);m.position.x = i*15;m.position.y = Math.random()*10;m.position.z = Math.random()*10;m.rotation.z = Math.random()*Math.PI*2;m.rotation.y = Math.random()*Math.PI*2;var s = .1 + Math.random()*.9;m.scale.set(s,s,s);m.castShadow = true;m.receiveShadow = true;this.mesh.add(m);}
}// 3D模型
var sea;
var airplane;function createPlane(){airplane = new AirPlane();airplane.mesh.scale.set(.25,.25,.25);airplane.mesh.position.y = 100;scene.add(airplane.mesh);
}function createSea(){sea = new Sea();sea.mesh.position.y = -600;scene.add(sea.mesh);
}function createSky(){sky = new Sky();sky.mesh.position.y = -600;scene.add(sky.mesh);
}function loop(){updatePlane();sea.mesh.rotation.z += .004;sky.mesh.rotation.z += .01;renderer.render(scene, camera);requestAnimationFrame(loop);
}function updatePlane(){var targetY = normalize(mousePos.y,-.75,.75,25, 175);var targetX = normalize(mousePos.x,-.75,.75,-100, 100);airplane.mesh.position.y = targetY;airplane.mesh.position.x = targetX;airplane.propeller.rotation.x += 0.3;
}function normalize(v,vmin,vmax,tmin, tmax){var nv = Math.max(Math.min(v,vmax), vmin);var dv = vmax-vmin;var pc = (nv-vmin)/dv;var dt = tmax-tmin;var tv = tmin + (pc*dt);return tv;
}function init(event){document.addEventListener('mousemove', handleMouseMove, false);createScene();createLights();createPlane();createSea();createSky();loop();
}//键盘事件
(function setKeyEvents(){window.addEventListener('keydown',function(e){console.log(e);switch(e.keyCode){case 81:camera.position.x += 1;console.log('q');break;case 69:camera.position.x -= 1;console.log('e');break;case 39:camera.position.y += 1;console.log('右');break;case 37:camera.position.y -= 1;console.log('左');break;case 38:camera.position.z += 1;console.log('上');break;case 40:camera.position.z -= 1;console.log('下');}renderer.render(scene, camera);}); })();// 鼠标事件var mousePos = { x: 0, y: 0 };function handleMouseMove(event) {var tx = -1 + (event.clientX / WIDTH)*2;var ty = 1 - (event.clientY / HEIGHT)*2;mousePos = {x:tx, y:ty};
}window.addEventListener('load', init, false);

threejs 实现小飞机建模相关推荐

  1. Threejs中 Blender建模的问题 ------ uv贴图中修改贴图的方向和uv贴图材质重复不起作用

    修改贴图的方向(只有一个面) 数字键盘/来在3D视图中控制视野中选中对象的显示切换 首先确保添加了uv的数据,不然会在最终的显示材质时有问题 直接在Blender建模,添加材质,添加纹理 在three ...

  2. 在mlh奖学金期间对茱莉亚的贡献20

    I got Julia Summer of Code in May'20. I was excited and started learning about UCX networking and MP ...

  3. 前端开发常用技术工具网址导航汇总

    这个是之前github看到过的一篇前端开发网址总结,涵盖前端开发所有常用的相关技术和插件工具汇总, 以后找前端相关学习资料不用到处找,收藏这一个就可以了,觉得很不错现在分享给大家. 1.1 HTML/ ...

  4. 可视化有关JS官网链接

    [threeJs]3d建模 基于webGL threejs官网:https://threejs.org/  threejs中文教程:Three.js 中文教程 | 参考手册 | 使用指南 | 动画特效 ...

  5. Blender基础建模 | 大帅老猿threejs特训

    最近接触到了web3d相关的知识,特别感觉"大帅老猿"和"胖达老师"带我入门! 今天来和大家一起讲讲我建模的故事!顺便教大家一起实现建模自由! 一.首先下载一个 ...

  6. Blender建模笔记 | 大帅老猿threejs特训

    写在前面 随着5G的普及网速变得越来快元宇宙的概念应然而生,需要多公司都开始搭建自己的沉浸式应用.搭建元宇宙项目的方案有很多种,比较常见的就是通过Threejs来实现.对于我们程序员由设计人员提供的模 ...

  7. ThreeJS的特效合成器和后期处理通道

    最近要写个 web 交互式发光可交互的框架.没查到啥好资料,自己一个人摸索了很久,有些失望,可是毕竟是探索过的东西,所以做个记录,怀念我过去好多天掉的青丝(捂脸).我在前面那篇博客里面已经介绍了如何让 ...

  8. THREEJS - 模型居中

    在使用THREEJS的过程中,我们常常会遇到关于模型的处理,有时候建模的同事会帮我们将模型归零后给我们,有时候是没有归零的,但这时候需要将模型在场景中居中展示. 这里采用的办法是包围盒的方式,具体代码 ...

  9. threejs制作3d模型展示网页

    1.在建模软件中制作好模型与贴图 导出obj 或 fbx 均可 2.打开浏览器输入https://threejs.org/editor/ 进入threejs官网提供的网络编辑器 将模型拖入视图中 3. ...

最新文章

  1. 大学毕业没有实习经历_我是如何在大学毕业后没有实习的情况下获得第一份开发人员工作的...
  2. 如何构造充填图元_每日一练36：关于如何在Revit中使用自适应族创建矩形无缝曲面幕墙嵌板的方法...
  3. 缓冲流、转换流、序列化流
  4. 离散实验偏序关系满足实验报告C语言,离散数学实验三：偏序关系中盖住关系的求取及格论中有补格的判定...
  5. tensorflow权重初始化
  6. call 和 apply 的使用
  7. 小米上市破发，其生态内部的隐患终于显露了？
  8. Ubuntu 下安装 输入法
  9. 【20090702-03】ArcEngine的类库介绍（转）
  10. 营销管理手册_某连锁动物医院营销管理咨询项目方案成功汇报
  11. SpringCloud高级应用(OpenFeign Ribbon Steam Sleuth+Zipkin)
  12. GPS原理与接收机————GPS信号及其导航电文
  13. 教师必备，4款超实用的微信小程序分享~
  14. Go 依赖注入库dig
  15. c语言中getc函数,C语言中getc怎么用？
  16. Spring Boot企业微信点餐系统
  17. 【5G NR】CSI-RS
  18. CAD二次开发——选择集（1）
  19. ipv4到ipv6过渡的三种方案
  20. 【软件质量】软件复杂性

热门文章

  1. 双百双新产业项目是什么_全区“双百双新”产业项目推进工作电视电话会议召开...
  2. 【廖雪峰】写一个验证Email地址的正则表达式
  3. 经济寒冬影响存储专业人士
  4. hdu多校第七场 1011 （hdu6656） Kejin Player 概率dp
  5. 计算机在识别图像时“看到”了什么？
  6. 十年产品人是如何炼成的？
  7. 漫说Android 中SurfaceView蕴含的美
  8. 2016 HCTF web writeup
  9. 微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置
  10. Linux集群部署系列（六）：Hadoop 在window系统下安装方法