WebGL Lesson3 基本组件

最新推荐文章于 2025-03-05 23:23:18 发布

lmee_

最新推荐文章于 2025-03-05 23:23:18 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/havakey/article/details/52301265

本文介绍了构建三维场景所需的基本组件：创建场景、相机、渲染器及几何体的方法，并详细解释了每个组件的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们来看看第一个程序的基本组件，即创建一个三维场景程序，到底需要哪些东西。

var scene= new THREE.Scene();

通过这条语句，我们创建一个场景，可以理解为舞台戏台，不过里面啥都没有。（不可省略）。

var camera= new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

这条语句类似于创建了一个相机，可以理解为观众，当然里面包含了视角，长宽比，还有位置及你能看多近多远等。

（不可省略）

var renderer= new THREE.WebGLRenderer();

这条语句创建了渲染组件，可以理解为导演，它的作用就是让整个三维场景按照指定规则运行起来。

var gemometry = new THREE.CubeGeometry(4,4,4);

var material = new THREE.MeshBasicMaterial({color:0x22ff22,wireframe:true});

var cube = new THREE.Mesh(gemometry,material);

这几条语句是创建了一个几何体。可以理解为演员，主角等。看就是看它的表演啦。

第一条语句是告诉我们要创建一个什么样的几何体。

第二条语句是说你打算用什么材料。

第三条语句是包装一下，成了，搞定。

创建结束后，你首先得把演员放到舞台里面，

scene.add(cube);

接着导演把所有的东西放入场地，

//把canvas加入到body

document.body.appendChild(renderer.domElement);

接着观众及演员各就各位，最后导演只要说action，好戏就开始了。

renderer.render(scene,camera);