Threejs环境、透视相机、坐标系、光源

于 2024-07-06 17:24:00 发布
阅读量784 收藏 9
点赞数 20
文章标签： threejs 透视相机 threejs流程 threejs基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trayvontang/article/details/140232481
版权

文章目录

如何引入threejs

对于很多刚刚上手threejs的朋友，可能第一步引入threejs就出问题了，
明明已经导入了，就是这样问题那样问题，所以我们首先来看一下threejs的引入问题。

3种方式:

  1. npm安装依赖，使用webpack之类的打包工具处理
  2. script直接导入
  3. script module方式import

npm方式

# 安装项目依赖
npm install three

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

这种方式通常需要结合其他打包工具一起使用，否则还是需要像第3种方式一样。

script方式

先下载threejs相关包

官网
threejs下载

然后：

<script src='js/three.min.js'></script>

这种方式最方便，但是不推荐，因为r160+就不支持了

但可以使用下面的方式

script module方式

<script type="importmap">
    {
        "imports": {
            "three": "./js/three.module.js",
            "three/addons/": "./js/jsm/"
        }
    }
</script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    const scene = new THREE.Scene();
</script>

2点注意：

  1. type的方式必须是module，才能使用import
  2. importmap表示映射关系，以免每次写完整的路径，例如上面就是将./js/three.module.js路径映射为three，import就可以直接from three

这种方式也可以使用npm three来安装依赖:

导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	//创建场景
	const scene = new THREE.Scene();
	//创建透视投影相机，视角45度，画幅比例 宽比高，近平面距离0.1，远平面1000
	const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	//创建渲染器
	const renderer = new THREE.WebGLRenderer();
	//渲染器canvas宽高设为与窗口一致
	renderer.setSize(window.innerWidth, window.innerHeight);
	//将渲染器对应的dom元素添加到body中
	document.body.appendChild(renderer.domElement);
	//定义一个几何体
	const geometry = new THREE.SphereGeometry(3, 30, 30);
	//定义一种材质，显示为线框
	const material = new THREE.MeshBasicMaterial({
		color: 0xB3DD,
		wireframe: true
	});
	//网孔(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面
	const ball = new THREE.Mesh(geometry, material);
	//把几何模型添加到场景中，对象被添加到原点(0,0,0)坐标。
	scene.add(ball);
	//移动相机位置
	camera.position.z = 8;

	function render() {
		//渲染循环，以每秒60次的频率来绘制场景
		requestAnimationFrame(render);
		//设置球体绕y轴旋转
		ball.rotation.y += 0.005;
		renderer.render(scene, camera);
	}
	render();
</script>

基本流程与坐标

  1. threejs首先需要一个场景Scene作为容器用来放物体
  2. 需要一些物体放入场景中
  3. 需要一个相机Camera来观察场景
  4. 需要一个Renderer来渲染相机看到的指定场景，如WebGLRenderer渲染完成就可以获取到一个dom元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 渲染
	renderer.render(scene, camera);

</script>

threejs是右手坐标系，X轴向右、Y轴向上，Z轴垂直屏幕向外。
右手坐标系

坐标系
我们可以看到对应的轴和我们设置的颜色一致。

摄像机

相机是一个非常重要的概念，我们最终看到的都是摄像机看到的场景中物体。

相机在所有3D中基本都一样，最常用的就是透视摄像机PerspectiveCamera：

透视相机

  1. fov:摄像机视野角度
  2. aspect:摄像机裁面长宽比
  3. near:摄像机原点到近裁面距离
  4. far: 摄像机原点到远裁面距离

透视相机示意图
透视相机参数说明

透视相机就是和我们生活中的相机一样，和眼睛看到的也差不多，近大远小，距离相机近的物体显示的大，距离相机远的物体显示的小。

如果不知道怎么设置，可以直接使用下面的设置：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Geometry(几何体)和Material(材质)

// 添加立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0xffecda });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 添加立方体
	const geometry = new THREE.BoxGeometry(2, 2, 2);
	const material = new THREE.MeshBasicMaterial({ color: 0xffecda });
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	
	// 渲染
	renderer.render(scene, camera);

</script>

cube

光源

three.js中有三种重要的光源：

  1. 环境光(Ambient Light):环境光是一种均匀的光照，它会均匀地照亮场景中的所有物体，不考虑光照源的位置和方向
  2. 方向光(Directional Light):方向光是一种平行光源，它具有确定的方向和强度，类似于太阳光
  3. 点光源(Point Light):点光源是一种位于特定位置的光源，它向所有方向发射光线，类似于灯泡

MeshBasicMaterial不受光源影响，可以使用MeshStandardMaterial

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 添加立方体
	const geometry = new THREE.BoxGeometry(2, 2, 2);
	const material = new THREE.MeshStandardMaterial({ color: 0xffecda });
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);
	
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
	scene.add(ambientLight);
	
	const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
	directionalLight.position.set(10, 0, 10);
	scene.add(directionalLight);

	// 渲染
	renderer.render(scene, camera);

</script>

光源效果

trayvontang
关注
  • 20
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js加载外部模型的教程详解
11-29
1.  首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2.  创建three.js核心对象 　　Scene（场景） 　　Camera（相机） 　　Light（光源） 　　Mesh（模型） 　　Renderer（渲染器） 　　最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera) 3.  OBJ模型的导入 <script type="text/javascript" src="js/OBJLoader.js"
Three.js - 透视相机（PerspectiveCamera）（三）
热门推荐
小小的前端
04-25 1万+
简介 在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。 透视相机(PerspectiveCamera) 根据视锥的范围给渲染器提供需要渲染的场景范围。 实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内
Three.js第三章——透视投影相机
00后的程序员
12-21 1833
生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。想象为一个房间，然后根据相机位置和长方体位置尺寸对比，判断两者相对位置。你可以发现设置相机坐标(200, 200, 200)，位于长方体外面一处位置。，具体说相机镜头对准哪个物体或说哪个坐标。，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。你用相机拍照你需要控制相机的。
43：Three.js - 中
weixin_57017198的博客
07-21 1274
相机，类似于眼睛，用于在3D舞台中，放置在不同的位置，实现通过不同的角度观察物体。查看 Three.js 的文档，可以看到 Camera 是一个抽象类，一般不直接使用，其他类型的 Camera 实现了这个抽象类。有以下的几种相机此处以透视相机（）和正交相机（）作为主要重点。
Three.js教程：透视投影相机
ygtu2018的博客
06-12 707
你生活中相机拍照的照片是有大小的，对于threejs而言一样，需要定义相机在网页上输出的Canvas画布(照片)尺寸，大小可以根据需要定义，这里先随机定义一个尺寸。Canvas画布：课程中会把threejs虚拟相机渲染三维场景在浏览器网页上呈现的结果称为Canvas画布。// 定义相机输出画布的尺寸(单位:像素px)//宽度//高度。
ThreeJS中文文档
08-09
6. **相机**：详细阐述PerspectiveCamera（透视相机）和OrthographicCamera（正交相机），以及它们在3D场景中的作用。 7. **光照**：包括点光源、方向光、聚光灯等，以及如何调整光照强度和颜色来影响场景的视觉...
threejs(r83).zip
11-27
要开始使用Three.js，你需要掌握基本的JavaScript语法，并理解3D图形的基本概念，如坐标系、向量、矩阵等。通过Three.js的官方文档和示例，可以快速入门。同时，社区中的教程、案例和问答资源也是学习的好途径。 总...
使用three.js制作的3D旋转页面背景.zip
01-07
在这个项目中，首先我们需要了解基本的3D概念，如坐标系（X、Y、Z轴）、相机视角、物体旋转和平移等。`three.js`提供了一系列的类来帮助我们处理这些概念，如`THREE.Scene`（场景）、`THREE.Camera`（相机）和`THREE...
three.js实现3D模型展示的示例代码
11-30
`THREE.PerspectiveCamera`用于创建透视相机，它是3D场景中观察物体的主要视角。参数包括视场角（VIEW_ANGLE）、宽高比（ASPECT）、近裁剪面（NEAR）和远裁剪面（FAR）。在代码中，我们设置了初始的相机位置和朝向...
three.js-master
11-08
Three.js提供了多种类型的相机，如PerspectiveCamera（透视相机）和OrthographicCamera（正交相机），分别对应真实世界中的透视和平行投影。 3. **几何体（Geometry）**：这是3D形状的基础，包括立方体、球体、圆柱...
threeJs入门 js引入
Bruce_byan的博客
02-07 3315
threeJs引入初始化及完整代码展示
Three.js学习6：透视相机和正交相机
最新发布
九天翔龙的技术博客
02-05 2322
相机，可以理解为摄像机。在拍影视剧的时候，最终用户看到的画面都是相机拍出来的内容。里，相机 camera 里的内容就是用户能看到的内容。。PerspectiveCamera：具有透视效果，近大远小，OrthographicCamera：不具有透视效果，所有的元素的尺寸大小都是相同的，不管距离。StereoCamera：主要做VR用的。就是让左右视觉有点点不一样的相机。CubeCamera：主要用作反射镜面纹理。本文主要讨论透视相机和正交相机。
从引入开始学习Three.js
Blue54的博客
03-24 853
【代码】从引入开始学习Three.js。
关于在vue项目中引入ThreeJs相关API和模型的几种方式
bigpatten的博客
09-06 2432
1. 引入Threejs 我们可以在public下的index.html文件中引入： 2. 相关依赖文件可以在main.js文件中引入 3. 模型可以放在public文件夹下新建static文件夹放入其中 function loadGlt(obj) { //为模型添加添加天空盒子环境贴图反光材质 var path = 'static/surround/' var urls = [ path + 'you.jpg',
【three.js-01】.如何引入three.js
weixin_64461654的博客
10-26 1327
1.在.html文件中引入three.js就像前端经常使用的jquery.js一样引入即可。原文链接：https://blog.csdn.net/m0_69757621/article/details/134051049。npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本。-- //引入three.js本地包 -->-- //引入three.js -->2.http绝对地址远程加载。// 引入three.js。// 比如安装148版本。
vue-three.js基础篇（一）——引入
不确定因素的博客
07-12 2672
Three官网Three.js是基于原生WebGL封装运行的三维引擎，是一款运行在浏览器中的 3D 引擎，说到数字化与可视化，就得说到数字孪生，而3D模型在浏览器展示就是其中的一环，就是数字模型设计。使用CAD工具开发出满足技术规格的产品虚拟原型，精确记录产品的各种物理参数，以可视化的方式展示出来，并通过一系列验证手段来检验设计的精准程度。这边3D建模使用的是3DMAX，主要支持转化能在three中展示的类型有fbx、3ds、obj、stl、dae。 three的使用需要安装以下内容 创......
Threejs入门之二:引用Threejs并创建第一个3D图形
九仞山的专栏
04-01 1905
html引入threejs并创建一个3D图形的正确方法
【threejs】透视相机，实现相机根据模型大小自适应，将模型放置在视角内
hzqzzz的博客
06-07 1507
透视相机，实现相机根据模型大小自适应，将模型放置在视角内。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值