この記事は主に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); レンダラを設定します
$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 入門チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。