three.js学习笔记基础1_1

关注

原创最新推荐文章于 2026-07-28 11:19:35 发布 855 阅读 AI 写同款· GEO 优化 ›

1. 一个three.js程序要包括 renderer(渲染器)、scene(场景) 和camera(相机)。

1.1 renderer(渲染器)

three.js渲染器主要用到的有两种

var render = new THREE.WebGLRenderer({ antialias: true } );
var render = new THREE.CanvasRenderer();

CanvasRenderer相较于WebGLRenderer渲染能力差一些，但是没有锯齿。所以一般常用到的WebGLRenderer会添加一个抗锯齿属性 { antialias: true }

常用到的函数包括：setClearColor()设置renderer的背景色

setSize()设置renderer渲染scene的尺寸。

renderer.setClearColor(0xffffff);
renderer.setSize( window.innerWidth, window.innerHeight );

1.2 scene(场景)

three.js场景相当于一个容器，用来保存我们想渲染的物体。

var scene = new THREE.Scene();

1.3camera(相机)

three.js相机有两种

var camera = new THREE.PerspectiveCamera(45, 4/3, 0.1, 1000);
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 1000);

PerspectiveCamera(fov,aspect,near,far) 透视相机

fov :视角。从相机能看到的部分场景。对于游戏来讲大概有60到90度左右的视场。推荐默认值：45

aspect:长宽比。渲染结果的横向长度和纵向长度比。推荐默认值：window.innerWidth/window.innerHeight

near ：相机开始看到的渲染距离。推荐默认值:0.1

far :相机最远可以看到的渲染距离。推荐默认值：1000

OrthographicCamera(left,right,top,bottom,near,far) 正投影相机

left ：相机可以看到渲染的左平面。

right ：相机可以看到渲染的右平面。

top ：相机可以看到渲染的上平面。

bottom：相机可以看到渲染的下平面。

naer :同上PerspectiveCamera

far :同上PerspectiveCamera

camera 常用到的函数包括：lookAt()设置相机所看的位置

<span style="font-family:Courier New;">camera.lookAt(new THREE.Vector3(10,10,10));</span>

fork me on github blog: https://chenjy1225.github.io/

收录于

Three.js

标签

#JavaScript #webgl #three.js

本内容遵循 CC 4.0 BY-SA 版权协议

three.js学习笔记 基础1_1