tinyjs-plugin-three

> 在 Tiny 中渲染 3d 模型

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-three.html#demo

引用方法

- 推荐作为依赖使用

- npm install tinyjs-plugin-three --save

- 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：

- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-three/0.1.0/index.js
- https://gw.alipayobjects.com/os/lib/tinyjs-plugin-three/0.1.0/index.debug.js

起步

首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！

$3

引用 Tiny.js 源码
`` html

`

` js
import * as Tiny3d from 'tinyjs-plugin-three';

const app = new Tiny.Application({
showFPS: true, // 显示帧频
width: window.innerWidth * 2,
height: window.innerHeight * 2,
forceCanvas: false,
backgroundColor: 0x000000, // 画布背景色
antialias: true,
});
document.body.appendChild(app.view);

// 加载 gltf
const loader = new Tiny.Loader();
loader.add('model', '../../assets/models/chicken/chicken.gltf');
loader.load((loader, resources) => {
const model = Tiny3d.Model.from(resources['model'].gltf);
parentNode.addChild(model);

// 控制旋转
model.rotationQuaternion.setEulerAngles(0, 180, 0);

// 执行动画
model.animations[1].loop = true;
model.animations[1].play();
});
loader.onError.add((ex) => {
// 加载失败，错误处理
});

`

$3


`js
import { GridHelper, AxesHelper } from '@tinyjs-plugin-three/helpers';
// 场景控制
new Tiny3d.CameraOrbitControl(app.view)

// 网格线
new GridHelper(model, [0, 0, 255]);

// 坐标轴
new AxesHelper(this);
`

$3


`js
// 调整位置
model.position.x = 1;

// 缩放
model.scale.set(2);

// 旋转
model.rotationQuaternion.setEulerAngles(0, 180, 0);

`

$3


`js
// 环境光
const ambientLight = Object.assign(new Tiny3d.Light(), {
color: [1, 1, 1], intensity: 0.01, type: Tiny3d.LightType.ambient,
});

// 点光源
const pointLight = Object.assign(new Tiny3d.Light(), {
x: 1.1, y: 0.2, z: 2.0, color: [1, 0, 0], intensity: 10, type: Tiny3d.LightType.point,
})

// 方向光
const directionalLight = Object.assign(new Tiny3d.Light(), {
x: 0.2, y: 0.8, z: 2.0, intensity: 1, type: Tiny3d.LightType.directional,
})

// 聚光灯
const spotLight = Object.assign(new Tiny3d.Light(), {
x: -0.7, y: 0.4, z: 2.0, color: [0, 0, 1], intensity: 20, outerConeAngle: 25, type: Tiny3d.LightType.spot,
})

// 添加
Tiny3d.LightingEnvironment.main.lights.push(ambientLight, pointLight, directionalLight, spotLight);
`

$3


`js
const camera = Tiny3d.Camera.main;

// 进行调整
camera.position.set(...)
`

依赖


- Tiny.js`: Link

API文档

http://tinyjs.alibaba.net/plugins/tinyjs-plugin-three.html#docs