当前位置:网站首页>Threejs Internet of things, 3D visualization of farms (II)
Threejs Internet of things, 3D visualization of farms (II)
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
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;
4, download
Use threejs Rendering farm model source code , Farm model obj+mtl Format ,threejs Model , Model upgrade -Web Develop document resources -CSDN download Upgraded farm model , Use threejs Rendering model source code Threejs Rendering obj+mtl Model ,Threej More download resources 、 For learning materials, please visit CSDN Download channel .https://download.csdn.net/download/baidu_29701003/54824377 Need other source code 、 Please leave a message or contact me on wechat :1171053128
边栏推荐
- 已解决(sqlalchemy+pandas.read_sql)AttributeError: ‘Engine‘ object has no attribute ‘execution_options‘
- Clickhouse synchronization MySQL (based on materialization engine)
- C # use awaiter
- NEW:Devart dotConnect ADO.NET
- On the day 25K joined Tencent, I cried
- NEW:Devart dotConnect ADO. NET
- IronXL for . NET 2022.6
- Containerd series - what is containerd?
- 我国算力规模排名全球第二:计算正向智算跨越
- Threejs realizes the drawing of the earth, geographical location annotation, longitude and latitude conversion of world coordinates threejs coordinates
猜你喜欢
25K 入职腾讯的那天,我特么哭了
How to solve the problem that easycvr changes the recording storage path and does not generate recording files?
NEW:Devart dotConnect ADO. NET
EasyCVR平台出现WebRTC协议视频播放不了是什么原因?
MindFusion.Virtual Keyboard for WPF
为什么百度、阿里这些大厂宁愿花25K招聘应届生,也不愿涨薪5K留住老员工?
[software reverse - basic knowledge] analysis method, assembly instruction architecture
Web components series (VII) -- life cycle of custom components
Operation flow of UE4 DMX and grandma2 onpc 3.1.2.5
Enterprise level: spire Office for . NET:Platinum|7.7. x
随机推荐
Why is there a reincarnation of 60 years instead of 120 years in the tiangan dizhi chronology
Judge whether the stack order is reasonable according to the stack order
As soon as I write the code, President Wang talks with me about the pattern all day
Threejs realizes rain, snow, overcast, sunny, flame
[PHP features - variable coverage] improper use, improper configuration and code logic vulnerability of the function
Clickhouse synchronization MySQL (based on materialization engine)
Web components series (VII) -- life cycle of custom components
The development of mobile IM based on TCP still needs to keep the heartbeat alive
Thread Basics
provide/inject
Pyqt pyside custom telescopic menu bar sharing (including tutorial)
BDF application - topology sequence
[brush questions] BFS topic selection
灵魂三问:什么是接口测试,接口测试怎么玩,接口自动化测试怎么玩?
Uni app change the default component style
函数基础学习02
Analysis of glibc strlen implementation mode
An elegant program for Euclid‘s algorithm
Containerization Foundation
已解决(sqlalchemy+pandas.read_sql)AttributeError: ‘Engine‘ object has no attribute ‘execution_options‘