WebGL three.js学習ノートベクトルメッシュマテリアルMeshNormalMaterialの紹介と360度パノラマスカイボックスの作成方法
13263 ワード
WebGL勉強----three.js学習ノート(5)
クリックしてデモを表示
Demoアドレス:https://nsytsqdtn.github.io/d...
単純メッシュマテリアルMeshNormalMaterial
MeshNormalMaterialは、レンダリング時に使用される色の影響を受けないマテリアルで、それぞれの面の内側から外側の法線ベクトルにのみ関係します.法ベクトルはwebglにおいて非常に広く用いられ,光の反射,および3次元グラフィックのテクスチャマッピングに関係している.
図から分かるように、メッシュの各面のレンダリング色は異なり、物体の表面に法ベクトルを追加したい場合はTHREEを使用することができます.ArrowHelperは各法ベクトルを表し、そのパラメータは
THREE.ArrowHelper(dir, origin, length, color, headLength, headWidth)
**パラメータの意味は、dir:方向、デフォルトは法線ベクトルorigin:開始座標位置length:補助線の長さcolor:補助線の色headLength:頭部の長さheadWidth:頭部の幅**
球体について、それぞれの面の法線ベクトルを記述するには、まず各面を遍歴し、この面の3つの頂点(webglの面は三角形なので3つの頂点)を取り出し、divideScalar(3)という関数でその中心位置を計算することで、この中心位置点から内側から外側にArrowHelperを引き出すことができます.法ベクトルをシミュレートします.
ここで、centroid.add(sphereGeometry.vertices[face.a])このコードのsphereGeometry.verticesにはジオメトリのすべての頂点情報が格納され、[]インデックスで頂点のいずれかを取得できます.face.a次のフェイスもあります.bとcはいずれもその面の頂点インデックス番号であり、この面が頂点番号faceであることを示す.a,face.b,face.cの3つの頂点からなる1つの三角形(webglの面はすべて三角形)を計算し、この3つの頂点の中心点を計算します.
メニューパネルの設定
メニューパネルにMeshNormalmaterialのいくつかのプロパティを設定すると、このマテリアルのいくつかの特質をテストするのに便利です:*this.visible = meshMaterial.visible;//表示するかどうか
**プログラムの実行中にマテリアルのプロパティを変更するには、変更後にメッセージを追加する必要があります.needsUpdate=trueで更新が成功します.**
360度パノラマバックグラウンド
360度のパノラマバックグラウンドは臨場感があり、ここのバックグラウンドはすべてパノラマバックグラウンドを使用しています
パノラマの背景を使用するには、6方向の画像6枚で完全な背景(6方向の画像1枚でもよい)を合成し、sceneに割り当てます.background
これらの画像は順番に並べなければなりません.右左上下前、そうしないと背景が乱れます.ここは1つの全景のピクチャーのウェブサイトにあげて、中は多くの360度の風景図があって、すべて6枚のタイプで、ダウンロードして解凍した後に直接導入することができますhttp://www.humus.name/index.p...
この例の完全なコードは次のとおりです.
クリックしてデモを表示
Demoアドレス:https://nsytsqdtn.github.io/d...
単純メッシュマテリアルMeshNormalMaterial
MeshNormalMaterialは、レンダリング時に使用される色の影響を受けないマテリアルで、それぞれの面の内側から外側の法線ベクトルにのみ関係します.法ベクトルはwebglにおいて非常に広く用いられ,光の反射,および3次元グラフィックのテクスチャマッピングに関係している.
図から分かるように、メッシュの各面のレンダリング色は異なり、物体の表面に法ベクトルを追加したい場合はTHREEを使用することができます.ArrowHelperは各法ベクトルを表し、そのパラメータは
THREE.ArrowHelper(dir, origin, length, color, headLength, headWidth)
**パラメータの意味は、dir:方向、デフォルトは法線ベクトルorigin:開始座標位置length:補助線の長さcolor:補助線の色headLength:頭部の長さheadWidth:頭部の幅**
球体について、それぞれの面の法線ベクトルを記述するには、まず各面を遍歴し、この面の3つの頂点(webglの面は三角形なので3つの頂点)を取り出し、divideScalar(3)という関数でその中心位置を計算することで、この中心位置点から内側から外側にArrowHelperを引き出すことができます.法ベクトルをシミュレートします.
for(let i=0;iここで、centroid.add(sphereGeometry.vertices[face.a])このコードのsphereGeometry.verticesにはジオメトリのすべての頂点情報が格納され、[]インデックスで頂点のいずれかを取得できます.face.a次のフェイスもあります.bとcはいずれもその面の頂点インデックス番号であり、この面が頂点番号faceであることを示す.a,face.b,face.cの3つの頂点からなる1つの三角形(webglの面はすべて三角形)を計算し、この3つの頂点の中心点を計算します.
メニューパネルの設定
メニューパネルにMeshNormalmaterialのいくつかのプロパティを設定すると、このマテリアルのいくつかの特質をテストするのに便利です:*this.visible = meshMaterial.visible;//表示するかどうか
this.wireframe = meshMaterial.wireframe;//
this.wireframeWidth = meshMaterial.wireframeLinewidth;//
this.transparent = meshMaterial.transparent;//
this.opacity = meshMaterial.opacity;// ， transparent true
this.side = "front";// ， ， ， ，
this.selectMesh = "sphere";//
this.shading = "smooth";// ， ， ， **
function initDatGUI() {
//
controls = new function () {
this.rotationSpeed = 0.02;
this.visible = meshMaterial.visible;//
this.wireframe = meshMaterial.wireframe;//
this.wireframeWidth = meshMaterial.wireframeLinewidth;//
this.transparent = meshMaterial.transparent;//
this.opacity = meshMaterial.opacity;// ， transparent true
this.side = "front";// ， ， ， ，
this.selectMesh = "sphere";//
this.shading = "smooth";// ， ， ，
};
let gui = new dat.GUI();
//
let F1 = gui.addFolder("Mesh");
F1.add(controls, "rotationSpeed", 0, 0.1);
F1.add(controls, "visible").onChange(function (e) {
meshMaterial.visible = e;
});
F1.add(controls, "wireframe").onChange(function (e) {
meshMaterial.wireframe = e;
});
F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {
meshMaterial.wireframeWidth = e;
});
F1.add(controls, "transparent").onChange(function (e) {
meshMaterial.transparent = e;
});
F1.add(controls, "opacity",0,1).onChange(function (e) {
meshMaterial.opacity = e;
});
F1.add(controls, "side",["front","back","double"]).onChange(function (e) {
switch (e) {
case "front":
meshMaterial.side = THREE.FrontSide;
break;
case "back":
meshMaterial.side = THREE.BackSide;
break;
case "double":
meshMaterial.side = THREE.DoubleSide;
break;
}
meshMaterial.needsUpdate = true;//
});
F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
// ，
scene.remove(cube);
scene.remove(sphere);
scene.remove(plane);
switch (e) {
case "sphere":
scene.add(sphere);
break;
case "cube":
scene.add(cube);
break;
case "plane":
scene.add(plane);
break;
}
});
F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {
switch (e) {
case "flat":
meshMaterial.shading = THREE.FlatShading;
break;
case "smooth":
meshMaterial.shading = THREE.SmoothShading;
break;
}
meshMaterial.needsUpdate = true;//
});
}**プログラムの実行中にマテリアルのプロパティを変更するには、変更後にメッセージを追加する必要があります.needsUpdate=trueで更新が成功します.**
360度パノラマバックグラウンド
360度のパノラマバックグラウンドは臨場感があり、ここのバックグラウンドはすべてパノラマバックグラウンドを使用しています
パノラマの背景を使用するには、6方向の画像6枚で完全な背景(6方向の画像1枚でもよい)を合成し、sceneに割り当てます.background
let urls =[
'image/posx.jpg',
'image/negx.jpg',
'image/posy.jpg',
'image/negy.jpg',
'image/posz.jpg',
'image/negz.jpg'
];// 6
let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
scene = new THREE.Scene();
scene.background = cubeMap;これらの画像は順番に並べなければなりません.右左上下前、そうしないと背景が乱れます.ここは1つの全景のピクチャーのウェブサイトにあげて、中は多くの360度の風景図があって、すべて6枚のタイプで、ダウンロードして解凍した後に直接導入することができますhttp://www.humus.name/index.p...
この例の完全なコードは次のとおりです.
Depth Material Test
let camera, renderer, scene, light;
let controller;
let controls;
let cube, sphere, plane, meshMaterial;
function initThree() {
//
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x333333);
document.getElementById("WebGL-output").appendChild(renderer.domElement);// div
// ，
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 10, 100);
camera.position.set(0, 40, 60);
camera.up.x = 0;// ， Y
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
//
let urls =[
'image/posx.jpg',
'image/negx.jpg',
'image/posy.jpg',
'image/negy.jpg',
'image/posz.jpg',
'image/negz.jpg'
];// 6
let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
scene = new THREE.Scene();
scene.background = cubeMap;
//
controller = new THREE.OrbitControls(camera, renderer.domElement);
controller.target = new THREE.Vector3(0, 0, 0);
light = new THREE.AmbientLight(0x0c0c0c);
scene.add(light);
// add spotlight for the shadows
light = new THREE.SpotLight(0xffffff);
light.position.set(0, 30, 30);
scene.add(light);
}
//
function initDatGUI() {
//
controls = new function () {
this.rotationSpeed = 0.02;
this.visible = meshMaterial.visible;//
this.wireframe = meshMaterial.wireframe;//
this.wireframeWidth = meshMaterial.wireframeLinewidth;//
this.transparent = meshMaterial.transparent;//
this.opacity = meshMaterial.opacity;// ， transparent true
this.side = "front";// ， ， ， ，
this.selectMesh = "sphere";//
this.shading = "smooth";// ， ， ，
};
let gui = new dat.GUI();
//
let F1 = gui.addFolder("Mesh");
F1.add(controls, "rotationSpeed", 0, 0.1);
F1.add(controls, "visible").onChange(function (e) {
meshMaterial.visible = e;
});
F1.add(controls, "wireframe").onChange(function (e) {
meshMaterial.wireframe = e;
});
F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {
meshMaterial.wireframeWidth = e;
});
F1.add(controls, "transparent").onChange(function (e) {
meshMaterial.transparent = e;
});
F1.add(controls, "opacity",0,1).onChange(function (e) {
meshMaterial.opacity = e;
});
F1.add(controls, "side",["front","back","double"]).onChange(function (e) {
switch (e) {
case "front":
meshMaterial.side = THREE.FrontSide;
break;
case "back":
meshMaterial.side = THREE.BackSide;
break;
case "double":
meshMaterial.side = THREE.DoubleSide;
break;
}
meshMaterial.needsUpdate = true;//
});
F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
// ，
scene.remove(cube);
scene.remove(sphere);
scene.remove(plane);
switch (e) {
case "sphere":
scene.add(sphere);
break;
case "cube":
scene.add(cube);
break;
case "plane":
scene.add(plane);
break;
}
});
F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {
switch (e) {
case "flat":
meshMaterial.shading = THREE.FlatShading;
break;
case "smooth":
meshMaterial.shading = THREE.SmoothShading;
break;
}
meshMaterial.needsUpdate = true;//
});
}
function initObject() {
// ，
let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
let sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
let planeGeometry = new THREE.PlaneGeometry(10, 10, 1, 1);
//
meshMaterial = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh(cubeGeometry, meshMaterial);
sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
plane = new THREE.Mesh(planeGeometry, meshMaterial);
//
cube.position.set(0,0,0);
sphere.position = cube.position;
plane.position = cube.position;
// ，
for(let i=0;i<sphereGeometry.faces.length;i++){//
let face = sphereGeometry.faces[i];//
let centroid = new THREE.Vector3();// vector3 ， ，
centroid.add(sphereGeometry.vertices[face.a]);
// sphereGeom.vertices ， centroid
centroid.add(sphereGeometry.vertices[face.b]);
centroid.add(sphereGeometry.vertices[face.c]);
centroid.divideScalar(3);//
let arrow = new THREE.ArrowHelper(
face.normal,
centroid,
2,
0xffcc55,
0.5,
0.5);// ，
sphere.add(arrow);
}
scene.add(sphere);
}
function rotation() {
scene.traverse(function (e) {
if (e instanceof THREE.Mesh) {
e.rotation.y += controls.rotationSpeed;
}
})
}
//
function render() {
rotation();
stats.update();
renderer.clear();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
//
function setting() {
loadFullScreen();
loadAutoScreen(camera, renderer);
loadStats();
}
// ， ， ， Start
function Start() {
initThree();
initObject();
initDatGUI();
setting();
render();
}