**
//화면 생성
const scene = new THREE.Scene();
//카메라 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 220;
camera.position.y = 100;
//렌더링 설정
const renderer = new THREE.WebGLRenderer({alpha: true, antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
document.getElementById("canvas").appendChild(renderer.domElement);
//컨트롤 설정
const controls = new THREE.OrbitControls(camera, renderer.domElement);
//그룹 설정
const group = new THREE.Group();
scene.add(group);
//모양 설정
let sampler = null;
let elephant = null;
let paths = [];
new THREE.OBJLoader().load("https://assets.codepen.io/127738/Mesh_Elephant.obj", (obj) => {
sampler = new THREE.MeshSurfaceSampler(obj.children[0]).build();
for (let i=0; i<4; i++) {
const path = new Path(i);
paths.push(path);
group.add(path.line);
}
});
const tempPosition = new THREE.Vector3();
const materials = [new THREE.LineBasicMaterial({color: 0xFAAD80, transparent: true, opacity: 0.5}),
new THREE.LineBasicMaterial({color: 0xFF6767, transparent: true, opacity: 0.5}),
new THREE.LineBasicMaterial({color: 0xFF3D68, transparent: true, opacity: 0.5}),
new THREE.LineBasicMaterial({color: 0xA73489, transparent: true, opacity: 0.5})];
class Path {
constructor (index) {
this.geometry = new THREE.BufferGeometry();
this.material = materials[index % 4];
this.line = new THREE.Line(this.geometry, this.material);
this.vertices = [];
sampler.sample(tempPosition);
this.previousPoint = tempPosition.clone();
}
update () {
let pointFound = false;
while (!pointFound) {
sampler.sample(tempPosition);
if (tempPosition.distanceTo(this.previousPoint) < 30) {
this.vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
this.previousPoint = tempPosition.clone();
pointFound = true;
}
}
this.geometry.setAttribute("position", new THREE.Float32BufferAttribute(this.vertices, 3));
}
}
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
group.rotation.y += 0.002;
paths.forEach(path => {
if (path.vertices.length < 10000) {
path.update();
}
});
controls.update();
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