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 renderer
renderer = 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,下载
5,源码和模型
需要完整代码、模型或者其他源码,请进入博客首页查看其他文章或者留言
联系我微信:1171053128