代码仓
GitHub - TiffanyHoo/three_practices: Learning three.js together!
可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件
运行效果图
知识要点
核心三要素
-
场景（Scene）
使用THREE.Scene()创建一个包含所有元素的场景对象，用于容纳三维对象、相机和灯光等元素。 -
相机（Camera）
使用THREE.PerspectiveCamera()创建一个透视相机，定义了观察者的视角和范围。设置相机的位置，可使用lookAt()方法将相机指向场景中心，默认朝向原点。 -
渲染器（Renderer）
使用THREE.WebGLRenderer()创建一个WebGL渲染器，设置背景颜色、大小，并将渲染器的输出添加到HTML元素中。通过appendChild()方法将渲染器的输出添加到指定的HTML元素中，以显示最终渲染结果。最后使用渲染器的render()方法将场景和相机作为参数进行渲染，呈现最终的3D场景。
目标物体
-
几何体和材质（Geometry and Material）：创建不同几何体（如平面、立方体、球体）和相应的材质（Material），设置其颜色和属性（如是否启用线框模式）。
-
位置和旋转（Position and Rotation）：通过设置对象的位置和旋转属性，控制对象在场景中的位置和朝向。
辅助器
-
坐标轴（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点个小星星哦~我会持续更新的！
