Three.js案例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>第一个Threejs案例</title> <script src="./js/three.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #webgl { width: 100%; height: 100vh; overflow: hidden; } </style> </head> <body> <div id="webgl"></div> <script> // 获取渲染容器 let webgl = document.getElementById("webgl"); // 获取渲染容器的宽高 let webglWidth = webgl.offsetWidth; let webglHeight = webgl.offsetHeight; // 创建场景 let scene = new THREE.Scene(); // 创建三维坐标（轴线长度） // 用于调试：红色：x轴、绿色：y轴、蓝色：z轴 let axes = new THREE.AxesHelper(60); // 添加三维坐标到场景中 scene.add(axes); // 设置环境光（十六进制颜色） let ambient = new THREE.AmbientLight(0x444444); // 将环境光添加到场景中 scene.add(ambient); // 设置点光源（十六进制颜色） let point = new THREE.PointLight(0xffffff); // 设置点光源的位置（x轴, y轴, z轴） point.position.set(400, 200, 300); // 将点光源添加到场景中 scene.add(point); // 创建立方几何体（x轴, y轴, z轴） let cubeGeometry = new THREE.BoxGeometry(20,20,20); // 创建网格基础材质 let cubeMaterial = new THREE.MeshLambertMaterial({color:0x00FFFF}); // 创建立方体（几何体, 材质） let cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // 调整立方体位置（x轴, y轴, z轴） cube.position.set(0, 0, 0); // 将立方体添加到场景中 scene.add(cube); // 创建透视相机（角度, 宽高比, 最近距离, 最远距离） let camera = new THREE.PerspectiveCamera(60,webglWidth/webglHeight,0.1,2000); // 设置相机的位置（x轴, y轴, z轴） camera.position.set(100, 100, 100); // 将相机指向场景中心 camera.lookAt(scene.position); // 创建渲染器 let renderer = new THREE.WebGLRenderer(); // 设置渲染器的初始颜色（十六进制颜色, 透明度） renderer.setClearColor(0xEEEEEE,1); // 设置渲染器大小（标签宽度, 标签高度） renderer.setSize(webglWidth,webglHeight); // 将渲染器添加到渲染容器中（渲染器元素） webgl.appendChild(renderer.domElement); // 创建渲染函数 function render(){ // 渲染场景和相机（场景, 相机） renderer.render(scene,camera); } // 调用渲染函数 render(); // 设置窗口变化自适应调整事件 window.onresize = function(){ // 重新获取渲染容器的宽高 webglWidth = webgl.offsetWidth; webglHeight = webgl.offsetHeight; // 重置渲染器canvas画布大小 renderer.setSize(webglWidth,webglHeight); // 重置相机显示范围的宽高比 camera.aspect = webglWidth/webglHeight; // 更新相机的投影矩阵 camera.updateProjectionMatrix(); // 重新调用渲染函数 render(); }; </script> </body> </html>
第一个three.js案例渲染效果：
注意：这个地方我们设置了两种光源：环境光 和 点光源 。
- 环境光：类似于房间内的明暗度，它会均匀的照亮场景中所有的物体。
- 点光源：类似于生活中的白炽灯，可以使物体呈现出不同的明暗效果。
原创作者：吴小糖
创作时间：2022-9-27
