What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

*
//화면 생성
    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);