当前位置:   article > 正文

three.js环境及使用教程

three.js环境及使用教程

开发环境

npm i three@0.156.1
npm i @types/three@0.156.0
  • 1
  • 2

入门代码

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- <link rel="stylesheet" href="demo.css" /> -->
		<style>
			body {
				margin: 0;
			}
		</style>
		<!-- 核心依赖 -->
		<script
			async
			src="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.js"
		></script>
		<script type="importmap">
			{
				"imports": {
					"three": "../../node_modules/three/build/three.module.js"
				}
			}
		</script>
	</head>
	<body>
		<script type="module" src="demo.js"></script>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

demo.js

import * as THREE from "three";

//! 场景
const scene = new THREE.Scene();

//! 透视相机(垂直视野角度,长宽比,近端面,远端面)
const camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
camera.position.z = 5;

//! 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function () {
	renderer.setSize(window.innerWidth, window.innerHeight);
	//
	camera.setViewOffset(
		window.innerWidth,
		window.innerHeight,
		0,
		0,
		window.innerWidth,
		window.innerHeight
	);
};

//! 线
{
	// 定义材质
	const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
	// 创建几何体
	const points = [];
	points.push(new THREE.Vector3(-3, 0, 0));
	points.push(new THREE.Vector3(0, 3, 0));
	points.push(new THREE.Vector3(3, 0, 0));
	points.push(new THREE.Vector3(0, -3, 0));
	points.push(new THREE.Vector3(-3, 0, 0));
	const geometry = new THREE.BufferGeometry().setFromPoints(points);
	// 创建 Line
	const line = new THREE.Line(geometry, material);
	// 添加到场景
	scene.add(line);
}

//! 立方体
{
	// 定义材质
	const material = new THREE.MeshBasicMaterial({ color: 0x0ffff0 });
	// 几何对象
	const geometry = new THREE.BoxGeometry(1, 1, 1);
	// 创建 Cube
	const cube = new THREE.Mesh(geometry, material);
	// 添加到场景
	scene.add(cube);
	// 动画效果
	function animate() {
		// 向浏览器发起一个执行某函数的请求(一般默认保持60FPS的频率)
		requestAnimationFrame(animate);
		// 旋转 Cube
		cube.rotation.x += 0.01;
		cube.rotation.y += 0.01;
		// 旋转 Camera
		camera.rotation.z += 0.01;
		// 刷新相机
		renderer.render(scene, camera);
	}
	animate();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

摄像机(Camer)

TODO

材质(Mesh)

TODO

图层(Layers)

TODO

基本几何图形

TODO

加载3D模型

TODO

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/209085
推荐阅读
相关标签
  

闽ICP备14008679号