【从零开始Three.js】01:创建场景&创建相机&添加正方形到场景中

最新推荐文章于 2024-06-18 09:44:11 发布

J辫儿哥丶

最新推荐文章于 2024-06-18 09:44:11 发布

阅读量264

点赞数

分类专栏： three.js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/smilekzero/article/details/128524663

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

个人学习 , 问题整理。新手小白 , 欢迎指教。

准备工作

three.js首先需要在代码中引用其中的全部关键词引用方法:

import * as THREE from '/js/threejs/three.module.js' (文件路径)

单个Model关键词引用申明:

import (scene) as THREE from '/js/threejs/three.module.js' (文件路径)

创建场景

场景是放置物体,设置相机等功能的基本载体

const scene = new THREE.Scene();

设置相机

three.js提供了多种相机,学习中这里使用的是PerspectiveCamera(透视相机)
参数一: 视野角度（FOV）视野角度就是你所能在显示器上看到的场景范围,参数单位是角度.

参数二: 长宽比（aspect ratio）就是在相机中你的视野的展示范围.这里设置的是 window.innerWidth / window.innerHeight 既整个页面的宽高.

参数三: 近截面（near）相机和物体之间的距离中所呈现的最近的视野面的距离.

参数似: 远截面（far）相机和物体之间的距离中所呈现的最远的视野面的距离.

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

设置相机的位置

camera.position.set的三个参数分别对应的是 x,y,z 的三个轴的值.
scene.add 将 camera 相机实例添加到场景中

camera.position.set(0, 0, 10);
scene.add(camera);

创建物体

BoxGeometry 创建立方体参数,三个参数对应的是物体的长宽高
MeshBasicMaterial 设置物体的材质,学习中设置的是颜色
Mesh 根据上两个参数生成物体
scene.add 将物体的实例参数添加到场景中

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

添加渲染器

渲染器是three,js最复杂同时也是使用覆盖面最广的应用之一,学习中慢慢熟悉…
setSize 设置渲染器的大小
设置渲染器后添加到body中
将渲染器应用到场景中

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);