<html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <script src="../resources/js/three.js"></script> <script src="../resources/js/OrbitControls.js"></script> </head> <body> <script> let scene = new THREE.Scene(); let bigCircle = new THREE.Shape(); bigCircle.moveTo(0, 0); //大圆 bigCircle.arc(0, 0, 20, 0, Math.PI * 2); //小圆 let smallCircle = new THREE.Shape(); smallCircle.arc(0, 0, 10, 0, Math.PI * 2); //挖空 bigCircle.holes.push(smallCircle); let tube = new THREE.ExtrudeGeometry(bigCircle, { amount: 300, bevelEnabled: false, curveSegments: 100, steps: 100 }); let material = new THREE.MeshLambertMaterial({ color: new THREE.Color("#fc0101") }); let mesh = new THREE.Mesh(tube, material); //网格模型对象Mesh scene.add(mesh); //网格模型添加到场景中 //环境光 let ambient = new THREE.AmbientLight(0x444444); ambient.intensity=2; scene.add(ambient); let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象（正射投影相机） let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)，拍照方向 let renderer = new THREE.WebGLRenderer({ //抗锯齿 antialias: true, alpha: true }); renderer.setSize(width, height);//设置渲染区域尺寸 renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 //执行渲染操作 指定场景、相机作为参数 renderer.render(scene, camera); //控制视野运动 function render() { renderer.render(scene, camera);//执行渲染操作 } render(); let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象 controls.addEventListener('change', render);//监听鼠标、键盘事件 </script> </body> </html>
效果图如下：
