鼠标操作三维场景代码：
<!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>鼠标操作三维场景</title> <script src="./js/three.js"></script> <script src="./js/OBJLoader.js"></script> <script src="./js/OrbitControls.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(); // 设置环境光（十六进制颜色） 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); // 创建透视相机（角度, 宽高比, 最近距离, 最远距离） 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); // 重复执行渲染函数 requestAnimationFrame(render); } // 调用渲染函数 render(); // 设置窗口变化自适应调整事件 window.onresize = function(){ // 重新获取渲染容器的宽高 webglWidth = webgl.offsetWidth; webglHeight = webgl.offsetHeight; // 重置渲染器canvas画布大小 renderer.setSize(webglWidth,webglHeight); // 重置相机显示范围的宽高比 camera.aspect = webglWidth/webglHeight; // 更新相机的投影矩阵 camera.updateProjectionMatrix(); // 重新调用渲染函数 render(); }; // 创建 OBJ 模型加载器 let loader = new THREE.OBJLoader(); // 加载 OBJ 文件 loader.load('./img/鹤.OBJ', function(obj) { // 加载纹理贴图 let texture = new THREE.TextureLoader().load('./img/he.png',function(){ render(); // 加载成功后重新调用渲染函数 }); // 给 OBJ 模型设置纹理贴图 obj.children[0].material = new THREE.MeshBasicMaterial({ map: texture }); // 将 OBJ 模型添加到场景中 scene.add(obj); // 设置 OBJ 模型居中 obj.children[0].geometry.center(); // 设置 OBJ 模型缩放大小 obj.children[0].scale.set(100, 100, 100); }) // 鼠标操作三维场景 let controls = new THREE.OrbitControls(camera,renderer.domElement); </script> </body> </html>
鼠标操作三维场景效果：
原创作者：吴小糖
创作时间：2022-10-13
