basic3文档
basic3 是基于 ThreeJS 核心库进行简单封装的 ES6 模块，旨在减少前台导入 ThreeJS 核心库以及做各类准备和相关处理等工作。下面是使用方法：
一、导入 basic3 模块
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';花括号中，前面 5 个变量是 ThreeJS 基础变量，其中 THREE 是 ThreeJS 核心类，scene 是场景，camera 是相机，renderer 是渲染器，clock 是时钟。这些都是绘制 ThreeJS 图像的基本变量，需要一一声明、定义，basic3 已经将它们封装好、开箱即用；后面的 basic3 和 click3 是函数，后续说明。
二、启动 basic3
即运行 basic3() 函数，该函数是 3basic.js 模块的主函数，需要一个参数，该参数为装载 ThreeJS 图像的父元素，例如 document.body 或 id="papa" 的不要引号的 div 标签 id 标识符：
basic3(); // 参数缺省，这将使用 document.body 作为 ThreeJS 图像的父元素 // 或 basic3(papa); // 使用 id="papa" 的 div 标签作为 ThreeJS 图像的父元素
上面两种启动 basic3 方法根据需要二选其一。
basic3 封装的相机是常用的透视相机，参数 fov（相机视锥体竖直方向视野角度）设为 60，position（位置）设为 (0, 0, 5)，可以在使用时更改，例如，在启动 basic3 之后加入代码：
camera.fov = 45; // 视野角度 camera.updateProjectionMatrix(); // 更新相机投影矩阵 //修改相机位置可以直接修改，无需更新相机投影矩阵 camera.position.set(0, 1, 5); // 修改相机位置
三、绘制 ThreeJS 图像
下面给出一个完整的代码示例，它将绘制一个包含可控动画的立方体：
<style>
#papa { margin: auto; width: 1000px; height: 600px; background: beige; position: relative; }
</style>
<div id='papa'></div>
<script type="module">
// 导入 basic3
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3(papa); // 启动 basic3
// 绘制立方体
const cube = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshNormalMaterial()
);
cube.rotateX(Math.PI / 4)
scene.add(cube);
// 立方体动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
cube.rotation.y += delta;
renderer.render(scene, camera);
};
animate(); // 运行动画
// 交互 ：鼠标点击
papa.onclick = (e) => {
// click3(cube, e) 判断是否点击了cube，下同
if (click3(cube, e)) clock.running ? clock.stop() : clock.start();
}
// 交互 ：鼠标经过
papa.onmousemove = (e) => {
papa.title = click3(cube, e) ? '播放/暂停' : '';
papa.style.cursor = click3(cube, e) ? 'pointer' : 'default';
}
</script>
函数 click3(图像, e) 用于判断鼠标指针是否在图像内，支持多个图形参数，例如，假设还绘制了一个 ball，可以使用数组方式构建图像参数，[cube, ball] ，写成 click3([cube, ball], e); 。
四、使用 ThreeJS 扩展库
由于路径结构的限制，basic3 模块仅封装了 ThreeJS 核心库，要使用 ThreeJS 自带的扩展库，需要在 HTML 页面自行映射扩展库的路径并导入对应扩展库。以导入相机轨道扩展库为例，下面的代码演示其操作流程：
<!-- ThreeJS库文档目录结构映射 -->
<script type="importmap">
{
"imports": {
"three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
"three/addons/jsm/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
}
}
</script>
<script type="module">
// 导入 basic3 模块
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
import { OrbitControls } from 'three/addons/jsm/controls/OrbitControls.js'; // 导入相机轨道扩展库
basic3(papa); // 启动 basic3（假设 ThreeJS 图像的父元素为 id="papa" 的 div）
const controls = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
//...其它代码
</script>
如此，前面绘制的立方体就可以进行手动翻转等操作。
basic3 模块将来可能会有一些扩展，若此，届时会追加说明。
前一篇: spriteparticle.js模块使用说明
下一篇: 动态生成canvas文本模块
评论列表 [0条]
