初学WebGL，使用Three.js开发第一个3d场景示例
程序员文章站
2022-05-23 14:03:31
...
使用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); // 已修改为AxesHelper
let 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>更新于2018.03.06，未完待续，后续更新相关方法用法…
甩个支付宝赚钱红包，原创不易，望不吝赐教