* index8.html
//화면 생성
const scene = new THREE.Scene();
//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.z = 50
//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//메쉬 설정
var geometry = new THREE.SphereBufferGeometry(10, 36, 18);
var material = new THREE.PointsMaterial({color: 0xffff00, size: 0.5});
material.onBeforeCompile = shader => {
shader.vertexShader = `varying float vVisible;` + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
`gl_PointSize = size;`,
`vec3 vNormal = normalMatrix * normal;
vVisible = step( 0., dot( -normalize(mvPosition.xyz), normalize(vNormal) ) );
gl_PointSize = size;`
);
shader.fragmentShader = `varying float vVisible;` + shader.fragmentShader;
shader.fragmentShader = shader.fragmentShader.replace(
`#include `,
`if ( floor(vVisible + 0.1) == 0.0 ) discard;
#include `);
}
var points = new THREE.Points(geometry, material);
scene.add(points);
var mesh = new THREE.MeshBasicMaterial({color:"green", wireframe: true});
var wire = new THREE.Mesh(geometry, mesh);
scene.add(wire);
//조명 설정
const ambientLight = new THREE.AmbientLight(0x663399)
scene.add(ambientLight);
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
wire.rotation.x += .005
wire.rotation.y += .005
wire.rotation.z += .005
points.rotation.x += .005
points.rotation.y += .005
points.rotation.z += .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