【threejs】每天一个小案例讲解：创建基本的3D场景

代码仓

GitHub - TiffanyHoo/three_practices: Learning three.js together!

可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件

运行效果图

知识要点

核心三要素

1. 场景（Scene） 
   使用 THREE.Scene()创建一个包含所有元素的场景对象，用于容纳三维对象、相机和灯光等元素。

2. 相机（Camera）
   使用 THREE.PerspectiveCamera()创建一个透视相机，定义了观察者的视角和范围。设置相机的位置，可使用lookAt()方法将相机指向场景中心，默认朝向原点。

3. 渲染器（Renderer）
   使用 THREE.WebGLRenderer()创建一个WebGL渲染器，设置背景颜色、大小，并将渲染器的输出添加到HTML元素中。通过appendChild()方法将渲染器的输出添加到指定的HTML元素中，以显示最终渲染结果。最后使用渲染器的render()方法将场景和相机作为参数进行渲染，呈现最终的3D场景。

目标物体

1. 几何体和材质（Geometry and Material）：创建不同几何体（如平面、立方体、球体）和相应的材质（Material），设置其颜色和属性（如是否启用线框模式）。

2. 位置和旋转（Position and Rotation）：通过设置对象的位置和旋转属性，控制对象在场景中的位置和朝向。

辅助器

1. 坐标轴（Axes）：使用THREE.AxisHelper()创建一个坐标轴辅助对象，在屏幕上显示坐标轴方向（红色-x，绿色-y，蓝色-z）。

若出现THREE.AxisHelper is not a constructor检查three版本，api是否更名为AxesHelper

核心运行代码

// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// create a render and set the size
var renderer = new THREE.WebGLRenderer();
// renderer.setClearColorHex(); // setClearColorHex无效，不是three.js的api
renderer.setClearColor(new THREE.Color(0xEEEEEE)); // setClearColor 用来设置背景颜色，十六进制/THREE.Color对象
renderer.setSize(window.innerWidth, window.innerHeight); // 确保渲染器适应窗口大小，通常在初始化和窗口调整使用// show axes in the screen
var axes = new THREE.AxisHelper(20); // 坐标轴（x-红 y-绿 z-蓝）
scene.add(axes);// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); // MeshBasicMaterial 不支持光照效果，不受光源影响
var plane = new THREE.Mesh(planeGeometry, planeMaterial);// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI; // 逆时针转1/4圈
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;// add the plane to the scene
scene.add(plane);// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}); // wireframe: true启用线框模式
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;// add the cube to the scene
scene.add(cube);// create a sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// position the sphere
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;// add the sphere to the scene
scene.add(sphere);// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // 如果不显式调用，默认朝向z轴负方向（-z）// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(renderer.domElement);// render the scene
renderer.render(scene, camera);

如果有帮助，请为我的github点个小星星哦~我会持续更新的！