# feng3d-three

**Repository Path**: feng3d/feng3d-three

## Basic Information

- **Project Name**: feng3d-three
- **Description**: 使用feng3d的设计来包装three.js。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-28
- **Last Updated**: 2025-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# feng3d-three
使用feng3d的设计来包装three.js。

示例：https://feng3d.com/feng3d-three/docs

源码：https://gitee.com/feng3d/feng3d-three

文档：https://feng3d.com/feng3d-three/docs

## 安装
```
npm install feng3d-three
```

## 使用
```
import { Mesh3D, MeshPhongMaterial3D, Node3D, PerspectiveCamera3D, Scene3D, SphereGeometry3D, WebGLRenderer3D } from 'feng3d-three';

let camera: PerspectiveCamera3D;
let scene: Scene3D;
let renderer: WebGLRenderer3D;

init();
animate();

function init() {
    camera = new Node3D().addComponent('PerspectiveCamera3D', { fov: 45, aspect: window.innerWidth / window.innerHeight, near: 1, far: 2000 });
    camera.entity.position.z = 400;

    scene = new Node3D().addComponent('Scene3D');

    let object: Mesh3D;

    const ambientLight = new Node3D().addComponent('AmbientLight3D', { color: { value: 0xcccccc }, intensity: 0.4 });
    scene.entity.addChild(ambientLight.entity);

    const pointLight = new Node3D().addComponent('PointLight3D', { color: { value: 0xffffff }, intensity: 0.8 });
    camera.entity.addChild(pointLight.entity);
    scene.entity.addChild(camera.entity);

    const material = new MeshPhongMaterial3D();
    material.side = 'DoubleSide';
    //

    const sphereGeometry3D = new SphereGeometry3D();
    sphereGeometry3D.radius = 75;
    sphereGeometry3D.widthSegments = 20;
    sphereGeometry3D.heightSegments = 10;

    object = new Node3D().addComponent('Mesh3D', {
        geometry: sphereGeometry3D,
        material
    });
    object.entity.position.set(-300, 0, 200);
    scene.entity.addChild(object.entity);

    renderer = scene.addComponent('WebGLRenderer3D', {
        parameters: { antialias: true },
        pixelRatio: window.devicePixelRatio,
        size: { x: window.innerWidth, y: window.innerHeight }
    });

    document.body.appendChild(renderer.domElement);
}

function animate() {

    const timer = Date.now() * 0.0001;

    camera.entity.position.x = Math.cos(timer) * 800;
    camera.entity.position.z = Math.sin(timer) * 800;

    camera.entity.lookAt(scene.entity.position);

    scene.entity.traverse((object: Node3D) => {
        if (object.isMesh === true) {
            object.rotation.x = timer * 5;
            object.rotation.y = timer * 2.5;
        }
    });

    renderer.render(scene, camera);

    requestAnimationFrame(animate);
}
```


## 缘由
经过10年以上对流行的Web3D引擎的研究与自研引擎，积累了feng3d，与three.js等引擎相比最缺乏的是成熟度与社区。

本人有自信在有充足的资源的情况下能够把feng3d做好，甚至超越市面上流行的Web3D引擎。
但为保守起见，心头有萌生另一想法，基于three.js的基础上结合feng3d的独特优势来打造一个中间版本。



## three.js中独特性
1. 摄像机与灯光有独特的`lookAt` @see https://github.com/mrdoob/three.js/blob/r149/src/core/Object3D.js#L284