Three.js_ 03 3D 도형 추가 + 반응형

https://youtu.be/O0HAN1nXvMU?list=PLkbzizJk4Ae9hHI_YUD3fRv8xLfS3jGEW 

 

---

> 박스만들기 DOC

https://threejs.org/docs/index.html?q=geo#api/en/geometries/BoxGeometry 

three.js docs

 

---

박스 메쉬 만들기

> app.js

import * as THREE from 'three'
import { Scene } from 'three';
import { WEBGL } from './webgl'

if (WEBGL.isWebGLAvailable()) {
  //장면
  const scene = new THREE.Scene();
  //배경색 바꾸기
  scene.background = new THREE.Color(0x004fff)

  //카메라
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z =3

  //캔버스
  // const canvas = document.querySelector('#c')

  //렌더러
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)

  //Mesh Box
  const geometry = new THREE.BoxGeometry(0.5,0.5,0.5)
  const material = new THREE.MeshStandardMaterial({
    color:0x999999
  })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)


  //render
  function render(time) {
    time *= 0.001;  // convert time to seconds
   
    cube.rotation.x = time;
    cube.rotation.y = time;
   
    renderer.render(scene, camera);
   
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

} else {
  var warning = WEBGL.getWebGLErrorMessage()
  document.body.appendChild(warning)
}

 

실행 

 

---

도형 여러개 다른 모양으로

> app.js

메쉬 추가

  //Mesh Box
  const geometry01 = new THREE.BoxGeometry(0.5,0.5,0.5)
  const material01 = new THREE.MeshStandardMaterial({
    color:0x999999
  })
  const obj01 = new THREE.Mesh(geometry01, material01)
  obj01.position.x = -1
  scene.add(obj01)

  //Mesh Cone
  const geometry02 = new THREE.ConeGeometry(0.4,0.6,6)
  const material02 = new THREE.MeshStandardMaterial({
    color:0x999999
  })
  const obj02 = new THREE.Mesh(geometry02, material02)
  scene.add(obj02)

  //Mesh IcosahedronGeometry
  const geometry03 = new THREE.IcosahedronGeometry(0.4,0)
  const material03 = new THREE.MeshStandardMaterial({
    color:0x999999
  })
  const obj03 = new THREE.Mesh(geometry03, material03)
  obj03.position.x = 1
  scene.add(obj03)
  
  //render
  function render(time) {
    time *= 0.001;  // convert time to seconds
   
    // obj01.rotation.x = time;
    obj01.rotation.y = time;
    // obj02.rotation.x = time;
    obj02.rotation.y = time;
    // obj03.rotation.x = time;
    obj03.rotation.y = time;
   
    renderer.render(scene, camera);
   
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

 

//화면에 맞게 가운데 맞춤 : 반응형 웹 표현

윈도우 크기 반응형 함수 추가

 //반응형 처리
  function onWindowResize(){
    camera.aspect = window.innerWidth/window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  window.addEventListener('resize', onWindowResize)