What’s on our mind?

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

index13
//화면 생성
const scene = new THREE.Scene();

//카메라 설정
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(4);
camera.lookAt(scene.position);  

//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x44bbaa);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//컨트롤 설정
const controls = new THREE.OrbitControls(camera, renderer.domElement);

//지오매트리 설정

//조명 설정
const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));


var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin( "" );
loader.setPath( 'https://threejs.org/examples/textures/cube/pisa/' );

var cubeTexture = loader.load( [
    'px.png', 'nx.png',
    'py.png', 'ny.png',
    'pz.png', 'nz.png'
]);

var settings = {
    radius: {value: 0.5}
}
var boxGeom = new THREE.BoxBufferGeometry(3, 3, 3, 100, 100, 100);
var boxMat = new THREE.MeshLambertMaterial({ color: "aqua", envMap: cubeTexture });
boxMat.onBeforeCompile = shader => {
    shader.uniforms.boxSize = {
        value: new THREE.Vector3(
        boxGeom.parameters.width,
        boxGeom.parameters.height,
        boxGeom.parameters.depth
    ).multiplyScalar(0.8)
};
shader.uniforms.radius = settings.radius;
shader.vertexShader = `
    uniform vec3 boxSize;
    uniform float radius;
` + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
    `#include <begin_vertex>`,
    `#include <begin_vertex>

    float maxRadius = clamp(radius, 0.0, min(boxSize.x, min(boxSize.y, boxSize.z)));
    vec3 signs = sign(position);

    vec3 subBox = boxSize - vec3(maxRadius);

    vec3 absPos = abs(transformed); 
    // xy
    vec2 sub = absPos.xy - subBox.xy;
    if (absPos.x > subBox.x && absPos.y > subBox.y && absPos.z <= subBox.z) {
        transformed.xy = normalize(sub) * maxRadius + subBox.xy;
        transformed.xy *= signs.xy;
    }
    // xz
    sub = absPos.xz - subBox.xz;
    if (absPos.x > subBox.x && absPos.z > subBox.z && absPos.y <= subBox.y) {
        transformed.xz = normalize(sub) * maxRadius + subBox.xz;
        transformed.xz *= signs.xz;
    }
    // yz
    sub = absPos.yz - subBox.yz;
    if (absPos.y > subBox.y && absPos.z > subBox.z && absPos.x <= subBox.x) {
        transformed.yz = normalize(sub) * maxRadius + subBox.yz;
        transformed.yz *= signs.yz;
    }

    // corner
    if (all(greaterThan(absPos, subBox))){
        vec3 sub3 = absPos - subBox;
        transformed = (normalize(sub3) * maxRadius + subBox) * signs;
    }

    // re-compute normals for correct shadows and reflections
    objectNormal = all(equal(position, transformed)) ? normal : normalize(position - transformed); 
    transformedNormal = normalMatrix * objectNormal; 
    `
    );
};
var box = new THREE.Mesh(boxGeom, boxMat);
scene.add(box);


//애니메이션 설정
var clock = new THREE.Clock();
function animate(a) {
    requestAnimationFrame(animate);

    box.rotation.x += 0.005;
    box.rotation.y += 0.005;

    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);