Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)

简介: Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。

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




image.gif

Three.js ~ 第 1 篇    ——    Three.js具体使用流程详细




Three.js如何创建3D物体和坐标轴(多看注释)?

一. 首先,在项目中,需要下载threejs的相关依赖

npm install three
//或者
cnpm install three
//等等

image.gif

二. 在JS页面引入使用

方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
使用
const scene = new THREE.Scene();
方式 2: 仅导入你所需要的部分
import { Scene } from 'three';
使用
const scene = new Scene();

image.gif

三. 具体使用详细

引入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();

image.gif

四. 实现的3d效果

image.gif






创作不易,感觉有用,就一键三连,感谢(●'◡'●)

相关文章
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
22 3
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
19 3
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学管理系统附带文章源码部署视频讲解等
30 8
|
1天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学资源共享平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学资源共享平台附带文章源码部署视频讲解等
8 0
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学辅助系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学辅助系统附带文章源码部署视频讲解等
11 0
|
7天前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
20 3
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
34 12
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
7 0
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
21 1