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或下载独立版本，先从几个例子入手吧！

1、最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.5.1/tiny.js"></script>

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) => {
  // 加载失败，错误处理
});

2、开发辅助

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

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

// 坐标轴
new AxesHelper(this);

3、模型调整

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

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

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

4、光照调整

// 环境光
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);

5、相机调整

const camera = Tiny3d.Camera.main;

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

依赖

• Tiny.js: Link

API文档

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