*
//화면 설정
const scene = new THREE.Scene();
//카메라 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.z = 125;
scene.add(camera);
//렌더링 설정
const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);
//모양 설정
const material = new THREE.MeshBasicMaterial();
const geometry = new THREE.TorusBufferGeometry(30, 25, 50, 50)
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//캔버스 설정
function setCanvas() {
var canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 1024;
var context = canvas.getContext('2d');
context.strokeStyle = '#FFFFFF';
context.lineWidth = 1;
context.font = "150px Helvetica";
for (var i=0; i<6; i++) {
context.strokeText("WEBSTORYBOY", 10, i * 200);
}
material.map = new THREE.CanvasTexture(canvas, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
}
setCanvas()
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
material.map.offset.x -= 0.001;
material.map.offset.y += 0.005;
material.map.needsUpdate = true;
mesh.rotation.x += 0.005;
mesh.rotation.y -= 0.005;
mesh.rotation.z += 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);
What’s on our mind?
Collection of articles, design, site, and resources made by designers and publisher
@Menu View
ad