Three.js에서 장면을 만드는 방법

이전 섹션에서는 장면에 객체를 추가하는 방법을 설명했습니다. 이 기사에서는 한편으로는 이해를 심화하기 위해 각 기능 포인트를 자세히 설명할 계획입니다. 반면에 도움이 필요한 사람들을

돕고 싶습니다.

1. WEBGL을 배울 때 먼저 WebGL 프로그램을 만드는 데 필요한 단계를 이해해야 합니다. 절인 야채로 돼지고기 조림을 만드는 것처럼 어떤 단계가 필요한지.

• WebGL 드로잉 컨텍스트 초기화

• 셰이더 프로그램 초기화

• 모델 및 데이터 캐시 구축

• 드로잉 및 애니메이션 완성

프로세스 지향 프로그래밍입니다. 그러나 three.js는 객체지향 프로그래밍입니다. 주로 세 가지 객체를 구성합니다: 장면(장면) 카메라(카메라) 렌더러(렌더러).

이 세 가지는 무엇을 의미하나요? 나는 그것이 무엇인지 전혀 아는 것 같지 않습니다. 작은 예를 들자면 영화를 예로 들어보겠습니다. 장면은 전체 레이아웃 공간과 같고, 카메라는 촬영 기간과 같습니다. 렌더러는 촬영된 필름을 컴퓨터 화면인 필름으로 변환하는 것과 같습니다.

장면과 공간에는 3D 및 데이터 모델이 포함되어 있고 렌더러에는 셰이더 및 WebGL 그리기 컨텍스트가 포함되어 있습니다.

2. THREE.JS는 장면, 카메라, 렌더러를 생성합니다

nbsp;html><meta><title>Demo1(three入门第一篇)</title><script></script><script>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(&#39;body&#39;)[0].appendChild(renderer.domElement);</script>

영화, 장면, 영화가 모두 준비되었으니 배우들을 어떻게 보여줄 수 있을까요? 즉, 위 글에서 언급한 것처럼 장면에 객체를 추가하는 방법은 무엇일까요?

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에서 호스팅되기를 원함). 너무 느리다는 것을 알았습니다.

nbsp;html>


    <meta>
    <title>Demo1(three入门第一篇)</title>




<script></script>
<script>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(&#39;body&#39;)[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:&#39;red&#39;});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料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>

6. Three.js는 WebGL에서 중요한 역할을 하지만 중국어 API는 실제로 거의 없습니다. 천천히 하나씩 쌓이게 됩니다.

위 내용은 Three.js에서 장면을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!