Threejs 学习之旅

Florenza

已于 2022-03-16 23:47:10 修改

阅读量1.8k

点赞数 5

分类专栏： ThreeJs 文章标签：学习

于 2022-03-14 17:15:02 首次发布

本文链接：https://blog.csdn.net/qq_33839972/article/details/123483098

版权

ThreeJs 专栏收录该内容

17 篇文章 25 订阅

订阅专栏

课程链接:

Three.js之旅 Three.js Journey_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1xm4y1978J?p=6&spm_id_from=pageDriver

课程代码:
https://github.com/felipeaamacedo/threejs-jorneyhttps://github.com/felipeaamacedo/threejs-jorney

一、创建第一个3D实例

如果我们想建立一个3d场景我们需要几个要素

0.建立一个画布(element)用于展示场景的位置

1.建立场景

2.实例化模型

2.1 创建材质

2.2 创建形状

3.建立一个相机

3.1相机加 z轴值

4.场景加入(相机,模型)

5.将实例化ThreeJSRender 渲染函数

6.设置渲染函数的宽,高

7.让实例加载场景和相机

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: ycw
 * @Date: 2022-03-09 17:18:11
 * @LastEditors: ycw
 * @LastEditTime: 2022-03-09 17:53:04
-->
<!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">
    <script src="https://threejs.org/build/three.js"></script>
    <title>Document</title>
    <script src="/js/index.js" ></script>
</head>
<body>
   <canvas class="webgl"></canvas>
</body>
</html>

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: ycw
 * @Date: 2022-03-10 17:14:12
 * @LastEditors: ycw
 * @LastEditTime: 2022-03-14 17:41:29
 */
import "./style.css";
import * as THREE from "three";
const sizes={
  width:800,
  height: 600
}
const canvas=document.querySelector('.webgl')
const sence=new THREE.Scene() //场景
const geometry=new THREE.BoxGeometry(1,1,1) //形状
const meterial=new THREE.MeshBasicMaterial({color:'red'}) //材质
const mesh=new THREE.Mesh(geometry,meterial)    //模型
const camera=new THREE.PerspectiveCamera(75,sizes.width/sizes.height)
camera.position.z=3;  //设置相机井深距离
sence.add(camera)     //场景中加入相机
sence.add(mesh)     //场景中加入 

const renderer=new THREE.WebGLRenderer({    //实例化 3d渲染器
    canvas
})
renderer.setSize(sizes.width,sizes.height)    //设置渲染高度,宽度
renderer.render(sence,camera)                //设置 渲染场景 相机

二,模型编组 new THREE.Group()

目的:将多个模型进行编组,以及可以对编组后进行移动等操作

const geometry = new THREE.BoxGeometry(1, 1, 1);//创建一个 方块模型
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //设置材质
const mesh1 = new THREE.Mesh(geometry, material); // 实例化模型1
const mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 'blue' }));//实例化第二个模型
mesh2.position.x=2;//将模型向 x轴移动2距离
const mesh3 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 'green' }));
//实例化模型3
mesh3.position.x=-2;//将模型3向x轴移动 -2距离

const group=new THREE.Group();//创建一个编组
group.add(mesh1)    //组内加入模型1
group.add(mesh2)    //组内加入模型2
group.add(mesh3)    //组内加入模型3
group.position.set(1,0.3,1);    //设置组的坐标(x,y,z)

三,3d坐标系new THREE.AxesHelper(3)

创建可视化坐标系


const axesHelper=new THREE.AxesHelper(3)    //创建一个可视化3d坐标系
scene.add(axesHelper);    //将坐标系放入到场景当中

四 camera.lookAt() 方法

简介:Threejs相机对象Camera的.lookAt()方法用来设置相机对象看向的位置

参数:
.lookAt()方法的参数是三维空间中一个点世界坐标xyz，参数可以是分别输入xyz参数形式.lookAt(x,y,z)，参数也可以是一个表示坐标的三维向量对象.lookAt(new THREE.Vector3(x,y,z))

例子

camera.lookAt(new THREE.Vector3(1,0,1))    //设置相机视角

scene.add(camera);        //场景中加入相机

效果

完整代码:

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: ycw
 * @Date: 2022-03-10 17:14:12
 * @LastEditors: ycw
 * @LastEditTime: 2022-03-14 18:10:40
 */
import "./style.css";
import * as THREE from "three";
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 'blue' }));
mesh2.position.x=2;
const mesh3 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 'green' }));
mesh3.position.x=-2;

const group=new THREE.Group();
group.add(mesh)
group.add(mesh2)
group.add(mesh3)
group.position.set(1,0.3,1);


const axesHelper=new THREE.AxesHelper(3)
scene.add(group);
scene.add(axesHelper)
const sizes = {
  width: 800,
  height: 600,
};
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 6;
camera.position.x = 1;

camera.position.y = 1;
camera.lookAt(new THREE.Vector3(3,0,1))

scene.add(camera);
const canvas=document.querySelector('.webgl')
const renderer = new THREE.WebGLRenderer({
  canvas
})
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);

Florenza

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Threejs 学习之旅

课程链接:Three.js之旅 Three.js Journey_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1xm4y1978J?p=6&spm_id_from=pageDriver课程代码:https://github.com/felipeaamacedo/threejs-jorneyhttps://github.com/felipeaamacedo/threejs-jorney
复制链接

扫一扫