QQs'Note

npm i three @react-three/fiber

transpilePackages: ['three'],

# Automatically install
expo install expo-gl

# Install NPM dependencies
npm install three @react-three/fiber

// metro.config.js
module.exports = {
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
  },
}

import React from 'react'
import { Canvas } from '@react-three/fiber'

const App = () => (
  <Canvas>{/* 相当于初始化的Scene */}
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </Canvas>
)

npm install leva@latest --save-dev

import { useControls } from 'leva'

const color = useControls({
  value: 'green',
})

<Canvas>
  <color attach="background" args={[color.value]} />
</Canvas>

const canvas = document.createElement('canvas')
const sizes = {
width: this.$refs.container.clientWidth,
height: this.$refs.container.clientHeight
}
canvas.width = sizes.width;
canvas.height = sizes.height;
this.$refs.container.appendChild(canvas);
// 创建3D场景对象Scene
const scene = new THREE.Scene();
console.log(scene); 
// Geometry
const geometry = new THREE.SphereGeometry(5, 32, 32);
const material = new THREE.MeshBasicMaterial({color: '#aaa', wireframe:true})
// Mesh
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -10);
scene.add(mesh)

// 创建相机对象Camera
// 45-75 是透视投影相机建议的视角范围fov
// 视角比例aspect w/h
// 投影近平面
// 投影远平面
const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 1000);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.render(scene, camera);

const renderer = new THREE.WebGLRenderer()
renderer.setSize(container.current.clientWidth, container.current.clientHeight)
container.current.appendChild(renderer.domElement)

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
...
// Add OrbitControls
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();

// camera 移动是重复的render过程 需要requestAnimationFrame
function animate() {

 requestAnimationFrame( animate );

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

 renderer.render( scene, camera );
}

tick(){
    mesh.rotaion.y += 0.05
    console.log("tick tack")
    requestAnimationFrame(tick)
}

const clock = new THREE.Clock()
const animate = () => {
    const t = clock.getElapsedTime()
    group.rotation.y=0.5*Math.PI*t
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};

animate();

gsap.to(group.position, {
    duration:1,
    delay:1,
    x:20
})
gsap.to(group.position, {
    duration:1,
    delay:2,
    x:0
})
   
const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
};

animate();

const camera = new THREE.OrthographicCamera(
    -20*container.current.clientWidth/container.current.clientHeight, /*左边界*/
    20*container.current.clientWidth/container.current.clientHeight,/*右边界*/
    20,/*上边界*/
    -20,/*下边界*/
    0.1,
    1000
)

 // mouse rotate
document.addEventListener('mousemove', (e)=>{
    if(!container.current) return
    const x = (e.x - container.current.offsetLeft)/container.current.clientWidth - 0.5;
    const y = -(e.x - container.current.offsetTop)/container.current.clientHeight + 0.5;
    // 圆形轨迹的坐标呈正弦/余弦往复
    camera.position.z = Math.cos(x*Math.PI*10)*20
    camera.position.x = Math.sin(x*Math.PI*10)*20
    // 注意！ 相机位置移动时 会从原目标移开 所以重新设置lookAt
    camera.lookAt(scene.position)
    renderer.render(scene, camera)
})

const loader = new THREE.TextureLoader()
const texture = loader.load('./assets/images/cover/cover-6.webp',
    (txt)=>{
        console.log(txt)
    },
    ()=>{
        console.log('loading')
    },
    (e)=>{
        console.error(e)
    }
)
// 设置纹理在U轴（水平方向）和V轴（垂直方向）上的重复次数。
texture.repeat.x = 2
texture.repeat.y = 2
// 设置纹理在U轴（S方向）和V轴（T方向）上的包裹模式（wrap mode）。
// THREE.MirroredRepeatWrapping接缝处镜像翻转
texture.wrapS = THREE.MirroredRepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.offset.x = 0.5
// 素材逆时针旋转Π/2
texture.rotation = Math.PI * 0.5
texture.center.x = 1
texture.center.y = 1
// 放大时 线性平滑
texture.magFilter = THREE.LinearFilter
// 缩小时 取相邻两个mip层做线性平滑
texture.minFilter = THREE.LinearMipmapLinearFilter
const cubeMaterial = new THREE.MeshBasicMaterial({
    // color: 0xff0000, 
    // wireframe:true
    map: texture
})

const sphereGeometry = new THREE.SphereGeometry(5, 32, 32)
const ball = new THREE.Mesh(sphereGeometry, cubeMaterial)

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';

// text
const fontLoader = new FontLoader()
fontLoader.load('./assets/font/Kristen ITC_Regular.json', (font) => {
    const textGeometry = new TextGeometry(
        'Hello 3D',
        {
            font,
            size: 2,
            depth:0.2, /** 原height属性 */
            curveSegments: 12,
            bevelEnabled: true, /**斜角 */
            bevelThickness: 0.3,
            bevelSize: 0.2,
            bevelOffset: 0,
            bevelSegments: 5
        }
    )

    const textMaterial = new THREE.MeshBasicMaterial({ color: 'blue', wireframe:true })
    const textMesh = new THREE.Mesh(textGeometry, textMaterial)
    //textMesh.position.set(0,0,0)
    scene.add(textMesh)
})

```js

3D Text默认position位于文字起点 移动到中心

```js
textGeometry.translate(
    - (textGeometry.boundingBox.x - 0.2)*0.5, /** 减去倒角 */
    - (textGeometry.boundingBox.y - 0.2)*0.5,
    - (textGeometry.boundingBox.z - 0.3)*0.5
)

scene.background = new THREE.Color(0xbfd1e5); // 浅蓝色背景
// 线性雾 效果从举例10开始 线性增加 直到100完全融入背景 
scene.fog = new THREE.Fog(0xbfd1e5, 10, 100); 
// 指数平方雾 根据距离指数级增加 
// scene.fog = new THREE.FogExp2(color, density);

// A. 创建几何体 (BufferGeometry)
const particlesCount = 2000;
const geometry = new THREE.BufferGeometry();

// 创建位置数组 (每个点有 x, y, z 三个坐标)
const positions = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount * 3; i++) {
    // 在 -50 到 50 的范围内随机分布
    positions[i] = (Math.random() - 0.5) * 100; 
}

// 将数据绑定到几何体
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// B. 创建材质
const material = new THREE.PointsMaterial({
    size: 0.5,           // 粒子大小
    color: 0x00ff88,     // 粒子颜色
    transparent: true,   // 开启透明
    opacity: 0.8,        // 透明度
    sizeAttenuation: true // 粒子是否随距离变小 (透视效果)
});

// C. 创建 Points 对象并添加到场景
const particles = new THREE.Points(geometry, material);
scene.add(particles);