//three를 선언한다.
const scene = new THREE.Scene();
//카메라를 설정한다.
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 7, 10);
//렌더링을 설정하고 안티 에일리어싱을 true로 하여 계단 현상을 막아준다.
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 사이즈를 설정하고 body 태그 자식으로 설정
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 컨트롤을 하기 위해 설정
// OrbitControls을 사용하면 카메라가 대상 주위를 공전 할 수 있다.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const group = new THREE.Group();
scene.add(group);
//TorusKnotGeometry 모양을 설정
const geometry = new THREE.TorusKnotGeometry(4, 1.3, 100, 16);
const torusKnot = new THREE.Mesh(geometry);
const sampler = new THREE.MeshSurfaceSampler(torusKnot).build();
const vertices = [];
const tempPosition = new THREE.Vector3();
for (let i = 0; i < 15000; i ++) {
sampler.sample(tempPosition);
vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
}
const pointsGeometry = new THREE.BufferGeometry();
pointsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const pointsMaterial = new THREE.PointsMaterial({
color: 0xff61d5,
size: 0.01
});
const points = new THREE.Points(pointsGeometry, pointsMaterial);
group.add(points);
function render () {
group.rotation.y += 0.01;
renderer.render(scene, camera);
}
renderer.setAnimationLoop(render);
//화면 크기 변했을 때
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
What’s on our mind?
Collection of articles, design, site, and resources made by designers and publisher
@Menu View
ad