Three.js로 플레이하기 - 3D 객체 표시 -
12398 단어 three.js
Three.js day2가 되었습니다.
오늘은 Three.js에서 3D 객체를 표시합시다.
1. 완성판
2. 참고문헌
ICS MEDIA
처음 Three.js
three.js의 기초 기초 : 개요에서 정지 객체를 표시하는 방법까지
3. 분해해 본다
❶.
전회까지의 복습입니다.
three.js 설정입니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
}
window.addEventListener("load", init);
</script>
</body>
</html>
이제 init 함수의 내용을 작성해 보겠습니다.
3D 객체를 표시하려면
1. renderer
2. scene (3D 공간)
3.camera
4. 3D 객체 (plane, sphere, cube 등)
만들기가 필요합니다. 차례로 가자.
1. renderer 만들기
renderer 는 3D 공간의 물질을 적절하게 2D 공간에 그리기 위한 장치입니다.
WebGL 기반 WebGLRenderer 외에도 CSS/SVG/canvas 기반 렌더러가 있습니다.
대부분의 브라우저에서 WebGL을 지원하는 현재 기본적으로 WebGLRenderer를 사용합시다.
코드는 다음과 같습니다.
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
THREE.WebGLRender 클래스의 인수에 HTML로 배치한 canvas 요소를 지정합니다.
이것으로 완성입니다만, 이대로는, 렌더러의 사이즈가 작기 때문에, setSize 메소드를 사용해, 수정합시다.
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
renderer.setSize(window.innerWidth, window.innerHeight);
2. scene 만들기
scene은 3D 공간이며, 이것이 없으면 Three.js는 아무 것도 그리지 않습니다.
오라일리 책에 따르면,
scene 오브젝트란, 표시하고 싶은 모든 물질과 이용하고 싶은 모든 광원을 보관 유지해,
변경을 모니터하는 컨테이너 객체입니다.
장면을 만들려면 다음 코드를 작성합니다.
const scene = new THREE.Scene()
THREE.Scene 객체에는 物体 , ライト 및 기타 렌더링에 필요한 オブジェクトの全て가 있습니다.
scene.add(camera);
scene.add(spotLight);
scene.add(planeMesh)
따라서 scene.add(object) 함수를 사용하여 다양한 객체를 장면에 추가할 수 있습니다.
3.카메라 만들기
장면을 만든 것만으로는 아무것도 보이지 않습니다.
camera 오브젝트를 작성해 거기로부터 촬영된 영상이 실제로 화면에 비추어집니다.
자연스러운 외형의 투시 투영(Perspective view; 멀리 있는 것이 작게 보이는 view)을 내기 위해서 PerspectiveCamera 를 만들어 봅시다.
const camera = new THREE.PerspectiveCamera()
PerspectiveCamera() 의 인수에,
· fov (시야각)
· aspect (종횡비: 수직 방향의 시야와, 수평 방향의 시야.아래 그림의 경우, X/Y )
· near (카메라에서 얼마나 가까이에서 그릴 것인가)
· far (카메라에서 얼마나 멀리 보이는지)
을 설정합니다.
오라일리 책에 따르면 다음은 각각의 권장 기본값입니다.
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 2000)
카메라가 생기면 설치합시다.
camera.position.set(0, 0, 1000);
4. 3D 객체 만들기
공을 설치합시다.
먼저 Mesh라는 표시 객체를 만듭니다.
const mesh = new THREE.Mesh();
THREE.Mesh의 인수에 형상(지오메트리)과 소재(머티리얼)를 설정합니다.
const mesh = new THREE.Mesh(geometry, material)
지오메트리는 이번에는 구체를 설정합니다.
머티리얼은 meshBasicMaterial 이라는 균일한 색상으로 표현되는 머티리얼(그림자 없이)을 사용합니다.
자세한 내용은 공식 DOC: SphereGeometry을 참조하십시오.
const geometry = new THREE.SphereGeometry(100,32,32)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
이것을 scene.add(mesh) 로 장면에 추가합니다.
결국 다음 코드가됩니다.
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
5. 최종 코드
마지막으로, 장면과 카메라를, renderer.render() 해 완성입니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
//レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".stage")
});
renderer.setSize(window.innerWidth, window.innerHeight);
//シーンを作成
const scene = new THREE.Scene();
//カメラを作成
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.1,
2000
);
camera.position.set(0, 0, 1000);
//球を作成
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//レンダリング
renderer.render(scene, camera);
}
window.addEventListener("load", init);
</script>
</body>
</html>
CSS를 사용하면 1분만에 만들 수 있을 것 같은데, 분한 일이 없었습니다.
여기에서 점점 퍼져 나가는군요.
그럼 또 내일~
Reference
이 문제에 관하여(Three.js로 플레이하기 - 3D 객체 표시 -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/399246c9d0bc2b5428df
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
ICS MEDIA
처음 Three.js
three.js의 기초 기초 : 개요에서 정지 객체를 표시하는 방법까지
3. 분해해 본다
❶.
전회까지의 복습입니다.
three.js 설정입니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
}
window.addEventListener("load", init);
</script>
</body>
</html>
이제 init 함수의 내용을 작성해 보겠습니다.
3D 객체를 표시하려면
1. renderer
2. scene (3D 공간)
3.camera
4. 3D 객체 (plane, sphere, cube 등)
만들기가 필요합니다. 차례로 가자.
1. renderer 만들기
renderer 는 3D 공간의 물질을 적절하게 2D 공간에 그리기 위한 장치입니다.
WebGL 기반 WebGLRenderer 외에도 CSS/SVG/canvas 기반 렌더러가 있습니다.
대부분의 브라우저에서 WebGL을 지원하는 현재 기본적으로 WebGLRenderer를 사용합시다.
코드는 다음과 같습니다.
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
THREE.WebGLRender 클래스의 인수에 HTML로 배치한 canvas 요소를 지정합니다.
이것으로 완성입니다만, 이대로는, 렌더러의 사이즈가 작기 때문에, setSize 메소드를 사용해, 수정합시다.
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
renderer.setSize(window.innerWidth, window.innerHeight);
2. scene 만들기
scene은 3D 공간이며, 이것이 없으면 Three.js는 아무 것도 그리지 않습니다.
오라일리 책에 따르면,
scene 오브젝트란, 표시하고 싶은 모든 물질과 이용하고 싶은 모든 광원을 보관 유지해,
변경을 모니터하는 컨테이너 객체입니다.
장면을 만들려면 다음 코드를 작성합니다.
const scene = new THREE.Scene()
THREE.Scene 객체에는 物体 , ライト 및 기타 렌더링에 필요한 オブジェクトの全て가 있습니다.
scene.add(camera);
scene.add(spotLight);
scene.add(planeMesh)
따라서 scene.add(object) 함수를 사용하여 다양한 객체를 장면에 추가할 수 있습니다.
3.카메라 만들기
장면을 만든 것만으로는 아무것도 보이지 않습니다.
camera 오브젝트를 작성해 거기로부터 촬영된 영상이 실제로 화면에 비추어집니다.
자연스러운 외형의 투시 투영(Perspective view; 멀리 있는 것이 작게 보이는 view)을 내기 위해서 PerspectiveCamera 를 만들어 봅시다.
const camera = new THREE.PerspectiveCamera()
PerspectiveCamera() 의 인수에,
· fov (시야각)
· aspect (종횡비: 수직 방향의 시야와, 수평 방향의 시야.아래 그림의 경우, X/Y )
· near (카메라에서 얼마나 가까이에서 그릴 것인가)
· far (카메라에서 얼마나 멀리 보이는지)
을 설정합니다.
오라일리 책에 따르면 다음은 각각의 권장 기본값입니다.
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 2000)
카메라가 생기면 설치합시다.
camera.position.set(0, 0, 1000);
4. 3D 객체 만들기
공을 설치합시다.
먼저 Mesh라는 표시 객체를 만듭니다.
const mesh = new THREE.Mesh();
THREE.Mesh의 인수에 형상(지오메트리)과 소재(머티리얼)를 설정합니다.
const mesh = new THREE.Mesh(geometry, material)
지오메트리는 이번에는 구체를 설정합니다.
머티리얼은 meshBasicMaterial 이라는 균일한 색상으로 표현되는 머티리얼(그림자 없이)을 사용합니다.
자세한 내용은 공식 DOC: SphereGeometry을 참조하십시오.
const geometry = new THREE.SphereGeometry(100,32,32)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
이것을 scene.add(mesh) 로 장면에 추가합니다.
결국 다음 코드가됩니다.
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
5. 최종 코드
마지막으로, 장면과 카메라를, renderer.render() 해 완성입니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
//レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".stage")
});
renderer.setSize(window.innerWidth, window.innerHeight);
//シーンを作成
const scene = new THREE.Scene();
//カメラを作成
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.1,
2000
);
camera.position.set(0, 0, 1000);
//球を作成
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//レンダリング
renderer.render(scene, camera);
}
window.addEventListener("load", init);
</script>
</body>
</html>
CSS를 사용하면 1분만에 만들 수 있을 것 같은데, 분한 일이 없었습니다.
여기에서 점점 퍼져 나가는군요.
그럼 또 내일~
Reference
이 문제에 관하여(Three.js로 플레이하기 - 3D 객체 표시 -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/399246c9d0bc2b5428df
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
}
window.addEventListener("load", init);
</script>
</body>
</html>
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.stage')
});
renderer.setSize(window.innerWidth, window.innerHeight);
const scene = new THREE.Scene()
scene.add(camera);
scene.add(spotLight);
scene.add(planeMesh)
const camera = new THREE.PerspectiveCamera()
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 2000)
camera.position.set(0, 0, 1000);
const mesh = new THREE.Mesh();
const mesh = new THREE.Mesh(geometry, material)
const geometry = new THREE.SphereGeometry(100,32,32)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
//レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".stage")
});
renderer.setSize(window.innerWidth, window.innerHeight);
//シーンを作成
const scene = new THREE.Scene();
//カメラを作成
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.1,
2000
);
camera.position.set(0, 0, 1000);
//球を作成
const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//レンダリング
renderer.render(scene, camera);
}
window.addEventListener("load", init);
</script>
</body>
</html>
Reference
이 문제에 관하여(Three.js로 플레이하기 - 3D 객체 표시 -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/399246c9d0bc2b5428df텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
