3d-css-scene 中文文档教程

Question

3d-css-scene

灵感来自 Keith Clark 的 CSS 3D Engine

Installation

使用 npm：

npm i --save 3d-css-scene

您可能会喜欢像 Webpack 和 Babel 导入和使用 3d-css-scene 确保您的 ECMAScript 代码与旧浏览器兼容。

在你的 whatever.js 文件中导入 3d-css-scene 并添加一个房间：

// Load the main object. Constructor will instantiate the camera and allow for objects creation.
import { Scene } from '3d-css-scene'
// Load required css styling for the scene.
import '3d-css-scene/dist/app.css'

// Instantiate the Scene object
const scene = new Scene()

// Add a room to your scene
const room = scene.createRoom('room', 3600, 1080, 3000)
room.translateZ(-200)
room.update()

场景允许通过专用函数实例化主要对象和创建以下对象，其中 className 是一个 string 并且每个 scaleX|Y|Z 都是一个 number：

• Room with scene.createRoom(className, scaleX, scaleY, scaleZ)
• Plane with scene.createPlane(className, scaleX, scaleY)
• Box with scene.createBox(className, scaleX, scaleY, scaleZ)
• Avatar with scene.createAvatar(className, scaleX, scaleY)

Development

Run this project

安装依赖

npm install

项运行开发服务器

npm start

Local test with npm link

要在本地测试此库，您必须首先将此库公开到您的节点安装目录。 这将安装所有依赖项并最终输出符号链接消息。

npm link

/your-node-path/node/v12.18.1/lib/node_modules/3d-css-scene-test -> /path-to-this-project/3d-css-scene

然后，导航到另一个 npm 项目，您应该将依赖项链接到该库。 将出现另一个符号链接消息

npm link 3d-css-scene

/path-to-this-project/3d-css-test-app/node_modules/3d-css-scene -> /your-node-path/node/v12.18.1/lib/node_modules/3d-css-scene -> /path-to-3d-css-scene-project/3d-css-scene

这应该足以在另一个项目中测试此依赖项。 您可以选择将 3d-css-scene 添加到 package.json 中的依赖项中。 npm link 3d-css-scene 命令将覆盖来自 npm 注册表的包。

该库以 dist 模式导出，以获得更好的性能并避免在导入时出现 babel 语法问题。 每当您对此库进行更改时，您都希望看到它们反映在您的项目中。 然后您可以运行以下命令，以在任何给定时间重建库：

npm run build:watch

无论何时更改文件，更改都应反映在链接到该库的任何项目中。