Three.js简介;Three.js使用与作品生成
一、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中文网
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!