threejs 练习— 翡翠手镯

代码如下

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls';
import './style.css'

const canvas = document.getElementById('webgl')

// matcap loader
const matcapLoader = new THREE.TextureLoader()
const matcapsTexture = matcapLoader.load('/textures/matcaps/10.png')

const braceletMapTexture = matcapLoader.load('/textures/bracelet-map.jpg')
braceletMapTexture.magFilter = THREE.NearestFilter;
braceletMapTexture.anisotropy = 500

// scene
const scene = new THREE.Scene();

const ambientLight = new THREE.AmbientLight();
ambientLight.color = new THREE.Color(0xffffff)
ambientLight.intensity = 0.5
scene.add(ambientLight);

const group = new THREE.Group()

const geometry = new THREE.TorusGeometry( 0.5, 0.1, 24  );
const material = new THREE.MeshMatcapMaterial({color: '#61af3a'});
material.matcap = matcapsTexture
material.side = THREE.DoubleSide
material.map = braceletMapTexture
const torus = new THREE.Mesh( geometry, material );
group.add( torus );


scene.add(group)
// sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize',() => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight
  camera.aspect = sizes.width / sizes.height

  camera.updateProjectionMatrix()

  renderer.setSize(sizes.width,sizes.height)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
})

window.addEventListener('dblclick',() => {

  const fullscreenElement = document.fullscreenElement || document.webkitFullScreenElement

  if(!fullscreenElement) {
    if(canvas.requestFullscreen) {
      canvas.requestFullscreen()
    } else if(canvas.webkitRequestFullscreen) {
      canvas.webkitRequestFullscreen()
    }
  } else {
    if(document.exitFullscreen) {
      document.exitFullscreen()
    } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    }
  }
})

// camera
const camera = new THREE.PerspectiveCamera(75,sizes.width / sizes.height,0.1,100)
// camera.position.x = 1
// camera.position.y = 1
camera.position.z = 2
scene.add(camera)


// contorl
const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true

// Renderer
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(sizes.width,sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))



// clock
const clock = new THREE.Clock()

// animations
const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  group.rotation.y = 0.5 * elapsedTime

  controls.update()

  // render
  renderer.render(scene,camera);

  window.requestAnimationFrame(tick)
}

tick()

手镯matcap

手镯纹理贴图