*
//화면 생성
let scene = new THREE.Scene();
//카메라 설정
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.z = 2;
scene.add(camera);
//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
//메쉬 설정
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0x111111,
shininess: 100,
flatShading: true
});
const geometry = new THREE.TorusGeometry(0.3, 0.15, 20, 50)
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);
const sphereGeometry = new THREE.SphereGeometry(0.15, 20, 20);
const sphereParent = new THREE.Object3D();
const sphereOffset = 0.5;
for (let i=0; i<4; i++) {
const mesh = new THREE.Mesh(sphereGeometry, material);
sphereParent.add(mesh);
}
sphereParent.position.x = -sphereOffset;
sphereParent.children[0].position.x = sphereOffset;
sphereParent.children[1].position.x = -sphereOffset;
sphereParent.children[2].position.z = sphereOffset;
sphereParent.children[3].position.z = -sphereOffset;
const group = new THREE.Group();
group.add(sphereParent, torus);
scene.add(group);
//조명 설정
const light = new THREE.DirectionalLight(0x1e90ff);
const shine = new THREE.SpotLight(0xfff00);
light.position.set(1, 1, 0);
shine.position.set(0, 0, 1);
scene.add(light, shine);
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
sphereParent.rotation.y += 0.01;
group.rotation.x += 0.01
group.rotation.y += 0.02
shine.position.x = Math.sin(0) * 100;
shine.position.y = Math.cos(0) * 100;
renderer.render(scene, camera);
}
animate();
//화면 사이즈 설정
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