*
//화면 생성
const scene = new THREE.Scene();
//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
camera.position.y = 160;
camera.position.z = 400;
//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//메쉬 설정
var octahedronGeometry = new THREE.OctahedronGeometry(25);
var octahedronMaterial = new THREE.MeshPhongMaterial({
color: 0xFF0000,
specular: 0x00FFFF,
emissive: 0xe5f442,
shininess: 70,
shading: THREE.FlatShading,
blending: THREE.NormalBlending,
depthTest: true,
transparent: false,
opacity: 1.0
});
var octahedron = new THREE.Mesh(octahedronGeometry, octahedronMaterial);
octahedron.rotation.y = Math.PI * 45 / 180;
scene.add(octahedron);
camera.lookAt(octahedron.position);
var geometry = new THREE.TorusGeometry(40, 10, 6, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var specialMaterial = new THREE.MeshPhongMaterial({
color: 0xFF0000,
specular: 0x00FFFF,
emissive: 0x0000FF,
shininess: 60,
shading: THREE.FlatShading,
blending: THREE.NormalBlending,
depthTest: true,
transparent: false,
opacity: 1.0
});
var torus = new THREE.Mesh( geometry, specialMaterial );
scene.add(torus);
var geometry2 = new THREE.TorusGeometry(80, 10, 6, 200);
var material2 = new THREE.MeshBasicMaterial({ color: 0xffffff } );
var specialMaterial2 = new THREE.MeshPhongMaterial({
color: 0xFF00ff,
specular: 0x00FFFF,
emissive: 0x0000FF,
shininess: 60,
shading: THREE.FlatShading,
blending: THREE.NormalBlending,
depthTest: true,
transparent: false,
opacity: 1.0
});
var torus2 = new THREE.Mesh( geometry2, specialMaterial2 );
scene.add(torus2);
//조명 설정
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 100, 200);
scene.add(pointLight);
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.2)
directionalLight1.position.z = 4
scene.add(directionalLight1)
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
torus.rotation.y -= 0.05;
torus.rotation.x -= 0.005;
torus2.rotation.y -= 0.005;
torus2.rotation.x -= 0.005;
octahedron.rotation.y += 0.02;
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