three-base v2.0.37
.创建一个 homeRender.ts 模块
import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from "three";
import ThreeBase from "three-base";
import Transition from "three-base/Transition";
// 仅支持vite编译的项目安装
// 做项目找我 qq:389652405
class HomeRender extends ThreeBase {
constructor() {
super();
}
// 环境光
ambientLight = (() => {
const ambientLight = new AmbientLight("#fff", 0.4);
this.scene.add(ambientLight);
return ambientLight;
})();
//点光源
pointLight = (() => {
const pointLight = new PointLight("#fff", 0.4);
pointLight.position.set(50, 40, 50);
this.scene.add(pointLight);
return pointLight;
})();
init() {
super.init();
// 使用这个方法来初始化相机的位置和朝向
this.resetLookAt({
center: new Vector3(0, 0, 0),
position: new Vector3(10.954, 19.452, 39.811)
});
}
box = (() => {
const geometry = new BoxGeometry(10, 10, 10);
const matearil = new MeshLambertMaterial({ color: 0xfff });
const mesh = new Mesh(geometry, matearil);
//创建一个动画对象
const transition = new Transition({ rotationY: 0 });
// 动画对象播放回调
transition.onChange(({ rotationY }) => {
mesh.rotation.y = rotationY;
});
mesh.position.set(0, 0, 0);
mesh.userData = { cursor: "pointer", enableEvent: true };
// 提供了常用的鼠标事件
mesh.addEventListener("click", e => { });
mesh.addEventListener("dbclick", e => { });
mesh.addEventListener("leftclick", e => {
transition.set({ rotationY: Math.random() * 5 });
});
mesh.addEventListener("rightclick", e => { });
mesh.addEventListener("mouseenter", e => { });
mesh.addEventListener("mouseleave", e => { });
mesh.addEventListener("mousemove", e => { });
mesh.addEventListener("mousedown", e => { });
mesh.addEventListener("mouseup", e => { });
this.scene.add(mesh);
return mesh;
})();
}
const homeRenderer = new HomeRender();
// 导出这个单例对象
export default homeRenderer;
2.添加到div里面
import homeRenderer form "./homeRenderer.ts";
homeRenderer.setContainer( document.getElementById("div") );
12 days ago
18 days ago
15 days ago
20 days ago
25 days ago
26 days ago
27 days ago
27 days ago
1 month ago
1 month ago
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago