Threejs物联网，养殖场3D可视化（一）

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：引用养殖场模型进行展示。效果图如下：

2，主要说明

养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋予材质进行展示。

引入模型代码如下：

3，源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Threejs物联网，养殖场3D可视化</title><meta charset="utf-8"><script type="text/javascript" src="libs/three.js"></script><script type="text/javascript" src="libs/OrbitControls.js"></script><script type="text/javascript" src="libs/OBJLoader.js"></script><script type="text/javascript" src="libs/MTLLoader.js"></script><style>body {margin: 0;overflow: hidden;}</style></head><body><div id="dom"></div><script type="text/javascript">var camera;var renderer;var mesh;function init() {// 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。var scene = new THREE.Scene();var urls = ['assets/textures/posx.jpg','assets/textures/negx.jpg','assets/textures/posy.jpg','assets/textures/negy.jpg','assets/textures/posz.jpg','assets/textures/negz.jpg'];var cubeLoader = new THREE.CubeTextureLoader();scene.background = cubeLoader.load(urls);// 创建一个摄像机，它定义了我们正在看的地方camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 30000);// 将摄像机对准场景的中心camera.position.x = 5500;camera.position.y = 3000;camera.position.z = 2000;camera.lookAt(scene.position);var orbit = new THREE.OrbitControls(camera);// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景// initialize basic rendererrenderer = new THREE.WebGLRenderer({antialias: true,logarithmicDepthBuffer: true,});renderer.setSize(window.innerWidth, window.innerHeight);// 添加环境光scene.add(new THREE.AmbientLight("#ffffff", 1.5));// 将呈现器的输出添加到HTML元素document.getElementById("dom").appendChild(renderer.domElement);// 在屏幕上显示坐标轴var axes = new THREE.AxesHelper(10000);// scene.add(axes);initModel();// 启动动画renderScene();// 添加模型function initModel() {var mtlLoader = new THREE.MTLLoader();mtlLoader.setPath("assets/models/obj_mtl/")mtlLoader.load('yangzhichang.mtl', function(materials) {materials.preload();var objLoader = new THREE.OBJLoader();objLoader.setMaterials(materials);objLoader.load('assets/models/obj_mtl/yangzhichang.obj', function(object) {mesh = object;object.traverse(function(node) {if (node.material) {node.material.side = THREE.DoubleSide;}});scene.add(mesh);});});}document.addEventListener('click', onDocumentMouseDown, false);function onDocumentMouseDown(event) {// 点击屏幕创建一个向量var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());var intersects = raycaster.intersectObjects(mesh, true);if (intersects.length > 0) {var name = intersects[0].object.name;var obj = scene.getObjectByName(name);console.log(obj)scene.remove(obj);}}function renderScene() {orbit.update();requestAnimationFrame(renderScene);renderer.render(scene, camera);}// 渲染的场景renderer.render(scene, camera);}window.onload = init;function onResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}// 监听调整大小事件window.addEventListener('resize', onResize, false);</script></body>
</html>

4，下载

使用threejs渲染养殖场模型源码，养殖场模型obj+mtl格式，threejs模型Threejs渲染obj+mtl模型，Threejs加载3D工厂模型Threejs实现引入工厂模型更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/baidu_29701003/54823032

5，源码和模型

需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言

联系我微信：1171053128

Threejs物联网，养殖场3D可视化（一）相关推荐

Threejs物联网，养殖场3D可视化（二）
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示.效果图如下: 2,主要说明养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋 ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...
三维可视化建模-园区3d可视化-3d数字孪生系统建设
3D虚实联动三维仿真园区可视化展示系统可以实时显示数据,提出需求发现问题,并且作出及时准确的反馈,商迪3D通过3D建模.大数据.物联网.3d可视化.虚拟现实等数字化手段,把园区设备映射到虚拟仿真空间可 ...
3D物联网大数据可视化制作平台
大数据3D可视化产业正在用一个超乎我们想象的速度蓬勃发展,随着3D物联网大数据时代的来临,商迪3D身为拥有前沿3D物联网技术的我们,也要紧跟科技时代的步伐为各大企业打造优秀的信息数据库.3D物联网大数 ...
【商迪3D】详谈3d物联网工业数字可视化三维仿真技术解决方案
一:项目方案介绍商迪3D工业网物联网3d可视化解决方案是结合3D物联网利用三维仿真.数字映射.人工智能和大数据等技术,在三维仿真世界使用三维建模技术对真实场景进行一比一高度仿真还原.通过3D数字可视 ...
前端前沿web 3d可视化技术 ThreeJS学习全记录
前端前沿web 3d可视化技术随着浏览器性能和网络带宽的提升使得3D技术不再是桌面的专利打破传统平面展示模式前端方向主要流向的3D图形库包括Three.js和WebGL WebGL灵活高性能, ...
3D物联网之生产线监控3D可视化解决方案
一.项目方案介绍商迪3D生产线监控3D可视化解决方案,是结合物联网监控系统(智慧工厂).虚实联动与三维建模先进技术,以三维立体模式呈现出来,使得界面直观.简单,便于监控人员识别异常信息 ...
3D物联网之机房监控3D可视化解决方案
项目方案介绍商迪3D物联网的机房监控3D可视化,是运用三维仿真技术实现机房信息感知.智能调度以及主动式运营维护,把复杂抽象的数据信息,以合适的人们视觉元素及视角用VR虚拟现实技术与3D立体方式在H5 ...
3D物联网——设备/生产线3D可视化解决方案
一.什么是生产线3D可视化解决方案? 生产线3D可视化解决方案,是结合物联网监控系统(智慧工厂).虚实联动与三维建模先进技术,以三维立体模式呈现出来,使得界面直观.简单,便于监控人员识别异常信息,提高 ...