three.js 入門チュートリアル

この記事は主にthree.jsの入門レベルの詳細な説明を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最近、会社でtree.jsを使って3D画像を表示する必要があったので、たまたま時間があったので公式ドキュメントを読んでみました。

当社のフロントエンドフレームワークはAngularを使用しているため、treejsをディレクティブにカプセル化しました。ソースコードは後ほど載せます

まずthree.jsのダウンロードアドレスを知る必要があります。アドレスはhttps://github.com/mrdoob/three.jsです。

次に、three.js とは何ですか?

three.js のいくつかの手順:

1: three.js ファイルを導入します (デバッグ ウィンドウを開き、コンソールで THREE.REVISION コマンドを入力してバージョン番号を取得します。成功)

2: 設定シーンを作成します/ / var scene = new THREE.Scene();

3: var Camera = new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000); var renderer = new THREE . WebGLRenderer(); setSize(window.innerWidth, window.innerHeight); レンダラを設定します

modelUrl は追加されたファイルです。 DView = cy3DView.newCanvas ; $scope. config( 'canvas')

$scope.process3DUrl = data.result.data.engineering_stl_mcube; $scope.DView.plan($scope.process3DUrl)
function plan(modelUrl) { 
 stlLoader = new THREE.STLLoader(); 
 group = new THREE.Object3D(); 
 stlLoader.load(modelUrl, function (geometry) { 
 //console.log(geometry); 
 var mat = new THREE.MeshLambertMaterial({color: 0x7777ff}); 
 group = new THREE.Mesh(geometry, mat); 
 group.rotation.x = -0.5 * Math.PI; 
 group.scale.set(0.6, 0.6, 0.6); 
 scene.add(group);  animation(); 
 }); }

ok 理解できない友達はそう思いますか？私は個人的に

ソースコードは次のとおりです:

renderer.render(scene, camera);

関連する推奨事項:

Three.js の基本的な入門学習チュートリアル

three.js シーンインスタンスの作成の詳細な説明

詳細な説明ローカルでthree.jsを実行する方法について

以上がthree.js 入門チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。