一：使用three的前置
1.引入three.js
//引入three.jsimport*asTHREEfrom'three';
2.引入three.js其他扩展库
除了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目录获取到。
<scriptsrc="./build/three.js"></script>
//随便输入一个API，测试下是否已经正常引入three.jsconsole.log(THREE.Scene);
5.ES6 import方式引入
给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js。
<scripttype="module">//现在浏览器支持ES6语法，自然包括import方式引入js文件import*asTHREEfrom'./build/three.module.js';</script>
6.type="importmap"配置路径
学习环境中，.html文件引入three.js，最好的方式就是参考threejs官方案例，通过配置
下面配置的type="importmap"代码具体写法不用掌握记忆，复制粘贴后，能修改目录就行，你可以去电子书课件或者课件源码中复制。
<!--具体路径配置，根据自己文件目录设置--><scripttype="importmap">{"imports":{"three":"../../../three.js/build/three.module.js"}}</script>
<!--配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs--><scripttype="module">import*asTHREEfrom'three';//浏览器控制台测试，是否引入成功console.log(THREE.Scene);</script>
7.type="importmap"配置——扩展库引入
通过配置
配置addons/等价于examples/jsm/。
<scripttype="importmap">{"imports":{"three":"./three.js/build/three.module.js","three/addons/":"./three.js/examples/jsm/"}}</script>
<scripttype="module">//three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库//扩展库OrbitControls.jsimport{OrbitControls}from'three/addons/controls/OrbitControls.js';//扩展库GLTFLoader.jsimport{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';console.log(OrbitControls);console.log(GLTFLoader);</script>
二：完整代码展示
html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Threejs中文网:www.webgl3d.cn</title></head><body><!--type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库--><scripttype="importmap">{"imports":{"three":"../../../three.js/build/three.module.js"}}</script><scriptsrc="./index.js"type="module"></script></body></html>
js
//引入three.jsimport*asTHREEfrom'three';/***创建3D场景对象Scene*/constscene=newTHREE.Scene();/***创建网格模型*///创建一个长方体几何对象Geometryconstgeometry=newTHREE.BoxGeometry(50,50,50);//材质对象Materialconstmaterial=newTHREE.MeshBasicMaterial({color:0x0000ff,//设置材质颜色});constmesh=newTHREE.Mesh(geometry,material);//网格模型对象Mesh//设置网格模型在三维空间中的位置坐标，默认是坐标原点mesh.position.set(0,10,0);scene.add(mesh);//网格模型添加到场景中//console.log('三维场景',scene);
本文转载自: https://blog.csdn.net/Bruce_byan/article/details/128914722
版权归原作者 圣焱 所有， 如有侵权，请联系我们删除。
版权归原作者 圣焱 所有， 如有侵权，请联系我们删除。