nextjs Installation

pnpm i three
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2. 使用

```tsx
'use client'
import { useEffect, useRef } from "react"; 
import * as THREE from 'three';
export default function _Game() {
    const mountRef = useRef<any>(null);

    useEffect(() => {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        mountRef.current.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshStandardMaterial({
            color: 0x00ff00,
            metalness: 0.5,
            roughness: 0.5
        });
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5, 5, 5).normalize();
        scene.add(light);

        camera.position.z = 5;

        const animate = () => {
            requestAnimationFrame(animate);
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        };

        animate();

        return () => mountRef.current.removeChild(renderer.domElement);
    }, []);

    return (
        <div>
            <div ref={mountRef}></div>
        </div>
    );
}

基本结构

scene：场景，包含：组件，光照，相机等
- mesh：单个组件，包含形状geometry和材质material
  - geometry：描述组件形状
  - material：描述组件材质
    - Texture：材质
- light：光照
camera：相机

详细介绍

Scene

场景。

1	const scene = new THREE.Scene();

API

背景
- .background：背景；可以用Color^纯色^，Texture^材质^，CubeTexture^反射^；
.environment：静态环境贴图。值类型Texture；
.fog：雾，值类型Fog。
- Fog：new THREE.Fog( 0xcccccc, 10, 15 ); //颜色，最小距离，最大距离。

Camera

基础相机

Camera	Info	介绍	使用场景
OrthographicCamera	正交相机	无论远近，物体大小不变	UI或2D场景
PerspectiveCamera	透视相机	模拟人眼，远小近大	3D场景

扩展相机

Camera	Info	介绍	使用场景
SteroCamera	立体相机	两个camera，即vr	VR
CubeCamera	立方相机	为物体提供反射功能。记录其他相机内容，提供材质供其他物体渲染。	反射

使用

1. 与scene

1 2	const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); scene.add( camera );

2. 基础相机分类介绍

OrthographicCamera

1	OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left,right,top,bottom：上下左右边界
near,far：前后边界
超出边界内容不渲染

PerspectiveCamera
1
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
- fov：视野角度，0-180, 建议值75，常见45-90，
- aspect：长宽比，宽度除以高度，比如：16/9, 4/3
- near：近裁剪面，>0，常见0.1-1
- far：远裁剪面，far>near，常见值：100-1000