初学WebGL，使用Three.js开发第一个3d场景示例

本文主要是介绍初学WebGL，使用Three.js开发第一个3d场景示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用Three.js 开发3d场景

在图书馆偶然撞见《Three.js开发指南》一书，便试着捣鼓一翻，现将第一个示例的部分代码、注解和相关方法的API记录在此。因为此书发行时是Three.js r69版本，所以当前部分代码有所修改，且所有方法和参数以官方最新版本Three.js r90为准。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>示例 - 开发3d场景</title><script type="text/javascript" src="../libs/three.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="WebGL-output"></div><script>function init() {// 设置场景属性// ------------------------let scene = new THREE.Scene();// scene.background = new THREE.Color( 0xEEEEEE ); // 设置场景背景色方法一// 设置摄像机属性// ------------------------let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 设置渲染器属性// ------------------------let renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE)); // 设置场景背景色方法二renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小// renderer.shadowMapEnabled = true; // 已修改为shadowMap对象的enabled属性renderer.shadowMap.enabled = true; // 开启阴影效果渲染，渲染阴影需要耗费大量的计算资源，默认不开启// 显示轴，并设置轴的线的大小 PS: x轴是红色的, y轴是绿色的, z轴是蓝色的// let axes = new THREE.AxisHelper(50);  // 已修改为AxesHelperlet axes = new THREE.AxesHelper(50);scene.add(axes);// 创建平面(plane)对象// ------------------------// 定义平面大小, 第一个参数为宽度，第二个参数为高度let planeGeometry = new THREE.PlaneGeometry(60, 20);// 设置平面外观(比如颜色或透明度)// let planeMaterial = new THREE.MeshBasicMaterial({ color: 0xccccc }); // MeshBasicMaterial对光源不起反应let planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); // MeshLambertMaterial和MeshPhongMaterial渲染时对光源产生反应// 合并大小和外观，创建网格对象let plane = new THREE.Mesh(planeGeometry, planeMaterial);// 投射或接受阴影(receiveShadow)plane.receiveShadow = true;// 在将平面添加到场景之前，设置平面的位置plane.rotation.x = -0.5 * Math.PI; // x轴旋转90度plane.position.x = 15; // x轴正向向右，此处平面在x轴右移30个单位plane.position.y = 0;  // y轴正向向下，此处平面在x轴不动plane.position.z = 0;  // z轴正向向屏幕外，此处平面在z轴不动scene.add(plane);// 创建一个立方体// ------------------------// 定义立方体大小, 第一个参数为宽度，第二个参数为高度，第三个参数为深度，// 从生成的效果上来看，若position位置以中心点为基准，立方体的中心点和原点(0, 0, 0)重合，三个参数分别是中心点向x轴、y轴和z轴两端的延伸线let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);// 设置立方体外观，wireframe为true显示线框，默认不显示let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000, wireframe: false });// 合并大小和外观，创建立方体对象let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;// 此处同上平面位置设置一致cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;scene.add(cube);// 创建一个球体// ------------------------// 定义球体大小, 第一个参数为半径，第二个参数为将宽度分为多少段，第三个参数为高度分为多少段(不是很理解)let sphereGeometry = new THREE.SphereGeometry(4, 20, 20);let sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff, wireframe: false });let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.castShadow = true;sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;scene.add(sphere);// 添加物体到场景后，需要设置摄像机，由摄像机决定场景内的渲染// ------------------------// 先设置摄像机的位置，camera.position.x = -30; // x轴正向向右，摄像机位置在x轴上向左移30个单位，物体相对则向右移30个单位camera.position.y = 40;  // y轴正向向下，摄像机位置在y轴上向下移40个单位，物体相对则向上移40个单位camera.position.z = 30;  // z轴正向向屏幕外，摄像机位置在z轴上向屏幕外移30个单位，物体相对则向屏幕内移40个单位，可以理解视角扩大或缩放// 锁定摄像机的指向，默认是指向了(0, 0, 0)位置，这里指向场景的中心camera.lookAt(scene.position);// 添加光源let spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10); // 设置光源的位置信息，分别为x轴，y轴，x轴的位置spotLight.castShadow = true; // 需要由光源投射阴影scene.add(spotLight);// 添加节点，渲染document.getElementById("WebGL-output").appendChild(renderer.domElement);renderer.render( scene, camera );}window.onload = init;</script>
</body>
</html>