渲染3维场景需要做的一些初始化操作：
var scene = new THREE.Scene(); // 定义场景
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); // 定义相机
var renderer = new THREE.WebGLRenderer(); // 定义渲染器
renderer.setClearColorHex(0xEEEEEE); // setClearColorHex()函数将renderer的背景色设置为0xEEEEEE
renderer.setSize(window.innerWidth, window.innerHeight); // 通过setSize()函数告诉renderer需要多大的scene场景
接着，使用代码来添加辅助的坐标轴以及平面：
var axes = new THREE.AxisHelper(20); // 创建三个轴长度为20的坐标系
scene.add(axes); // 添加至场景中
var planeGeometry = new THREE.PlaneGeometry(30, 40); // 创建宽30，高40的平面
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x333333}); // 平面底色为0x333333
var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 加入到网格对象中去
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 10;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
创建坐标轴对象，使用scene.add()去将这些坐标轴添加到我们的场景中去，通过new THREE.PlaneGeometry创建了一个宽30、高40的平面，在创建好平面之后，还需要设置平面的外观，在three.js中可以通过创建材质对象来达到这个目的，new THREE.MeshBasicMaterial中设置color值，将这两种属性对象合并到Mesh网格对象中，然后设置平面的视角，定义它在场景中的位置坐标，将它绕x轴旋转90度，然后position定义它在场景中的位置。
创建方块对象：
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xf0f0f0, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
创建球状对象：
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
调整相机视角位置并加入到渲染器中
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
网友评论