当前位置:网站首页>Threejs Internet of things, 3D visualization of farms (I)
Threejs Internet of things, 3D visualization of farms (I)
2022-07-05 04:02:00 【Zuo Ben】
1, Introduce
This example uses r95 edition Three.js library .
Main functions : Quote the farm model for display . The renderings are as follows :
2, Main description
farm 3D Show main use OBJLoader and MTLLoader Load the model and directly assign materials to display .
The imported model code is as follows :
3, Source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Threejs The Internet of things , farm 3D visualization </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() {
// Create a scene , It will contain all our elements , Like an object , Cameras and lights .
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);
// Create a camera , It defines where we are looking
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 30000);
// Aim the camera at the center of the scene
camera.position.x = 5500;
camera.position.y = 3000;
camera.position.z = 2000;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// Create a renderer and set the size ,WebGLRenderer The computer graphics card will be used to render the scene
// initialize basic renderer
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
// Add ambient light
scene.add(new THREE.AmbientLight("#ffffff", 1.5));
// Add the output of the renderer to HTML Elements
document.getElementById("dom").appendChild(renderer.domElement);
// Display the coordinate axis on the screen
var axes = new THREE.AxesHelper(10000);
// scene.add(axes);
initModel();
// Start animation
renderScene();
// Add model
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) {
// Click on the screen to create a vector
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // Convert the coordinates of the screen into coordinates in the 3D scene
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);
}
// Rendered scenes
renderer.render(scene, camera);
}
window.onload = init;
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Listen for resizing events
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
4, download
Use threejs Rendering farm model source code , Farm model obj+mtl Format ,threejs Model Threejs Rendering obj+mtl Model ,Threejs load 3D Factory model Threejs Realize the introduction of more download resources for factory models 、 For learning materials, please visit CSDN Download channel .https://download.csdn.net/download/baidu_29701003/54823032 If you need other source code, please leave a message or contact me on wechat :1171053128
边栏推荐
- DFS and BFS concepts of trees and graphs
- Containerd series - what is containerd?
- 为什么百度、阿里这些大厂宁愿花25K招聘应届生,也不愿涨薪5K留住老员工?
- Analysis of dagger2 principle
- [an Xun cup 2019] not file upload
- Thread Basics
- [brush questions] BFS topic selection
- speed or tempo in classical music
- provide/inject
- Nmap user manual learning records
猜你喜欢
为什么百度、阿里这些大厂宁愿花25K招聘应届生,也不愿涨薪5K留住老员工?
Plasticscm enterprise crack
已解决(sqlalchemy+pandas.read_sql)AttributeError: ‘Engine‘ object has no attribute ‘execution_options‘
Threejs factory model 3DMAX model obj+mtl format, source file download
Operation flow of UE4 DMX and grandma2 onpc 3.1.2.5
Alibaba cloud ECS uses cloudfs4oss to mount OSS
MindFusion. Virtual Keyboard for WPF
Threejs realizes sky box, panoramic scene, ground grass
laravel8 导出Excle文件
Uni app common functions /api
随机推荐
“金九银十”是找工作的最佳时期吗?那倒未必
行为感知系统
[software reverse analysis tool] disassembly and decompilation tool
kubernetes集群之调度系统
open graph协议
3. Package the bottom navigation tabbar
官宣!第三届云原生编程挑战赛正式启动!
lds链接的 顺序问题
MindFusion. Virtual Keyboard for WPF
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
Assembly - getting started
Why do big companies such as Baidu and Alibaba prefer to spend 25K to recruit fresh students rather than raise wages by 5K to retain old employees?
Rust blockchain development - signature encryption and private key public key
Clickhouse同步mysql(基于物化引擎)
Possible stack order of stack order with length n
[understand series after reading] 6000 words teach you to realize interface automation from 0 to 1
技术教程:如何利用EasyDSS将直播流推到七牛云?
grandMA2 onPC 3.1.2.5的DMX参数摸索
我就一写代码的,王总整天和我谈格局...
JVM garbage collection