序文
この記事では、Three.jsとは何かを誰もが知ることができます。Three.jsは、WebGLをブラウザで実行できるようにするJSライブラリであり、3D効果があります。3Dエンジンとも言えます。これを使用して、カメラ、光と影、マテリアル、その他のオブジェクト
webglなどのさまざまな3次元シーンを作成できます。これは、Webページ上に複雑な3次元グラフィックス（3Dグラフィックス）を描画およびレンダリングし、ユーザーがそれを操作できるようにするために使用されるテクノロジーです。
全体的な効果
Three.jsを使用して、キャンパス不動産モデル、IoT温度安全監視を作成します
はは、とてもおもしろいですか？このようにコピーした方法をお見せしましょう。元の写真をお見せしましょう。
スカイボックスを作成する
それがどれほど現実的かは言わないでください。まず、この雰囲気を手に入れましょう。空！three.jsを使用してスカイボックスを作成します。空間全体を3次元の立方体と考えてください。各平面は画像で埋められ、レンダリングされます。言い換えれば、学校全体がこのボックスに入っています。
まず、新しいTHREE.Meshを使用してステレオを作成します。THREE.BoxGeometryは、英語で説明されているボックスジオメトリと同じですが、3つのパラメータがあります：10000。ご想像のとおり、これは長さ、幅、高さです。最後のパラメータはテクスチャです。
// 创建一个场景，将我们所有的元素，如物体，相机和灯光。
scene = new THREE.Scene();
// 创建天空之盒
var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
scene.add(skybox);
スカイボックスを作成する上で最も重要なステップ
//天空之盒
function createCubeMap() {
//获取立体位面图文件夹
var path = "../assets/textures/cubemap/parliament/";
var format = '.png'; //图像后缀
//生成图像地址数组
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
//将6个位面合并起来（加载纹理CUBE）
var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
return textureCube;
}
この写真のように
スカイボックス
//createCubeMap() 就是上面创建位图的函数
var textureCube = createCubeMap();
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var material = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.DoubleSide
});
// 创建天空之盒
var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
scene.add(skybox);
// 环境样式
envMaterial = new THREE.MeshBasicMaterial({
opacity: 0.5, transparent: true, envMap: textureCube, side: THREE.DoubleSide });
// 把摄像机对准场景的中心
camera.position.x = 0;
camera.position.y = 400;
camera.position.z = 2100;
camera.lookAt(scene.position);
地面を作成する
地面の場合、つまり、最初にテクスチャマップを検索し、次に新しいTHREE.BoxGeometryを使用して地面を作成します。パラメータは上記の長さ、幅、高さです。次に、テクスチャマップTHREE.ImageUtils.loadTexture（ "Road Jin"）;グラウンドプレーン=シェイプ+テクスチャマップを生成する必要があります。最後に、スカイボックス内の地面の位置、つまり座標を設定します。
function CreatePanl() {
var floor_1 = THREE.ImageUtils.loadTexture("../image/plant/greenplane_2.jpg");
floor_1.wrapS = THREE.RepeatWrapping;
floor_1.wrapT = THREE.RepeatWrapping;
floor_1.repeat.set(4, 4);
var floor_1Material = new THREE.MeshLambertMaterial({
map: floor_1 });
var planeGeometry = new THREE.BoxGeometry(5000, 1000, 1, 1);
planeMaterial = new THREE.MeshPhongMaterial({
color: 0xffffff, specular: 0xffffff, shininess: 200 });
var plane = new THREE.Mesh(planeGeometry, floor_1Material);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 1200;
scene.add(plane);
}
地面のテクスチャマップは次のようになります。
それらの中で：
（1）plane.receiveShadow：影を受け入れるかどうか。地面に建てられた物体に光が当たっているときに影を受け入れる（表示する）かどうか。
（2）plane.rotation.x：x軸回転、x軸位置を調整します。
（3）plane.position.x：x軸座標。焦点（カメラの中心点）からの距離。
（4）plane.position.y：y軸座標。焦点（カメラの中心点）からの距離。
（5）THREE.RepeatWrappingオブジェクトが非常に大きい場合は、テクスチャマップを繰り返し塗りつぶします。
木、花、その他の植物を作成する
木や花を作成するには、新しいTHREE.Sprite（）スプライトモデルオブジェクトを使用できます。スプライトはスプライトと呼ばれます。コンピューターグラフィックスでは、スプライトはシーンに含まれる2次元の画像またはアニメーション（wiki）を指します。threejsでは、Spriteを使用して画像テクスチャを読み込むことができます。もちろん、canvasで作成されたテクスチャも含まれるため、canvasで作成できる画像の種類と、Spriteで作成できる形状を指定できます。簡単に言えば、Spriteは2D画像を3D効果にレンダリングできるので、このプロジェクトで使用した木やその他の植物はSpriteを使用して作成されました。どうして？スプライトは常にカメラに面する平面です。アドレスThree.jsスプライトモデルスプライトシミュレーションフォレスト効果の詳細
//创建树的公用方法
function CreateMinTree(width, height, x, y, z, path, rote) {
var textureTree = THREE.ImageUtils.loadTexture("../image/plant/" + path);
// 批量创建表示一个树的精灵模型
var spriteMaterial = new THREE.SpriteMaterial({
rotation: Math.PI / rote,
map: textureTree,//设置精灵纹理贴图
});
// 创建精灵模型对象
var sprite = new THREE.Sprite(spriteMaterial);
// 控制精灵大小,
sprite.scale.set(width, height, 1);
sprite.position.set(x, y, z);
return sprite;
}
このメソッドは私によってカプセル化されています。幅、高さ、x軸、y軸、z軸、テクスチャパス、回転角度のパラメータを渡すだけです。森に変えたり、山積みにしたりしたい場合は、ループするだけです。
結局、彼は影を受け入れないスプライト。sprite.castShadow = true;この設定は無効です。
ツリーテクスチャマップ
もちろん、実際の3次元ツリーモデルを作成する必要がある場合は、このThree.jsについて学習して3次元ツリーモデルを作成できます。
モデルを構築するためのアイデア
実際、私は怠惰です。これらの建物はすべて堅固です。つまり、それらはすべて堅固な形状とテクスチャマップです。新しいTHREE.Meshは、円（CircleGeometry）、円柱（CylinderGeometry）、球（SphereGeometry）、テキスト（TextGeometry）などの形状をインスタンス化できることを説明しました。誰もがこの兄が言及したThree.jsジオメトリを理解できます。
教育用の建物や他の建物のように、私はゆっくりと建物を作ってから循環します。各建物の座標位置を変更します。ははは、それは簡単ではありません。建物では、窓、エアコン、柱、レンガなどのエンティティとテクスチャを使用する必要があります。ここでは、ループを使用して建物モデルを生成できます。
したがって、多数のエンティティオブジェクト、いくつかの異なるパラメータ、つまり、形状の長さ、幅、高さ、深さなど、および座標x、y、z軸などを繰り返しインスタンス化するため、すべての人が一般的なメソッドをカプセル化することをお勧めします。 。
もちろん、コード生成モデルしかないという意味ではありません。3D描画ツールを使用して描画できます。Three.jsを使用すると、3Dモデルをさまざまな形式でインポートできます。
このプロジェクトの基本的な紹介をここで共有しましょう。それはほとんど同じです。それを達成する方法を理解する必要があります。原画を元にバカな開発を始めたばかりです。
教材
残念ながら、この記事では、レンダラー、ライト、カメラの作成方法については詳しく説明しませんでした。このステップでは、three.jsに関連する多くのjsコンポーネントを導入する必要があるためです。したがって、前回の紹介は、機能の紹介に加えて、学習教材を提供することです。Three.jsによって作成されたいくつかの基本的な幾何学的形状、スカイボックスなどのサンプルコード、および関連するthree.jsコンポーネントjsライブラリがあります。安心してください、それは無料で、みんなのお金を必要としません。
アドレス：https
：//pan.baidu.com/s/1-EdqT4v9X5EhtkjbGyANMQ抽出コード：xgtx
QRコードの取得：
