첫 번째 ThreeJS 프로젝트 설정 - 3단계 설정
13233 단어 tutorialthreejsjavascriptwebdev
기초
Three.js는 웹 페이지에서 3D 콘텐츠를 가능한 한 쉽게 얻을 수 있도록 하는 3D 라이브러리입니다. Three.js는 종종 WebGL과 혼동되는데, 항상 그런 것은 아니지만 three.js는 WebGL을 사용하여 3D를 그리기 때문입니다.
WebGL은 점, 선, 삼각형만 그리는 매우 낮은 수준의 시스템입니다. WebGL로 유용한 작업을 수행하려면 일반적으로 상당한 양의 코드가 필요하며 여기서 three.js가 필요합니다. WebGL은 장면, 조명, 그림자, 재료, 텍스처, 3d 수학, 직접 작성해야 하는 모든 것을 처리합니다. WebGL을 직접 사용한다면.
시작하기
계속해서 CodePen playground을 사용하여 새 프로젝트를 초기화하거나 src 폴더 아래에 다음 파일 구조를 사용하여 Visual Studio Code에서 자신의 프로젝트를 설정하십시오.
ThreeJS Scene Template
|- /src
|- index.html
|- style.css
|- Avatar.png
|- spaceTexture.png
|- moonTexture.png
|- normalMap.png
|- script.js
파트 1: HTML
HTML은 정말 기본입니다.
index.html
를 편집하고 다음 코드로 바꿉니다.<canvas id="bg"></canvas>
파트 2: CSS
다음 단계는 다음 스타일을 추가하고
style.css
파일을 완성하는 것입니다. 캔버스를 감싸는 div가 문서에 맞는지 확인하고 평면 div 요소에 원하는 크기를 적용하십시오.@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap');
html,
body {
height: 100vh;
}
body {
background-color: #000;
color: #fff;
display: flex;
align-items: center;
font-family: 'Rubik', sans-serif;
margin: 0;
overflow: hidden;
}
div {
position: absolute;
left: 0;
top: 0;
padding: 1em;
}
canvas {
position: fixed;
top: 0;
left: 0;
}
파트 3: 자바스크립트
이제 우리는 JavaScript 로직을 ThreeJS 설정에 구현할 수 있습니다.
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
//creating the scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableKeys = false;
controls.maxDistance = 5000.0;
controls.enableDamping = true;
controls.dampingFactor = 0.16;
controls.target.set(0, 0, 0);
// If you use THREE.OrbitControls and you want to change the camera target or position you need to use the update method.
camera.position.set(0, 5, 0);
controls.update();
document.body.appendChild(renderer.domElement);
THREE.ImageUtils.crossOrigin = '';
const texture = THREE.ImageUtils.loadTexture('avatar.png');
texture.anisotropy = renderer.getMaxAnisotropy();
//Stars
function addStar() {
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const star = new THREE.Mesh(geometry, material);
const [x, y, z] = Array(3)
.fill()
.map(() => THREE.MathUtils.randFloatSpread(300));
star.position.set(x, y, z);
scene.add(star);
}
Array(200).fill().forEach(addStar);
// Lights
const pointLight = new THREE.PointLight(0xffffff, 2);
pointLight.position.set(5, 5, 5);
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(pointLight, ambientLight);
// Background
const spaceTexture = new THREE.TextureLoader().load('https://media.istockphoto.com/photos/aerosol-clouds-space-haze-or-cosmic-rays-pink-pastel-blue-space-sky-picture-id1306540124?b=1&k=20&m=1306540124&s=170667a&w=0&h=Cpdu6iLmqYM7BFjoq0xvTnR6ws12ba6v7yxAFhCenyI=');
scene.background = spaceTexture;
// Moon
const moonTexture = new THREE.TextureLoader().load('data:image/jpeg;base64,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');
const normalTexture = new THREE.TextureLoader().load('https://www.filterforge.com/filters/9158-normal.jpg');
const moon = new THREE.Mesh(
new THREE.SphereGeometry(3, 32, 32),
new THREE.MeshStandardMaterial({
map: moonTexture,
normalMap: normalTexture,
})
);
scene.add(moon);
moon.position.z = 60;
moon.position.setX(-10);
//Torus
const ringGeometry = new THREE.TorusGeometry(10,3,16,100);
const material = new THREE.MeshBasicMaterial({color: 'red'});
const torus = new THREE.Mesh(ringGeometry,material);
scene.add(torus);
//cube
const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
let materials = [];
for(let counter = 0; counter < 6; counter++) {
materials.push(new THREE.MeshBasicMaterial({color: 'white', map: texture}));
}
var cube = new THREE.Mesh(cubeGeometry, materials);
scene.add(cube);
//loop
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
torus.rotation.x += 0.01;
torus.rotation.y += 0.005;
torus.rotation.z += 0.01;
moon.rotation.x += 0.005;
renderer.render(scene, camera);
};
animate();
시원한! 이제 저장하면 브라우저에 다음과 같이 표시됩니다.
요약
따라했다면 프로젝트를 완료하고 ThreeJS로 기본 장면 설정을 완료했을 것입니다.
이제 여기까지 했다면 코드를 내Sandbox에 연결하여 포크하거나 복제하면 작업이 완료됩니다.
유용한 리소스
https://threejs.org/
Reference
이 문제에 관하여(첫 번째 ThreeJS 프로젝트 설정 - 3단계 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hr21don/set-up-your-first-threejs-scene-three-part-setup-550i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)