Three.js学习笔记(一)

最新推荐文章于 2024-06-09 00:35:31 发布

hzxwonder

最新推荐文章于 2024-06-09 00:35:31 发布

阅读量543

点赞数 2

分类专栏： three.js 文章标签： webgl three.js

本文链接：https://blog.csdn.net/qq_45366264/article/details/109964104

版权

three.js 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

Three.js学习笔记(一)

1.四大组建

1.场景

任何要显示的东西，放在场景的任何位置

一个页面可以有多个场景

实现方式
THREE.Scene = function()

2.相机

浏览器中所能看到的东西，就是由相机拍摄出来。即将相机能看到的内容显示在浏览器画面上

参数

THREE.PerspectiveCamera = function(fov,aspect,near,far)
fov:视角,我的理解是以相机为中心，能看到的最高和最低之间的夹角，即 $\theta$

aspect:近平面的宽度除以高度,即图中的 $\frac{w}{h}$

near:相机和近处截面的距离

far:相机和远处截面的距离

例子

var camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
scene.add(camera)

3.渲染器

计算的过程称为渲染，即怎么将眼前的场景显示到屏幕上

代码：

THREE.WebGLRenderer()

4.几何体

显示在场景中的对象

2.例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../Js/three.js"></script>  <!--注意three.js的路径-->
	</head>
	<body>
		<script>
			var scene =new THREE.Scene();
			
			var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)//不懂为什么要这个大小，以后回来填坑
			
			var renderer = new THREE.WebGLRenderer();
			renderer.setClearColor("#ffffff");//背景颜色？填坑
			renderer.setSize(window.innerWidth,window.innerHeight);//不懂为什么要这个大小，以后回来填坑
			document.body.appendChild(renderer.domElement);
			
			var geometry = new THREE.CubeGeometry(2,2,2);
			var material = new THREE.MeshBasicMaterial({color:0xff0000});
			
			var cuba = new THREE.Mesh(geometry,material);
			
			scene.add(cuba);
			camera.position.z = 5;  //数值越大，图形越小，即离相机的距离越远
			function render(){
				requestAnimationFrame(render);
				cuba.rotation.x += 0.01;
				renderer.render(scene,camera);
			}
			render();
		</script>
	</body>
</html>

3.遇到的坑

不知道错误在哪里。这个问题很致命，因为前期不知道在哪里看报错，导致我一行一行地校验代码，效率极其低下。
- 解决办法：在浏览器中使用F12进入浏览器检查页面，点击console，即可查看哪里出错

在这里插入图片描述

4.关于使用软件问题：

1.HBuilder X轻量级，运行速度快，但代码补全和代码高亮这两块很头疼！
2.webstorm代码补全非常好，高亮也可以，但就是运行占用内存比较大
3.最近看到网上推荐atom,感觉挺好用的，有代码补全，界面看的也很舒适，最重要的是，atom可以实现实时预览！！！先用一段时间看看。

参考资料：Three.js教程,包含矩阵,着色器,模型加载,WebGL相关知识,学习用

小白入门，望各位大神多多包涵！！！

hzxwonder

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three.js学习笔记(一)

Three.js学习笔记(一)1.四大组建1.场景任何要显示的东西，放在场景的任何位置一个页面可以有多个场景实现方式THREE.Scene = function()2.相机浏览器中所能看到的东西，就是由相机拍摄出来。即将相机能看到的内容显示在浏览器画面上分类1.透视相机近大远小+灭点2.正投影相机远处和近处一样大，也称正交相机参数THREE.PerspectiveCamera = function(fov,aspect,near,far)fov:
复制链接

扫一扫