0.2.1 • Published 9 months ago
@fantasy3d/core v0.2.1
@fantasy3d/core
The core package of Fantasy 3D.
Fantasy 3D is a web-first real-time interactive 3d visualization framework base on three.js. Use ECS(Entity-Component-System) design and easy to use and light weight.Can be used to develop digital twins, digital city, digital factory, 3D GIS, ect.
Installation
This libray requires the peer dependency three.
. install three
npm install three. install @fantasy3d/core
npm install @fantasy3d/coreUsage
import { BoxGeometry, Euler, Mesh, MeshLambertMaterial, Vector3 } from 'three';
import { AmbientLight, DirectionalLight, Engine, MeshRenderer, Scene, SceneRenderer } from '@fantasy3d/core';
// Create Engine
const engine = new Engine( {
// WebGL Options
gl: {
viewport: document.getElementById( 'viewport' ), // 渲染视口
clearColor: 'orange' // 背景颜色
}
} );
// Create Scene
const scene = new Scene( engine );
// Set SceneRenderer
scene.sceneRenderer = new SceneRenderer( engine );
// Create a Perspective Camera
const camera = scene.createPerspectiveCamera( {
// Camera transform
transform: {
position: new Vector3( 0.0, 5.0, 5.0 ),
lookAt: new Vector3( 0.0, 0.0, 0.0 )
},
// Camera attributes
camera: { near: 0.1, far: 100.0 }
} );
// Root Entity
const { rootEntity } = scene;
// Add a AmbientLight
rootEntity.addComponent( AmbientLight, { intensity: 0.25 * Math.PI } );
// Add a DirectionalLight
rootEntity.addComponent( DirectionalLight, {
intensity: Math.PI,
position: new Vector3( 20.0, 20.0, 20.0 ),
target: new Vector3( 0.0, 0.0, 0.0 )
} );
// Create a empty Entity
const entity = rootEntity.createChild( {
transform: {
position: new Vector3( 0.0, 2.0, 0.0 ),
rotation: new Euler( 0.0, Math.PI / 4.0, 0.0 )
}
} );
// Add a MeshRenderer
entity.addComponent( MeshRenderer, {
mesh: new Mesh(
new BoxGeometry( 4.0, 4.0, 4.0 ),
new MeshLambertMaterial( { color: 'lightblue' } )
)
} );