Three.js简介;Three.js使用与作品生成

2023-12-28 06:35:27

一、Three.js简介

1、简介:

????????three.js,一个WebGL引擎,基于JavaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器

? ? ? ? 运行环境:

????????Three.js 是一款运行在浏览器中的3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎还处在比较不成熟的开发阶段,其不够丰富的?API?以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。

????????官网:1. threejs文件包下载和目录简介 | Three.js中文网

????????包下载地址:Releases · mrdoob/three.js · GitHub

????????开发环境当中使用:npm instell three --save(下载)

????????????????????????import * as Three from 'three'(引入)

2、生成three.js必备:

????????Scene-场景,可以理解成一个3D的虚拟场景,用来模拟三维世界的

????????Camera-相机|摄像机,可以理解成一个3D场景的观测点

????????Renderer-渲染器

3、将一个物体放入3D场景中遵循以下几个步骤:

????????1. 创建场景

????????2.创建几何体

????????3.为几何体挑选网格材质

????????4.将物体mesh添加到场景

????????5.设置一个相机,可以通过相机的位置,表示观测点以及设置观测点的最近和最远距离,观测的角度等信息

????????6.设置一个渲染器:

????????7.将照片(渲染结果)插入到页面节点

二、生成一个three.js作品

? ? ? ? 1、html文件需要引入下载好的three.js包,并做好相关配置

<script type="importmap">
    {
      "imports":{
        "three":"../three.js-r159/build/three.module.js",
        "three/addons/":"../three.js-r159/examples/jsm/"
      }
    }
</script>
<script type="module" src="test.js"></script>

? ? ? ? 2、test.js文件写法

? ? ? ? a)引入主文件?

import * as THREE from 'three';//主文件

? ? ? ? b)创建3d场景

const scene=new THREE.Scene();

? ? ? ? c)在场景中添加物体

//1.在场景中添加物体
const geometry = new THREE.BoxGeometry(100, 100, 100);//矩形
//2.物体外观材质
const material = new THREE.MeshBasicMaterial({
    color:0xFF0000,//红色
})
//3.创建一个网格模型(将长方体和材质整合在一起)
const mesh = new THREE.Mesh(geometry, material);

//4.设置网格模型mesh的位置
mesh.position.set(0,0,0);//如果不设置,默认是原点的位置 0 0 0位置

//5.将物体mesh 添加到场景
scene.add(mesh);

? ? ? ?d) 添加三维坐标系(有助于观看物体的x、y、z轴;不是必选项)

//添加三维坐标系
const axesHelper = new THREE.AxesHelper(200);//值必须必物体值更大(避免观察不到)
//把坐标系应用到场景
scene.add(axesHelper);

? ? ? ? e)相机的相关设置

//7.设置一个相机,通过相机来观测mesh的位置
//参数说明:1.摄像机角度 2.宽高比 3.最近观测距离 4.最远观测距离
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);

//设置相机位置
camera.position.set(200, 200, 200);

//设置相机观察目标点的位置
camera.lookAt(0,0,0);

? ? ? ? f)设置一个渲染器,让物体能展示在页面上

//8.设置一个渲染器(咔)
const renderer=new THREE.WebGLRenderer();

//设置canvas画布的宽高
renderer.setSize(window.innerWidth,window.innerHeight);

//渲染成像,生成一张照片
renderer.render(scene,camera);

//9.将照片插入到页面节点
document.body.appendChild(renderer.domElement);

通过上面的操作就可以生成第一个3d模型作品啦~~~,使用下面的操作可以让您的3d作品变得更加美观哟~~~

三、物体的光源设置

1、添加点光源

//添加点光源 //参数:1.光源的颜色 2.光源的亮度 3.光源照射的范围 4.衰减度 
const Light = new THREE.PointLight(0xccccc, 1);
 Light.position.set(100, 150, 0); scene.add( Light ); 

//参数 1.需要被可视化的光源 2.点光源大小 
// 光源辅助观察(能够看到官员的照射位置)
const pointLightHelper = new THREE.PointLightHelper(Light, 10); scene.add(pointLightHelper);

2、为物体添加平行光

//平行光 
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(80, 100, 50)
directionalLight.target = mesh; scene.add( directionalLight );

 //可视化平行光 (能够看到光源的照射位置)
const directionalLightHelper=new THREE.DirectionalLightHelper(directionalLight,5); 
scene.add( directionalLightHelper );

3、为物体添加环境光

//添加环境光 
const ambient = new THREE.AmbientLight(0x404040); 
scene.add(ambient)

四、让物体旋转起来

原理:相机位置改变导致物体旋转

1、引入控件

import {OrbitControls} from 'three/addons/controls/OrbitControls.js'

2、设置相机使其拖动改变位置

//摄像机控件
//创建摄像机控件的参数(1.改变的相机 2.监控的区域范围)
const controls=new OrbitControls(camera,renderer.domElement);

//拖动物体的时候需要设置相机的位置,让它随着鼠标拖动而变换方位
controls.addEventListener("change",()=>{
    renderer.render(scene,camera)
})
controls.target.set(0,0,0)//控件的位置和相机的位置设置成一直,鼠标拖动的时候就不会跳
controls.update();//更新控件,不然可能会出现控件无法识别到设置被更新过的情况

五、设置动画,让图形自动旋转

function render(){
    // const spt=clock.getDelta()*1000;//*1000表示将秒换算成毫秒
    // console.log("两帧之间间隔的毫秒:"+spt)
    mesh.rotateY(0.01);//0.01弧度,不是度
    renderer.render(scene,camera);//调用一次render就咔一张照片
    requestAnimationFrame(render)//浏览器自带方法
}
render()

更多详情设置请参考官网1. threejs文件包下载和目录简介 | Three.js中文网

文章来源:https://blog.csdn.net/m0_49014420/article/details/135187781
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。