threeJs入门 js引入

一：使用three的前置

1.引入three.js

// 引入three.js
import * as THREE from 'three';

2.引入three.js其他扩展库

除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。

一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsm
import { 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.js
console.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.js
import * as THREE from 'three';
/**
 * 创建3D场景对象Scene
 */
const scene = new THREE.Scene();
/**
 * 创建网格模型
 */
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);
//材质对象Material
const 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);
标签 , ,

发表回复