1、创建一个摄像机
new THREE.PerspectiveCamera(fov, aspect, near, far);
fov:视野角度,越大看到的物体越小(视野范围)
aspect: 长宽比 一般基于cavnas的容器去设置
near:近平面距离
far:远平面距离
2、创建盒子
const geometry = new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer);
width — X轴上面的宽度,默认值为1。
height — Y轴上面的高度,默认值为1。
depth — Z轴上面的深度,默认值为1。
widthSegments — (可选)宽度的分段数,默认值是1。大于1且线框({wireframe : true})有效。
heightSegments — (可选)宽度的分段数,默认值是1。大于1且线框({wireframe : true})有效。
depthSegments — (可选)宽度的分段数,默认值是1。大于1且线框({wireframe : true})有效。
const box = 1; const boxSegments =3; const geometry = new THREE.BoxGeometry(box, box, box, boxSegments, boxSegments, boxSegments); function makeInstance(geometry, color, x) { const material = new THREE.MeshBasicMaterial({wireframe : true}); material.color = new THREE.Color('red'); const cube = new THREE.Mesh(geometry, material); scene.add(cube); cube.position.x = x; return cube; }
3、创建材质
const material = new THREE.MeshBasicMaterial({wireframe : true});·
material.color = new THREE.Color('red');
4、创建物体
const cube = new THREE.Mesh(geometry : Geometry, material : Material);
geometry —— (可选)Geometry或者BufferGeometry的实例,默认值是一个新的BufferGeometry。
material —— (可选)一个Material,或是一个包含有Material的数组,默认是一个新的MeshBasicMaterial。5、创建场景
new THREE.Scene();
场景允许你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。
scene.add(cube); // 将物体加入场景
6、创建一个WebGLRenderer(渲染器)对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerWidth/2); // 设置webGl的宽高
document.body.appendChild(renderer.domElement); // 将webGl加入到dom中
renderer.render(scene, camera);
// renderer使用照相机去渲染场景 4个参数( scene : Scene, camera : Camera, renderTarget : WebGLRenderTarget, forceClear : Boolean )
用相机(camera)渲染一个场景(scene)
renderTarget 渲染一般是在canvas上完成的,或者是renderTarget(如果有指定)
forceClear:为true,那么颜色、深度及模板缓存将会在渲染之前清除,即使渲染器的autoClear属性值是false。当forceClear设为true, 也可以通过将autoClearColor、autoClearStencil或autoClearDepth属性的值设为false来阻止对应缓存被清除。
threejs基础学习
最新推荐文章于 2024-05-30 11:26:10 发布