THREE.JS使用详细（three.js创建3d物体，three.js的使用方式）-Toy模板网

这篇具有很好参考价值的文章主要介绍了THREE.JS使用详细（three.js创建3d物体，three.js的使用方式）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简述：three.js封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star，今天用three.js来构建一个三维模型；

1、首先，在项目中需要下载threejs的相关依赖；

npm install three

2、在js页面引入使用；

方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
使用
const scene = new THREE.Scene();


方式 2: 仅导入你所需要的部分
import { Scene } from 'three';
使用
const scene = new Scene();

3、具体使用详细；

引入threejs
import * as three from "three";

引入控制器 控制元素
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";


创建场景
const scene = new three.Scene();
创建相机
const camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
设置相机位置
camera.position.set(0, 0, 10);
场景绑定相机
scene.add(camera);

创建几何体和材质
const cubeGeometry = new three.BoxGeometry(1, 1, 1);
const subeMaterial = new three.MeshBasicMaterial({ color: 0xffff00 });
根据几何体和材质创建物体
const cube = new three.Mesh(cubeGeometry, subeMaterial);
把物体添加到场景中
scene.add(cube);

初始化渲染器
const renderer = new three.WebGLRenderer();
设置渲染器尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

将渲染内容添加到body
document.body.appendChild(renderer.domElement);

//使用渲染器将相机里的场景渲染出来
//renderer.render(scene,camera);

创建控制器
const controls = new OrbitControls(camera, renderer.domElement);

创建添加坐标轴线体
const axesHelper = new three.AxesHelper(5);
scene.add(axesHelper);

定义函数，实时渲染
function render() {
  物体添加动画
  cube.position.x += 0.05;
  if (cube.position.x > 5) {
    cube.position.x = 0
  }
  在函数中调用渲染器
  renderer.render(scene, camera);
  实时渲染函数
  requestAnimationFrame(render);
}
render();