このセクションでは主に頂点と平面をカスタマイズして立方体を作成します。本格的にthree.jsに取り組み始めました。
レンダリング
座標系
座標系は右手の法則をサポートしています。図では、赤が x 軸、緑が y 軸、青が z 軸です。
ソースコード
導入されたプラグイン js [私の csdn にはダウンロード リソースもあります。git を開けない場合は、csdn でダウンロードできます]:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="../css/index.css" />
<script src="../libs/three.js"></script>
<script src="../libs/Stats.js"></script>
<script src="../libs/dat.gui.js"></script>
<script src="../libs/TrackballControls.js"></script>
<script src="../js/util/three_util.js"></script>
<script src="../js/util/SceneUtils.js"></script>
</head>
<body>
<div id="webgl-output"></div>
<script src="../js/3.js"></script>
</body>
</html>
3.js
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 设置8个顶点
var vertices = [
new THREE.Vector3(1,1,1),
new THREE.Vector3(1,5,1),
new THREE.Vector3(1,1,5),
new THREE.Vector3(1,5,5),
new THREE.Vector3(5,1,1),
new THREE.Vector3(5,5,1),
new THREE.Vector3(5,1,5),
new THREE.Vector3(5,5,5)
]
// 构建立方体所需要的十二个三角形平面
var faces = [
new THREE.Face3(0,2,1),
new THREE.Face3(2,3,1),
new THREE.Face3(7,3,2),
new THREE.Face3(7,2,6),
new THREE.Face3(5,7,6),
new THREE.Face3(4,5,6),
new THREE.Face3(1,5,0),
new THREE.Face3(0,5,4),
new THREE.Face3(5,1,3),
new THREE.Face3(5,3,7),
new THREE.Face3(2,0,4),
new THREE.Face3(2,4,6)
]
var geom = new THREE.Geometry()
geom.vertices = vertices
geom.faces = faces
geom.computeFaceNormals()
// 设置两种材质，这样方便同时看颜色和骨架
var materials = [
new THREE.MeshBasicMaterial({
color: 0x000000, wireframe: true}),
new THREE.MeshLambertMaterial({
opacity: 0.6, color: 0x44ff44, transparent: true})
];
// materials这样做的原因是，除了显示绿色透明的立方体外，我还想显示一个线框。因为使用线框可以很容易地找出顶点和面的位置。
// SceneUtils是SceneUtils里的方法
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
mesh.castShadow = true;
mesh.children.forEach(function (e) {
e.castShadow = true
});
scene.add(mesh);
var ambientLight = new THREE.AmbientLight(0x3c3c3c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, 120);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("webgl-output").appendChild(renderer.domElement);
var trackballControls = initTrackballControls(camera, renderer);
var clock = new THREE.Clock();
render();
function render() {
trackballControls.update(clock.getDelta());
stats.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
注意点：
- 頂点は頂点メソッドによって設定され、平面は面によって設定されます。
- 3 つの平面は三角形で構成されているため、三角形を使用して平面を 1 つずつ組み立てる必要があります。たとえば、立方体を構築したい場合は、8 つの頂点と 12 の三角形を定義する必要があります。
- 三角形の頂点の順番は規則的で、3点が時計回りに並んでいるときは面がカメラ側を向いており(カメラ側を向いている面が色付き)、逆も同様です。。(もちろん、右手を伸ばして頂点の順番に沿って指を曲げても良いです。この時、親指が指す方向が平面の正面、つまり色が付いている側になります。高校物理の電磁誘導の右手の法則に似ています。)
- この例では、主に 2 つのマテリアルを同時にサポートするプレーンを構築するために、SceneUtils.js の createMultimaterialObject メソッドを参照しています。
グリッド法
- Mesh.rotation.x = Math.PI * 0.4 または Mesh.rotation.set(Math.PI * 0.4, 0, 0) または Mesh.rotation = new THREE.Vector3(Math.PI * 0.4, 0, 0)
- メッシュ.ポジション.x = 4 または メッシュ.ポジション.セット(4, 0, 0) または メッシュ.ポジション = 新しい THREE.Vector3(Math.PI * 0.4, 0, 0)
- Mesh.scaleX = 4 または Mesh.scale = 4 または Mesh.scale.set(4, 0, 0)
- Mesh.translateX = 4 または Mesh.translate.set(4, 0, 0)
- Mesh.visible = true または false