位置: IT常识 - 正文
threeJs入门 js引入(threejs怎么用)
编辑：rootadminthreeJs入门 js引入 一：使用three的前置1.引入three.js// 引入three.jsimport * as THREE from 'three';2.引入three.js其他扩展库
本文链接地址:https://www.jiuchutong.com/zhishi/298594.html
转载请保留说明！
推荐整理分享threeJs入门 js引入(threejs怎么用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:threejs怎么用,three.js dispose,threejs引入3d模型,threejs引入3d模型,js three.js,threejs引入3d模型,threejs引入3d模型,threejs入门指南,内容如对您有帮助，希望把文章链接给更多的朋友！
除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。
一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。
// 引入扩展库OrbitControls.jsimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 引入扩展库GLTFLoader.jsimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsmimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';3.学习环境：.html文件中直接引入threejs如果不是正式开发Web3D项目，只是学习threejs功能，完全没必要用webpack或vite搭建一个开发环境。
学习使用的环境，只要创建一个.html文件，编写threejs代码，最后通过本地静态服务打开.html文件就行。
4.script标签方式引入three.js你可以像平时开发web前端项目一样，通过script标签把three.js当做一个js库引入你的项目。
three.js库可以在threejs官方文件包下面的build目录获取到。
<script src="./build/three.js"></script>//随便输入一个API，测试下是否已经正常引入three.jsconsole.log(THREE.Scene); 5.ES6 import方式引入给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js。
<script type="module">// 现在浏览器支持ES6语法，自然包括import方式引入js文件import * as THREE from './build/three.module.js';</script>6.type="importmap"配置路径学习环境中，.html文件引入three.js，最好的方式就是参考threejs官方案例，通过配置
下面配置的type="importmap"代码具体写法不用掌握记忆，复制粘贴后，能修改目录就行，你可以去电子书课件或者课件源码中复制。
<!-- 具体路径配置，根据自己文件目录设置 --><script type="importmap"> {"imports": {"three": "../../../three.js/build/three.module.js"}}</script><!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs --><script type="module"> import * as THREE from 'three'; // 浏览器控制台测试，是否引入成功 console.log(THREE.Scene);</script>7.type="importmap"配置——扩展库引入通过配置
配置addons/等价于examples/jsm/。
<script type="importmap"> {"imports": {"three": "./three.js/build/three.module.js", "three/addons/": "./three.js/examples/jsm/"}}</script><script type="module"> // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库 // 扩展库OrbitControls.js import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 扩展库GLTFLoader.js import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; console.log(OrbitControls); console.log(GLTFLoader);</script>二：完整代码展示html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Threejs中文网:www.webgl3d.cn</title></head><body> <!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 --> <script type="importmap"> {"imports": {"three": "../../../three.js/build/three.module.js"}}</script> <script src="./index.js" type="module"> </script></body></html>js// 引入three.jsimport * as THREE from 'three';/** * 创建3D场景对象Scene */const scene = new THREE.Scene();/** * 创建网格模型 *///创建一个长方体几何对象Geometryconst geometry = new THREE.BoxGeometry(50, 50, 50);//材质对象Materialconst material = new THREE.MeshBasicMaterial({ color: 0x0000ff, //设置材质颜色});const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh//设置网格模型在三维空间中的位置坐标，默认是坐标原点mesh.position.set(0,10,0);scene.add(mesh); //网格模型添加到场景中 // console.log('三维场景',scene);上一篇：目标检测算法——YOLOV7——详解(一阶段目标检测算法)
