椅子

src/pages/Home.vue

@@ -5,22 +5,44 @@
 <script setup>
 import * as THREE from 'three'
 
-import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'
 
-import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'
-import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'
+import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
 
-let camera, scene, renderer
+let camera, scene, renderer, controls
 
 init()
-render()
+animate()
 
 function init() {
   const container = document.createElement('div')
   document.body.appendChild(container)
 
+  camera = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    20,
+  )
+  camera.position.set(-0.75, 0.7, 1.25)
+
+  scene = new THREE.Scene()
+
+  new GLTFLoader()
+    .setPath('src/assets/models/gltf/')
+    .load('SheenChair.glb', function (gltf) {
+      scene.add(gltf.scene)
+
+      const object = gltf.scene.getObjectByName('SheenChair_fabric')
+
+      const gui = new GUI()
+
+      gui.add(object.material, 'sheen', 0, 1)
+      gui.open()
+    })
+
   renderer = new THREE.WebGLRenderer({ antialias: true })
   renderer.setPixelRatio(window.devicePixelRatio)
   renderer.setSize(window.innerWidth, window.innerHeight)
@@ -28,56 +50,37 @@ function init() {
   renderer.toneMappingExposure = 1
   container.appendChild(renderer.domElement)
 
-  camera = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    2000,
-  )
-  camera.position.set(0, 100, 0)
-
   const environment = new RoomEnvironment()
   const pmremGenerator = new THREE.PMREMGenerator(renderer)
 
-  scene = new THREE.Scene()
   scene.background = new THREE.Color(0xbbbbbb)
   scene.environment = pmremGenerator.fromScene(environment).texture
-  environment.dispose()
-
-  const grid = new THREE.GridHelper(500, 20, 0xffffff, 0xffffff)
-  grid.material.opacity = 0.5
-  grid.material.depthWrite = false
-  grid.material.transparent = true
-  scene.add(grid)
-
-  const ktx2Loader = new KTX2Loader()
-    .setTranscoderPath('jsm/libs/basis/')
-    .detectSupport(renderer)
-
-  const loader = new GLTFLoader().setPath('src/assets/models/gltf/')
-  loader.setKTX2Loader(ktx2Loader)
-  loader.setMeshoptDecoder(MeshoptDecoder)
-  loader.load('coffeemat.glb', function (gltf) {
-    gltf.scene.position.y = 8
-    scene.add(gltf.scene)
-    render()
-  })
 
-  const controls = new OrbitControls(camera, renderer.domElement)
-  controls.addEventListener('change', render) // use if there is no animation loop
-  controls.minDistance = 400
-  controls.maxDistance = 1000
-  controls.target.set(10, 90, -16)
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.minDistance = 1
+  controls.maxDistance = 10
+  controls.target.set(0, 0.35, 0)
   controls.update()
+
   window.addEventListener('resize', onWindowResize)
 }
 
 function onWindowResize() {
   camera.aspect = window.innerWidth / window.innerHeight
   camera.updateProjectionMatrix()
+
   renderer.setSize(window.innerWidth, window.innerHeight)
+}
+
+function animate() {
+  requestAnimationFrame(animate)
+
+  controls.update() // required if damping enabled
+
   render()
 }
+
 function render() {
   renderer.render(scene, camera)
 }