예제 Code
1 Html
<nav> <h1> Blockify yourself </h1>
<input type="file" accept="image/*" id="fileinput">
</nav>
<footer>
<div>
<label>
<input type="color" id="cubecolor" value="#ffffff"> "Cube"
</label>
<label>
<input type="color" id="topcolor" value="#a46cff"> " Side "
</label>
<label>
<input type="color" id="sidecolor" value="#ff6ddf"> " Top "
</label>
<label>
<input type="color" id="bgcolor" value="#000000"> " Background "
</label>
</div>
<div>
<button id="savebutton"> Save </button>
</div>
</footer>
|
[ 3dcube.js ]
2 CSS
body {
margin: 0;
font-family: 'Krona One', sans-serif;
}
h1 {
margin: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
color: white;
padding: 1rem;
display: flex;
place-items: center;
gap:1rem;
justify-content: space-between;
}
footer {
color: white;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
display: flex;
place-items: end;
justify-content: space-between;
}
input[type="color"] {
border: 1px solid white;
padding: 0;
border-radius: 5px;
}
footer a{
font-size: .5rem;
color: white;
}
|
[ 3dcube.js ]
3 Javascript
|
// Find the latest version by visiting https://cdn.skypack.dev/three. const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 1, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const frontmat = new THREE.MeshPhongMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const geometry = new THREE.PlaneGeometry( 3, 3 );
const front = new THREE.Mesh( geometry, frontmat);
front.position.z = 1.5;
const sidemat = new THREE.MeshPhongMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const side = new THREE.Mesh( geometry, sidemat );
side.rotation.y = Math.PI/2;
side.position.x = 1.5;
const topmat = new THREE.MeshPhongMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const top = new THREE.Mesh( geometry, topmat);
top.rotation.x = -Math.PI/2;
top.position.y = 1.5;
const group = new THREE.Group()
group.add(front, side, top)
scene.add( group);
group.rotation.y = -Math.PI/4;
group.rotation.x = Math.PI/8;
camera.position.z = 500;
// const cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshPhongMaterial( {color: 0xffffff} ) );
// scene.add( cube );
// const lighth = new THREE.HemisphereLight( 0x000000, 0xffaaff, 1 );
// scene.add(lighth);
const light = new THREE.DirectionalLight(0xa46cff, 1);
light.position.set(0, -1, 3);
light.target = group;
scene.add(light);
const light2 = new THREE.DirectionalLight(0xff6ddf, 1);
light2.position.set(-3, 2, 1.5);
light2.target = group;
scene.add(light2);
// const light3 = new THREE.DirectionalLight(0xffffff, 1);
// light3.position.set(0, 0, .15);
// light3.target = group;
// scene.add(light3);
// const lightd = new THREE.DirectionalLight( 0xff00ff, 0.5 );
// lightd.position.z = 3;
// lightd.position.y = 3;
// lightd.target = group;
// const color = 0xFFFFFF;
// const intensity = .6;
const lighta = new THREE.AmbientLight(0xffffff, .6);
scene.add(lighta);
// const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
// const light1 = new THREE.PointLight( 0xff0040, 2, 50 );
// light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
// scene.add( light1 );
// const helper = new THREE.DirectionalLightHelper( light, 5 );
// scene.add( light1 );
const animate = function () {
requestAnimationFrame( animate );
// group.rotation.y += .01;
renderer.render( scene, camera );
};
animate();
const cubecolor = document.getElementById('cubecolor');
cubecolor.addEventListener('change', (e) => {
const color = e.target.value;
frontmat.color.set(color);
sidemat.color.set(color);
topmat.color.set(color);
});
const sidecolor = document.getElementById('sidecolor');
sidecolor.addEventListener('change', (e) => {
const color = e.target.value;
light2.color.set(color);
})
const topcolor = document.getElementById('topcolor');
topcolor.addEventListener('change', (e) => {
const color = e.target.value;
light.color.set(color);
});
const bgcolor = document.getElementById('bgcolor');
bgcolor.addEventListener('change', (e) => {
const color = e.target.value;
scene.background = new THREE.Color(color);
})
const fileinput = document.getElementById('fileinput');
fileinput.addEventListener('change', loadFile);
function loadFile(event) {
// const front = document.getElementById('front');
// const top = document.getElementById('top');
// const side = document.getElementById('side');
// front.style.background = `url(${URL.createObjectURL(event.target.files[0])})`;
// front.onload = function() {
// URL.revokeObjectURL(output.src) // free memory
// }
const textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = "Anonymous"
const frontTexture = textureLoader.load(URL.createObjectURL(event.target.files[0]), function ( texture ) {
texture.repeat.set(1/3, 1/3);
texture.needsUpdate = true;
const fronttex = texture.clone();
fronttex.offset.set(1/3, 1/3);
fronttex.needsUpdate = true;
frontmat.map = fronttex;
frontmat.needsUpdate = true;
const sidetex = texture.clone();
sidetex.offset.set(2/3, 1/3);
sidetex.needsUpdate = true;
sidemat.map = sidetex;
sidemat.needsUpdate = true;
const toptex = texture.clone();
toptex.offset.set(1/3, 2/3);
toptex.needsUpdate = true;
topmat.map = toptex;
topmat.needsUpdate = true;
})
}
const savebutton = document.getElementById("savebutton")
savebutton.addEventListener("click", saveAsImage);
function saveAsImage() {
var imgData, imgNode;
try {
const strMime = "image/png";
imgData = renderer.domElement.toDataURL(strMime);
const strDownloadMime = "image/octet-stream";
saveFile(imgData.replace(strMime, strDownloadMime), "block.png");
} catch (e) {
console.log(e);
return;
}
}
function saveFile (strData, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
document.body.appendChild(link); //Firefox requires the link to be in the body
link.download = filename;
link.href = strData;
link.click();
document.body.removeChild(link); //remove the link when done
} else {
location.replace(uri);
}
}
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
|
[ 3dcube.js ]
'웹개발 자료실 > three.js 프론트개발 Code' 카테고리의 다른 글
| 「three.js」턴테이블 카메라 생성하기 (2) | 2023.01.12 |
|---|---|
| 「three.js」웹에서 3D 기본 라이트를 구현해보자 (0) | 2023.01.12 |
| 『Firebase Storage + GLTF 3D Model import Test』 (0) | 2021.03.29 |
| 『firebase Storage + fbx Loader Test』 (2) | 2021.03.26 |
| 「three.js」키보드로 3D 오브젝트 움직이기 (0) | 2019.05.06 |
댓글