使用threejs 实现3D物体展示,平移实现类似百度地图功能
为了实现类似百度地图功能
使用threejs 实现3D物体,通过鼠标平移,缩放,键盘箭头按钮左右移动的功能展示。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
* { margin: 0; }
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/three.js/91/three.js"></script>
<script>
var iswireframe = false;
var scene , camera , renderer;
var fov = 75, //拍摄距离 视野角值越大,场景中的物体越小
near = 1,//相机离视体积最近的距离
far = 1000;//相机离视体积最远的距离;
var cameraX = 0, cameraY = 15, cameraZ = 8;
var sceneX = 0, sceneZ = 0;
document.body.style.cursor="move";
function initFloor(){
var floorGeometry = new THREE.BoxGeometry( 20, 0.01, 6);
//var material = new THREE.MeshBasicMaterial( { color: "green", wireframe : iswireframe } );
for ( var i = 0; i < floorGeometry.faces.length; i++ ) {
floorGeometry.faces[ i ].color.set( 0xEEEED1 );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe : iswireframe } );
var floor = new THREE.Mesh( floorGeometry, material );
scene.add( floor );
}
function initGrid(){ //辅助网格
var helper = new THREE.GridHelper( 1000, 50 );
//helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
}
function initBuild1(){
var buildingGeometry1 = new THREE.BoxGeometry(2, 2, 3);
for ( var i = 0; i < buildingGeometry1.faces.length; i++ ) {
buildingGeometry1.faces[i].color.setHex( Math.random() * 0xffffff );
}
var building1 = new THREE.Mesh(
buildingGeometry1,
new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors, wireframe : iswireframe})
);
building1.position.set(0, 1, 2);
scene.add(building1);
}
function buildColor(geometry){
for ( let i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[i].color.setHex( Math.random() * 0xffffff );
}
}
function initWall(){
let wallColor = 0xEBEBEB;
let wallHeight = 1;
let wallGeometryback = new THREE.BoxGeometry(20, wallHeight, 0.1);
console.log(wallGeometryback.faces.length);
//buildColor(wallGeometryback);
let materialParamertes = {color: wallColor, vertexColors: THREE.FaceColors, wireframe : iswireframe, opacity : 0.01};
var wallback = new THREE.Mesh(
wallGeometryback,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallback.position.set(0, 0.5, -3);
scene.add(wallback);
let wallGeometryLeft = new THREE.BoxGeometry(0.1, wallHeight, 6);
var wallLeft = new THREE.Mesh(
wallGeometryLeft,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallLeft.position.set(-10, 0.5, 0);
scene.add(wallLeft);
let wallGeometryRight = new THREE.BoxGeometry(0.1, wallHeight, 6);
var wallRight = new THREE.Mesh(
wallGeometryRight,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallRight.position.set(10, 0.5, 0);
scene.add(wallRight);
/*
let wallGeometryFront = new THREE.BoxGeometry(20, wallHeight, 0.1);
var wallFront = new THREE.Mesh(
wallGeometryFront,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallFront.position.set(0, 0.5, 3);
scene.add(wallFront);
*/
}
function onDocumentKeyDown(event){
switch(event.keyCode){
case 37: //左
cameraX -= 1;
sceneX -=1;
break;
case 39: //右
cameraX += 1;
sceneX +=1;
break;
case 38: //上
//fx -= 0.1;
cameraZ -= 1;
sceneZ -= 1;
break;
case 40: //下
//fx += 0.1;
cameraZ += 1;
sceneZ += 1;
break;
default:
break;
}
renderInit();
}
function onDocumentMouseWheel(event) {
if (event.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (event.wheelDelta > 0) { //当滑轮向上滚动时
fov -= (near < fov ? 1 : 0);
}
if (event.wheelDelta < 0) { //当滑轮向下滚动时
fov += (fov < far ? 1 : 0);
}
} else if (event.detail) { //Firefox滑轮事件
if (event.detail > 0) { //当滑轮向上滚动时
fov += 1;
}
if (event.detail < 0) { //当滑轮向下滚动时
fov -= 1;
}
}
//改变fov值,并更新场景的渲染
camera.fov = fov;
renderInit();
}
function onDocumentMouseDown(event) {
if (event.button != 0) return;
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
//console.log("x="+movementX+" y="+movementY);
cameraX -= movementX * 0.01;
sceneX -= movementX * 0.01;
cameraZ -= movementY * 0.01;
sceneZ -= movementY * 0.01;
renderInit();
}
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', onDocumentMouseUp);
}
//场景初始化
function sceneInit(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fov , window.innerWidth/window.innerHeight, near, far );
//camera.position.set(0, 0, 7);
//相机位置
//cameraX = 0; cameraZ = 8;
camera.up.x = 0;
camera.up.y = 1; //相机朝向--相机上方为y轴
camera.up.z = 0;
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize( window.innerWidth - 10, window.innerHeight -10 );
renderer.setClearColor(0xFFFFFF, 1.0);
document.body.appendChild( renderer.domElement );
renderer.setClearColor(0xFFFFFF, 1.0);
document.addEventListener('keydown',onDocumentKeyDown,false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);//兼容ie chrome
document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);//兼容火狐
document.addEventListener('mousedown', onDocumentMouseDown, false);
initGrid();
initFloor();
initBuild1();
initWall();
}
function renderInit(){
camera.position.set(cameraX, cameraY, cameraZ);
camera.lookAt(sceneX, 0, sceneZ);
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
sceneInit();
renderInit();
//动画
function animate() {
requestAnimationFrame( animate );
// stats.begin();
initAll();
//stats.end();
}
</script>
</html>
使用threejs 实现3D物体展示,平移实现类似百度地图功能相关推荐
- threejs 三面体_用threejs 实现3D物体在浏览器展示
My first three.js app * { margin: 0; } canvas { width:100%; height: 100%;} var iswireframe = false;v ...
- threejs制作3d模型展示网页
1.在建模软件中制作好模型与贴图 导出obj 或 fbx 均可 2.打开浏览器输入https://threejs.org/editor/ 进入threejs官网提供的网络编辑器 将模型拖入视图中 3. ...
- Unity 3D模型展示之UI布局
整体布局情况 导入UI资源并统一将Texture Type设置为Sprite(2D and UI) 1.标题 将Text中的文本设置为'Unity 3D物体展示实例'. 添加Shadow与Outlin ...
- 基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟 示例描述与操作指南 示例效果展示 实现步骤 示例描述与操作指南 当前示例用于展示室内灯光的多角度光影效果. 示例效果展示 实现步骤 第一步 创建聚光 ...
- echarts实现某个市3D地图展示
应业务需求,以3D形式展示某个城市的地图,并根据该城市下属区域车辆的多少,动态变幻区域颜色 大概效果如下(颜色随便给的,超丑 简单记录下吧) 以舟山市为例: 1.生成舟山市的geojson文件 查询链 ...
- threejs创建3d交互地图
文章目录 前言 关键点 源码 总结 前言 基于react-hooks创建的三维地图,只实现了基本的交互展示,可根据个人喜好增加各种交互和展示效果,效果如下. 关键点 使用threejs创建3d地图注意 ...
- 英伟达这篇CVPR 2022 Oral火了!2D图像秒变逼真3D物体!虚拟爵士乐队来了!
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达 你见过乐器自己演奏么?看看这个: 图1. "活灵活现"的虚拟乐器还是在 NVIDIA 服 ...
- threejs实现3d全景看房
背景 随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展示给用户的视觉效果便不能仅仅局限于2D视觉效果,全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识 ...
- 基于ROS机器人的3D物体识别与三维重建(三)基于ROS的3D物体识别
Kinect2相机标定与点云数据获取 1.介绍 2 基于Gazebo搭建物体识别仿真环境 2.1 Gazebo简介 2.2 创建仿真环境 3 三维物体识别 3.1 基于模板匹配的物体识别流程 3.2 ...
最新文章
- http://www.fx114.net/qa-24-116329.aspx
- Microsoft Lync Server 2013 协议路由
- POJ 1185 解题报告 炮兵阵地
- 构造函数和析构函数深拷贝和浅拷贝
- openwrt mt7620 内存大小检测
- 请描述计算机软件分类,2014年计算机一级考试MsOffice模拟题
- ASP.NET页面生命周期和asp.net应用程序生命周期
- 430.扁平化多级双向链表
- [转贴]鲁棒性——健康的系统
- meson 交叉编译
- python图像质量评价_OpenCV--Python 图像质量评价.docx
- Python量化交易
- Redis中的SDS
- 图书馆管理系统Python+MySQL+tkinter图形化界面+管理员登录+学生登录(注释详细)
- 银行家舍入-四舍六入五成双
- 循环冗余校验(CRC)之verilog实现
- 【DBA100人】Payso张耀辉:学材料专业出身的他转身做了“码农”
- 一个汽车软件测试工程师的三年工作总结
- EurekaServer启动出错问题解决方案
- Ps cloud里的CRM软件到底强在何处?
热门文章
- java公路车组装教程_自行车DIY入门教程,图文展示自行车组装全过程。(原创图文,转载请注明出处)...
- 计算机系统基础——我与袁春风不得不说的知识——入门必看
- [XUPT_ACM]寒假第二次比赛题解
- 申请注册GMAIL的免费企业邮箱
- 团队RESTful 风格API规范
- 数学建模 导航(持续更新ing)
- networking /etc/network/interfaces 笔记221102
- epics安装css,EPICS-synApps/areaDetector安装
- 关于支付宝CertificateException: X.509 not found的那些事~づ♡ど,JDK同样的版本之间也会有问题!
- 基于Python-OpenCV的图片覆盖技术——即把一个图片P到另一个图片上