Selected program examples: Html web page threejs displays obj, ply three-dimensional image examples. For example, you need to install a running environment or remote debugging. See your personal QQ business card at the bottom of the article for remote assistance from professional technicians!
Preface
This blog writes code for "Html web page threejs display obj, ply three-dimensional image example". The code is clean, regular and easy to read. Recommended for learning and application.
operation result
Article directory
1. Required tools and software
2. Usage steps
1. Main code
2. Operation results
3. Online assistance
1. Required tools and software
1. VS2019, Qt
2. C++
2. Usage steps
The code is as follows (example):
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ MTL loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button {
color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - OBJMTLLoader test
</div>
<script src="js/three.min.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/OBJMTLLoader.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1.5; //̹��40
// scene
scene = new THREE.Scene();
var ambien = new THREE.AmbientLight( 0x444444 );
THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
var loader = new THREE.OBJMTLLoader();
loader.load('js/LQ.obj', 'js/LQ.mtl', function (object) {
object.position.y = -0.4; // 0 ̹��tank -0.6 ����LQ
scene.add(object);
var start = new Date().getTime(), delta;
}, onProgress, onError );
//
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
</script>
</body>
</html>
operation result
3. Online assistance:
If you need to install the operating environment or remote debugging, please see your personal QQ business card at the bottom of the article for remote assistance from professional technicians!
1) Remote installation and running environment, code debugging
2) Visual Studio, Qt, C++, Python programming language introductory guide
3) Interface beautification
4) Software production 5
) Cloud server application
6) Website production
Current article link: https://blog.csdn.net/alicema1111/article/details/132666851
Personal blog homepage : https://blog.csdn.net/alicema1111?type=
All articles by blogger click here: https:/ /blog.csdn.net/alicema1111?type=blog
Recommended by bloggers:
Python face recognition attendance punching system:
https://blog.csdn.net/alicema1111/article/details/133434445
Python fruit tree fruit recognition : https://blog.csdn.net/alicema1111/article/details/ 130862842
Python+Yolov8+Deepsort entrance traffic statistics: https://blog.csdn.net/alicema1111/article/details/130454430
Python+Qt face recognition access management system: https://blog.csdn.net/alicema1111/ article/details/130353433
Python+Qt fingerprint entry recognition attendance system: https://blog.csdn.net/alicema1111/article/details/129338432
Python Yolov5 flame smoke recognition source code sharing: https://blog.csdn.net/alicema1111 /article/details/128420453
Python+Yolov8 road bridge wall crack identification: https://blog.csdn.net/alicema1111/article/details/133434445