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