three-js-es
v1.0.0
Published
中文代码玩3D three.js
Downloads
17
Maintainers
zhoujinshiReadme
中文代码玩3D three.js
这是一个使用 Three.js 构建的简单场景。代码中包含了一个 HTML 模板和 JavaScript 脚本，用来创建一个旋转的立方体、一个旋转的圆形和一个旋转的球体，以及一个加载自定义模型的冰墩墩。
demo https://unpkg.com/three-js-es/index.html
如何运行
- 下载代码
- 在项目根目录下打开终端或命令提示符
- 运行
npm i three-js-es安装依赖项 - 运行
npm run build或npm run watch编译代码 - 打开
index.html查看场景
代码说明
HTML 模板
在 HTML 模板中，我们定义了一个 script 元素，并在其中使用了一个自定义元素 domElement。
<body>
<script id="我的场景" type="domElement">
<场景>
<透视摄像机 视野角度="50" 长宽比="自适应" 最小可视范围="0.1" 最大可视范围="1000" />
<控制器 类型="轨道">
<参数 类型="位置" x="0" y="4" z="20" />
<参数 类型="聚焦" x="0" y="4" z="0" />
</控制器>
<灯光 类型="环境光" 颜色="#ffffff" 强度="0.5">
</灯光>
<灯光 类型="点光源" 颜色="#ffffff" 强度="1" 距离="100">
<参数 类型="位置" x="1" y="1" z="1" />
</灯光>
<物体 名称="圈圈">
<参数 类型="位置" x="0" y="0" z="0" />
<参数 类型="旋转" x="0" y="0" z="0" />
<参数 类型="缩放" x="1" y="1" z="1" />
<几何体 形状="圆形" 半径="1.5" 分段数="32" />
<材质 类型="标准" 颜色="#ffff00" 双面="是" />
</物体>
<模型 名称="冰墩墩" 路径="冰墩墩.glb">
<参数 类型="位置" x="0" y="3" z="0" />
<参数 类型="缩放" x="5" y="5" z="5" />
</模型>
</场景>
</script>
</body>VR配置
<场景>
<控制器 类型="遥感">
<参数 类型="位置" x="0" y="4" z="20" />
<参数 类型="聚焦" x="0" y="4" z="0" />
</控制器>
<VR镜头 />
</场景>加载gltf模型
<场景>
<模型 名称="冰墩墩" 路径="冰墩墩.glb"><!---取名称 好代码控制 --->
<参数 类型="位置" x="0" y="3" z="0" />
<参数 类型="缩放" x="5" y="5" z="5" />
</模型>
</场景>全景视频
<场景>
<全景视频 路径="demo.mp4" 循环="true" 静音="false" 自动播放="true" /><!--- 静音true自动播放，如果是false就会弹窗点击播放 --->
</场景>全景图片
<场景>
<全景图片 路径="movie.jpg" /><!---支持 exr --->
</场景>文字精灵
<文字精灵 文本="🤞\n你好，世界！" 字体="Arial" 字号="30" 字体颜色="#ffffff" 字体边框颜色="#000000"
字体边框线宽="0" 对齐方式="center" 背景边框颜色="#ffff0099" 背景颜色="#00ff0000" 字间距="2" 行高="40">
<参数 类型="位置" x="0" y="7" z="0" />
</文字精灵>JavaScript 脚本
在 JavaScript 脚本中，我们通过 import 引入了一个名为 加载场景 的模块，并使用它来创建和管理 Three.js 场景。
import 加载场景 from "three-js-es";
const 管理 = new 加载场景("#我的场景");然后，我们在 更新 函数中对场景中的物体进行一些动画效果的操作。
管理.更新 = () => {
// 获取冰墩墩对象
const 冰墩墩 = 管理.获取对象("冰墩墩");
// 每帧旋转冰墩墩
冰墩墩.旋转.y += 0.01;
// 计算 X 轴方向上的周期性平移量
const x周期 = 2; // X 位移的周期，单位为秒
const x振幅 = 1; // X 位移的振幅
const x速度 = 0.1; // X 位移的速度
const x移动 = Math.sin(时间 * x速度 / x周期) * x振幅;
// 应用平移量
冰墩墩.位置.x = x移动;
// 获取圆形对象
const 圈圈 = 管理.获取对象("圈圈");
// 每帧旋转圆形
圈圈.旋转.y += 0.01;
// 更新时间变量
时间++;
};
管理.运行();自定义标签 下面是高级定义 没空实现插件中文
<scene>
<自定义对象 颜色="#ff0000">
<参数 类型="位置" x="0" y="0" z="0" />
</自定义对象>
</scene>
class CustomObject extends THREE.Object3D {
constructor(elem) {
super();
const color = parseInt(elem.getAttribute("颜色") ? elem.getAttribute("颜色").replace("#", "") : "#ffffff", 16);
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshStandardMaterial({
color: color,
roughness: 0.4,
metalness: 0.5
});
this.mesh = new THREE.Mesh(geometry, material);
this.add(this.mesh);
const transform = { position: new THREE.Vector3() };
for (const param of [...elem.getElementsByTagName("参数")]) {
const type = param.getAttribute("类型");
switch (type) {
case "位置":
transform.position.set(parseFloat(param.getAttribute("x")), parseFloat(param.getAttribute("y")), parseFloat(param.getAttribute("z")));
break;
}
}
const { position } = transform;
this.position.copy(position);
return this;
}
}
管理.注册("自定义对象", "customobject", CustomObject);
管理.运行();