在Threejs中，要将物体渲染到网页上需要三个组件:场景(scene)，相机(camera)，渲染器(renderer)。必须有这三大组件才能将物体渲染到网页中去
三大组件创建代码:
var scene = new THREE.Scene(); // 创建场景
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); // 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth,window.innerHeight); // 设置渲染器的大小，也就是设置内容区的宽度
在Threejs中场景只有一种，创建场景只需要new一个对象就行了
var scene = new THREE.Scene();
设置渲染器
var renderer = new THREE.WebVLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
// 渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上，appendChild表示将dom元素直接挂载在body下面
document.body.appendChild(renderer.domElement);
添加物体到场景中
// CubeGeometry->CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides);
// CubeGeometry是几何体，width:几何体x轴的长度; height:几何体y轴的长度; depth:几何体z轴的长度
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);
将相机，场景结合渲染器渲染到画布上
renderer.render(scene,camera);
// render可接受的参数
// scene:场景，camera:相机，renderTarget:渲染的目标,默认是渲染到前面定义的render变量中,forceClear:每次绘制之前都将画布的内容清除
render(scene,camera,renderTarget,forceClear)
实时渲染：即不停的对画面进行渲染，即使画面没发生改变也需要重新渲染:requestAnimationFrame函数。
function render () {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene,camera);
requestAnimationFrame(render);
}
使用THREEJS画线
var geometry = new THREE.Geometry();
// 创建点坐标
var point1 = new THREE.Vector3(x,y,z)；
// 定义线条的材质
// parameters{
// color:线条颜色,
// linewidth:线条的宽度,
// linecap:线条两端的外观,默认圆角,
// linejoin:两根线条的交接点处外观,默认圆角,
// vertexColors:定义线条是否使用顶点的颜色,boolean值,
// fog:定义材质的颜色是否受全局雾效影响
// }
material = new THREE.LineBasicMaterial(parameters )
// 定义线条，使用THREE.Line类
var line = new THREE.Line( geometry, material, THREE.LineSegments);
// 最后加入场景
scene.add(line)
···
网友评论