三.js 向导

这个工具会做所有神奇的咒语 创造场景与Tree.js:

• 创建 camera, (中文(简体) ), renderer,以及 scene 实例
• 大小渲染器的 DOM 元素以填充浏览器窗口, 并带有相应的像素比
• 在 DOM 中添加渲染器的 DOM 元素
• 应用 CSS 到页面
• 添加事件倾听器以调整渲染器的 DOM 元素大小, 并在浏览器窗口被调整时更新相机
• 添加您的控件选择
• 设置动画循环, 与您的渲染常规
• 更新每个框架的控制

安装

npm install @depasquale/three-wizard

使用量

import Wizard from '@depasquale/three-wizard';

const wizard = new Wizard({
  // Choose from `ImmersiveControls`, `OrbitControls`, and `static` (more options coming soon)
  controls: 'OrbitControls',
});

// You can access these if necessary
const { scene, camera, renderer, controls } = wizard;

// Add things to the scene
// ...

定义每个框架更新事物的渲染回路 。 (Tree.js Wizard负责更新控制并告诉渲染器渲染,因此没有必要包括这个锅炉板代码. 然后开始动画.

const render = () => {
  // Update things in the scene
  // ...
};

wizard.start(render);

选项

• controls: 'ImmersiveControls' | 'OrbitControls' | 'static'

  • 场景中使用的控制类型. 默认是 static。 。 。 .

• initialPosition: THREE.Vector3

  • 相机在现场的初始位置. 默认是 new THREE.Vector3(0, 1.6, 5)。 。 。 .

• css: true | false

  • 将 CSS 应用到页面中 。 默认是 true。 。 。 .

• 如果使用 隐形控制,这些控制的选项也可以在此列出.

示例

报告提供了完整的例子 example 目录。 要在浏览器中本地尝试, 请运行 :

npm run example

或者试试看 这里。 。 。 .

来做

• 添加更多控件选项
• 添加选项为渲染器的 DOM 元素指定目标, 而不是完整的浏览器窗口