【three.js】threejs学習ノート(一)
前言この技術は私が長い間狙っていたので、私は最初createjsとthreejsの中でどれを勉強すればいいか迷っていましたが、createjs 3 Dを作るのは珍しいと思いました.そして、ケースを見るとアニメ処理やanimateccに合わせて生成されているような気がしますが、現実には3 dを作る必要が多く、threejs生態が良いと思います.だからthreejsをやることにした.
公式サイト https://github.com/mrdoob/three.js/releases
インストール多くの中国語のチュートリアルがあなたにthreejsのjsあるいはcdnを導入させることを発見することができて、私は最初はこのようにthreeを使うしかないと思っていましたが、issueの中で多くのtsの問題を提起している人がいることを発見して、それからnpmの上で探してみると本当にあります.現在、最新の120バージョンにダウンロードできます. ですが、コードは自分で別にしたほうがいいです.npmにはsrcの内容しか入っていないので、全量ダウンロードのエディタもdemoもいいツールなので、研究してみてください. はオンラインのを使いたくありません:http://www.yanhuangxueyuan.com/threejs/editor/ tsと組み合わせて、私たちの学習速度は大幅に向上します.まずreactのtsプロジェクトを開き、three をインストールします.
使用 npmで与えられた最初の例に従ってreact-appに書いて動作するかどうかを見ます: 回転しているカラー正方形を表示できれば成功します. 上記の例から、6つのグローバル変数、1つのカメラ、1つのシーン、1つのbox、1つのマテリアル、もう1つのmeshを行い、その後、meshパラメータはboxとマテリアルであり、シーンパラメータはmeshであり、最後にrendererを介してシーンとカメラレンダリングに転送されることがわかります.
パースビューカメラPerspectiveCameraこの後の2つの値はよく理解できません.
1つ目の属性は視野角(FOV)です.視野角度とは、いつでもディスプレイに表示されるシーンの範囲であり、その値は角度です.
2番目の値はアスペクト比(aspect ratio)です.つまり、物体の幅をその高い比で割ったのです.例えば、ワイドスクリーンテレビで古い映画を再生すると、画像が潰されているように見えます.
次の2つの値は、遠剪断面と近剪断面です.すなわち、カメラの遠方のカット面よりも物体の位置が遠い場合や、近接のカット面よりも物体の位置が近い場合、その物体が超えた部分はシーンにレンダリングされません.
BoxGeometryこれは立方体で、実はパラメータを書くことがあって、どうせ3つの値をあげるだけで長幅の高さでいいです.
MeshNormalMaterial法ベクトルをRGB色にマッピングするマテリアルです. は、 にレンダリングする.
静的例次の例を見て、いくつかの一般的なジオメトリを分解して設定し、カメラを調整し、テストツールを追加し、最後にレンダリングし、注釈を書きました. 影の部分は少し面白いですが、地面に影を受信し、物体を指定して影を作る必要があります. 残りの次のノートを書きます.
公式サイト
インストール
npm i three
使用
import React, {
useRef, useEffect } from "react";
import * as THREE from "three";
var camera: THREE.Camera, scene: THREE.Object3D, renderer: THREE.WebGLRenderer;
var geometry, material, mesh: THREE.Object3D;
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
function App() {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.01,
10
);
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
ref.current.appendChild(renderer.domElement);
}
animate();
}, []);
return <div ref={
ref}></div>;
}
export default App;
パースビューカメラPerspectiveCamera
/**
* @param [fov=50] Camera frustum vertical field of view. Default value is 50.
* @param [aspect=1] Camera frustum aspect ratio. Default value is 1.
* @param [near=0.1] Camera frustum near plane. Default value is 0.1.
* @param [far=2000] Camera frustum far plane. Default value is 2000.
*/
1つ目の属性は視野角(FOV)です.視野角度とは、いつでもディスプレイに表示されるシーンの範囲であり、その値は角度です.
2番目の値はアスペクト比(aspect ratio)です.つまり、物体の幅をその高い比で割ったのです.例えば、ワイドスクリーンテレビで古い映画を再生すると、画像が潰されているように見えます.
次の2つの値は、遠剪断面と近剪断面です.すなわち、カメラの遠方のカット面よりも物体の位置が遠い場合や、近接のカット面よりも物体の位置が近い場合、その物体が超えた部分はシーンにレンダリングされません.
BoxGeometry
/**
* @param [width=1] — Width of the sides on the X axis.
* @param [height=1] — Height of the sides on the Y axis.
* @param [depth=1] — Depth of the sides on the Z axis.
* @param [widthSegments=1] — Number of segmented faces along the width of the sides.
* @param [heightSegments=1] — Number of segmented faces along the height of the sides.
* @param [depthSegments=1] — Number of segmented faces along the depth of the sides.
*/
MeshNormalMaterial
mesh = new THREE.Mesh(geometry, material)は、マテリアルをジオメトリに適用します.scene.add(mesh)を呼び出し、このジオメトリをシーン000の位置静的例
import React, {
useRef, useEffect } from "react";
import * as THREE from "three";
var camera: THREE.Camera, scene: THREE.Object3D, renderer: THREE.WebGLRenderer;
var geometry, material, mesh: THREE.Object3D;
let gPlane;
let axes;
let mGeometry;
let gmesh;
let ball;
let mball;
let meshball;
let light;
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
function App() {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
// ，
//------------
renderer = new THREE.WebGLRenderer({
antialias: true });
//
renderer.setClearColor(new THREE.Color(0xeeeeee));
//
renderer.setSize(window.innerWidth, window.innerHeight);
// ，
renderer.shadowMapEnabled = true;
scene = new THREE.Scene();
//
axes = new THREE.AxesHelper(255);
scene.add(axes); //
//
camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(-30, 40, 30);
camera.lookAt(0, 0, 0); //
//-----------
//
gPlane = new THREE.PlaneGeometry(70, 50, 1, 1);
material = new THREE.MeshLambertMaterial({
color: 0xeeeeee });
mesh = new THREE.Mesh(gPlane, material);
mesh.rotation.x = -0.5 * Math.PI;
mesh.position.x = 15;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.receiveShadow = true; // render
scene.add(mesh);
//
geometry = new THREE.BoxGeometry(4, 4, 4);
// mGeometry = new THREE.MeshBasicMaterial({
// color: 0xff0000, //basic lamber phong
// wireframe: true,//
// });
mGeometry = new THREE.MeshLambertMaterial({
color: 0xff0000,
});
gmesh = new THREE.Mesh(geometry, mGeometry);
gmesh.position.x = -4;
gmesh.position.y = 2;
gmesh.position.z = 0;
gmesh.castShadow = true; // render
scene.add(gmesh);
//
ball = new THREE.SphereGeometry(4, 20, 20);
mball = new THREE.MeshPhongMaterial({
// phong lamber
color: 0x7777ff,
});
meshball = new THREE.Mesh(ball, mball);
meshball.position.x = 25;
meshball.position.y = 10;
meshball.position.z = 10;
meshball.castShadow = true; // render
scene.add(meshball);
//
light = new THREE.SpotLight(0xffffff);
light.position.set(-40, 60, -10);
light.castShadow = true; // render
scene.add(light);
ref.current.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
// animate();
}, []);
return <div ref={
ref}></div>;
}
export default App;