Three-js-es NPM

中文代码玩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);

管理.运行();