LatheGeometry + CircleGeometry 制作花瓶

1. LatheGeometry 制作花瓶瓶身
2. CircleGeometry 制作花瓶顶部
3. MeshMatcapMaterial 加上材质 通透 matcap 地址可以去GitHub - nidorx/matcaps: Huge library of matcap PNG textures organized by color 找自己喜欢的
4. 加上花瓶花纹 贴图 这里可以去网上找自己喜欢的图片

代码 如下

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/9.png')

const vasMapTexture = matcapLoader.load('/textures/vas-map.png')
vasMapTexture.magFilter = THREE.NearestFilter;
vasMapTexture.anisotropy = 500

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

const material = new THREE.MeshMatcapMaterial({matcap:matcapsTexture,wireframe:true})

 material.map = vasMapTexture;


material.side = THREE.DoubleSide

const group = new THREE.Group()

const points = [];
for ( let i = 0; i < 20; i ++ ) {
  points.push( new THREE.Vector2( Math.sin( i * 0.3) * 0.2 + 0.5, ( i - 10 ) * 0.1 ) );
}
const geometry = new THREE.LatheGeometry( points,48 );
const lathe = new THREE.Mesh( geometry, material );
group.add( lathe );


const geometry1 = new THREE.CircleGeometry( 0.502, 32 );
const circle = new THREE.Mesh( geometry1, material );
circle.rotation.x = Math.PI * 0.5
circle.position.x = 0
circle.position.y = -1
group.add( circle );

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()

效果图：