https://gltf.report
const renderer = new THREE.WebGLRenderer({ canvas })
// 设置像素比
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const loadingManager = new THREE.LoadingManager()
const textureLoader = new THREE.TextureLoader(loadingManager)
const colorTexture = textureLoader.load('/textures/checkerboard-8x8.png')
/**
* THREE.NearestFilter 最近点采样
* THREE.LinearFilter 线性采样 默认值
* minFilter 缩小滤镜(例如32X32的纹理映射到16X16的像素空间)
* magFilter 放大滤镜(例如16X16的纹理映射到32X32的像素空间)
*/
// colorTexture.minFilter = THREE.NearestFilter
colorTexture.magFilter = THREE.NearestFilter
const fontLoader = new FontLoader()
fontLoader.load(
'/fonts/helvetiker_regular.typeface.json',
(font) => {
console.log('font loaded')
const textGeometry = new TextGeometry(
'Hello World',
{
font,
size: 0.5,
height: 0.2,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 3 // 减少贝塞尔曲线
}
)
const textMaterial = new THREE.MeshBasicMaterial()
textMaterial.wireframe = true
const textMesh = new THREE.Mesh(textGeometry, textMaterial)
textMesh.position.x = 1
scene.add(textMesh)
}
)
// Clock
const clock = new THREE.Clock()
// Animations
const tick = () => {
// Clock
const elapsedTime = clock.getElapsedTime()
mesh.position.x = Math.cos(elapsedTime)
mesh.position.y = Math.sin(elapsedTime)
// Render
renderer.render(scene, camera)
window.requestAnimationFrame(tick)
}
h - 切换开关
设置gui.hide()隐藏之后需要按两下h
来唤醒。