選択されたプログラムの例: Html Web ページの threejs には、obj、ply の 3 次元画像の例が表示されます。たとえば、実行環境またはリモート デバッグをインストールする必要があります。専門の技術者からのリモート アシスタンスについては、記事の下部にある個人のQQ名刺を参照してください。 ！
序文
このブログでは、「HTML Web ページのthreejs 表示 obj、ply 三次元画像の例」のコードを作成しています。コードはクリーンで規則的で読みやすいです。学習にも応用にもおすすめです。
演算結果
記事ディレクトリ
1. 必要なツールとソフトウェア
2. 使用手順
1. メインコード
2. 操作結果
3. オンラインサポート
1. 必要なツールとソフトウェア
1. VS2019、Qt
2. C++
2. 利用手順
コードは次のとおりです（例）。
<!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>
演算結果
3. オンラインサポート:
動作環境のインストールやリモート デバッグが必要な場合は、記事の下部にある個人用QQ名刺を参照して、プロの技術者によるリモート アシスタンスをご利用ください。
1) リモートインストールと実行環境、コードデバッグ
2) Visual Studio、Qt、C++、Python プログラミング言語入門
3) インターフェースの美化
4) ソフトウェア制作 5
) クラウドサーバーアプリケーション
6) Web サイト制作
現在の記事のリンク: https://blog.csdn.net/alicema1111/article/details/132666851
個人ブログのホームページ: https://blog.csdn.net/alicema1111?type=
ブロガーによるすべての記事はここをクリック: https://blog.csdn.net/alicema1111?type= blog.csdn.net/alicema1111?type=blog
ブロガー推奨:
Python 顔認識出席パンチング システム:
https://blog.csdn.net/alicema1111/article/details/133434445
Python 果樹果実認識: https://blog.csdn.net/alicema1111/article/details/ 130862842
Python+Yolov8+Deepsort 入口トラフィック統計: https://blog.csdn.net/alicema1111/article/details/130454430
Python+Qt 顔認識アクセス管理システム: https://blog.csdn.net/alicema1111/article/詳細/130353433
Python+Qt 指紋入力認識勤怠システム: https://blog.csdn.net/alicema1111/article/details/129338432
Python Yolov5 火炎煙認識ソース コード共有: https://blog.csdn.net/alicema1111 / Article/details/128420453
Python+Yolov8 道路橋壁亀裂の特定: https://blog.csdn.net/alicema1111/article/details/133434445