이전 섹션에서는 장면에 객체를 추가하는 방법을 설명했습니다. 이 기사에서는 한편으로는 이해를 심화하기 위해 각 기능 포인트를 자세히 설명할 계획입니다. 반면에 도움이 필요한 사람들을
돕고 싶습니다.
1. WEBGL을 배울 때 먼저 WebGL 프로그램을 만드는 데 필요한 단계를 이해해야 합니다. 절인 야채로 돼지고기 조림을 만드는 것처럼 어떤 단계가 필요한지.
WebGL 드로잉 컨텍스트 초기화
셰이더 프로그램 초기화
모델 및 데이터 캐시 구축
드로잉 및 애니메이션 완성
프로세스 지향 프로그래밍입니다. 그러나 three.js는 객체지향 프로그래밍입니다. 주로 세 가지 객체를 구성합니다: 장면(장면) 카메라(카메라) 렌더러(렌더러).
이 세 가지는 무엇을 의미하나요? 나는 그것이 무엇인지 전혀 아는 것 같지 않습니다. 작은 예를 들자면 영화를 예로 들어보겠습니다. 장면은 전체 레이아웃 공간과 같고, 카메라는 촬영 기간과 같습니다. 렌더러는 촬영된 필름을 컴퓨터 화면인 필름으로 변환하는 것과 같습니다.
장면과 공간에는 3D 및 데이터 모델이 포함되어 있고 렌더러에는 셰이더 및 WebGL 그리기 컨텍스트가 포함되어 있습니다.
2. THREE.JS는 장면, 카메라, 렌더러를 생성합니다
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo1(three入门第一篇)</title></head><body></body><script type="text/javascript" src="js/three.js?1.1.11"></script><script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压变形。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>3. 배우(3D 큐브)를 추가합니다.
//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放
이렇게 하면 배우가 프레임 안에 들어와요.
4. 이 배우를 움직이게 하는 방법은?
//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */
배우가 등장해 인상적인 효과를 냈습니다. 첫 번째 단편 소설이 거의 완성되었습니다.
5. 전체 코드(원래 GitHup에서 호스팅되기를 원함). 너무 느리다는 것을 알았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1(three入门第一篇)</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/three.js?1.1.11"></script>
<script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压缩。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */</script>
</html>위 내용은 Three.js에서 장면을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
