Three.js_05 마우스 오브제 회전 OrbitControls

https://www.youtube.com/watch?v=ITA9no8Bsio&list=PLe6NQuuFBu7HqxY10b6gNu6iisT2-rZv-&index=3 

https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls 

three.js docs

 

Code Example

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

const controls = new OrbitControls( camera, renderer.domElement );

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {

	requestAnimationFrame( animate );

	// required if controls.enableDamping or controls.autoRotate are set to true
	controls.update();

	renderer.render( scene, camera );

}

---

DOC도 튜토도 어렵지만 .. 생각보다 간단했다 .....

 

[오류] 

: OrbitControls가 정의되지 않았다고 나온다

 

[해결]

>app.js

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

import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js'

**임포트 해줘야 하는데 자신의 경로에 맞아야 한다!!

나는 저 경로에 있었다..

그래서!

  //controls
  const controls = new OrbitControls( camera, renderer.domElement )

이것만 추가해주면 된다..

 

---

> app.js 전체

import * as THREE from 'three'
import { Scene } from 'three'
import { WEBGL } from './webgl'
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js'

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({
    alpha : true,
    antialias : true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)
  //controls
  const controls = new OrbitControls( camera, renderer.domElement )

  //Light
  const pointLight = new THREE.PointLight(0xffffff, 1)
  pointLight.position.set(0,2,12)
  scene.add(pointLight)


  //Mesh 01
  const geometry01 = new THREE.TorusGeometry(0.3,0.15,16,40)
  const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00,
    metalness:0.5,
    roughness: 0.4,
    // transparent: true,
    // opacity: 0.5
  })
  const obj01 = new THREE.Mesh(geometry01, material01)
  obj01.position.x = -2
  scene.add(obj01)

  //Mesh 2
  const geometry02 = new THREE.TorusGeometry(0.3,0.15,16,40)
  const material02 = new THREE.MeshBasicMaterial({
    color:0xFF7F00,
  })
  material02.wireframe = true
  const obj02 = new THREE.Mesh(geometry02, material02)
  obj02.position.x = -1

  scene.add(obj02)

  //Mesh 3
  const geometry03 = new THREE.TorusGeometry(0.3,0.15,16,40)
  const material03 = new THREE.MeshPhysicalMaterial({
    color:0xFF7F00,
    clearcoat: 1,
    clearcoatRoughness: 0.2
  })
  const obj03 = new THREE.Mesh(geometry03, material03)
  scene.add(obj03)
  //Mesh 4
  const geometry04 = new THREE.TorusGeometry(0.3,0.15,16,40)
  const material04 = new THREE.MeshLambertMaterial({
    color:0xFF7F00
  })
  const obj04 = new THREE.Mesh(geometry04, material04)
  obj04.position.x = 1
  scene.add(obj04)
  //Mesh 5
  const geometry05 = new THREE.TorusGeometry(0.3,0.15,16,40)
  const material05 = new THREE.MeshPhongMaterial({
    color:0xFF7F00,
    shininess: 60
  })
  const obj05 = new THREE.Mesh(geometry05, material05)
  obj05.position.x = 2
  scene.add(obj05)



  //render
  function render(time) {
    time *= 0.001;  // convert time to seconds
   
    obj01.rotation.y = time;
    obj02.rotation.y = time;
    obj03.rotation.y = time;
    obj04.rotation.y = time;
    obj05.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)
  

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

 

> npm run start

localhost:9000