1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 |
[ canvas id="canvas" style="width:800px; height:400px; display:block;" ]这里不能使用用自关闭标签。style中的属性都是必须的[ /canvas ] [ div style="position:absolute; left:0; top:0; width:800px;height:400px; display:flex;" ] [ !-- style中的属性都是必须的。用于渲染区域的划分,最终是在canvas上渲染 -- ] [ div id="view_left" style="touch-action:none; border:1px solid #39f; width:100%; height:100%;" tabindex="1" ] [!--这里不能使用用自关闭标签--] [ /div ] [ div id="view_right" style="touch-action:none; border:1px solid #f93; width:100%; height:100%;" tabindex="2" ] [!--这里不能使用用自关闭标签--] [ /div ] [ /div ] [ a href="https://threejsfundamentals.org/threejs/lessons/zh_cn/" target="_blank" ] https://threejsfundamentals.org/threejs/lessons/zh_cn/ [ /a ] [ script ] let three_script = document.createElement("script"); three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js"; let head = document.getElementsByTagName("head")[0]; head.appendChild(three_script); three_script.onload = function () { main(); }; class TextLegendSprite { constructor(text = "", position = new THREE.Vector3(0, 0, 0), w = 2, h = 2, textcolor = "#0ABAB5", textsize = 1, bkgcolor = null, strokecolor = null) { let canvas = document.createElement("canvas"); let paint = canvas.getContext("2d"); let metrics = paint.measureText(text); let width = metrics.width + 1; // 根据文字数量来决定宽度,再加1 let height = textsize + 2; // 下面font设置的10px,再加1 canvas.width = width; canvas.height = height; if (window.devicePixelRatio) { // 消除锯齿 let devicePixelRatio = window.devicePixelRatio; canvas.style.width = width + "px"; canvas.style.height = height + "px"; canvas.height = height * devicePixelRatio; canvas.width = width * devicePixelRatio; paint.scale(devicePixelRatio, devicePixelRatio); } if (null !== bkgcolor) { paint.fillStyle = bkgcolor; // 背景颜色 paint.fillRect(0, 0, width, height); } paint.fillStyle = textcolor; // 字体颜色 paint.font = textsize + "px bold"; paint.textAlign = "center"; paint.textBaseline = "middle"; paint.fillText(text, width / 2, height / 2);// 实现边框 if (null !== strokecolor) { paint.rect(0, 0, width, height); paint.lineWidth = 0.1; paint.strokeStyle = strokecolor; paint.stroke(); } let spriteMaterial = new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(canvas), transparent: true, //开启透明(纹理图片png有透明信息) }); let _sprite = new THREE.Sprite(spriteMaterial); if (w < width) { w = width + 1; } if (h < height) { h = height + 1; } _sprite.scale.set(w, h, 1); //精灵大小 _sprite.position.copy(position); this.sprite = _sprite; } } class AxesManager { constructor() { let spriteX = new TextLegendSprite( "X", new THREE.Vector3(10, 2, 0), 2, 2, "red", 5, "#efcc93", "red" ); let spriteY = new TextLegendSprite( "Y", new THREE.Vector3(0, 12, 0), 2, 2, "green", 5, "#efcc93", "green", ); let spriteZ = new TextLegendSprite("Z", new THREE.Vector3(0, 2, 10), 2, 2, "blue", 5, "#efcc93", "blue", ); let _axes = new THREE.AxesHelper(500); _axes.add(spriteX.sprite); _axes.add(spriteY.sprite); _axes.add(spriteZ.sprite); this.axes = _axes; } } class Arrow { constructor() { let dir = new THREE.Vector3(1, 1, 0); // 方向。必须是单位向量 dir.normalize(); // 规格化方向向量(转换为长度为1的向量) let arrowHelper = new THREE.ArrowHelper(); this.arrow = arrowHelper; this.arrow.setDirection(dir); this.arrow.setLineColor("#30ff0a", "#ff3399"); this.arrow.setLength(10, 5, 2); } } class PlaneActor { // 平面 constructor() { let planeSize = 400; let loader = new THREE.TextureLoader(); let texture = loader.load('https://github.com/mrdoob/three.js/blob/dev/examples/files/arkit.png'); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; let repeats = planeSize / 2; texture.repeat.set(repeats, repeats); let planeGeo = new THREE.PlaneGeometry(planeSize, planeSize); let planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide, }); let mesh = new THREE.Mesh(planeGeo, planeMat); mesh.rotation.x = Math.PI * -.5; this.plane = mesh; } } class BoxActor { // 盒子 constructor() { let width = 10; let height = 10; let depth = 10; let cubeGeo = new THREE.BoxGeometry(width, height, depth); let cubeMat = new THREE.MeshStandardMaterial({color:"#4f4f03"}); let mesh = new THREE.Mesh(cubeGeo, cubeMat); mesh.position.set(50, 20, 0); this.box = mesh; } } class SphereActor { // 球 constructor() { let radius = 15; let sphereGeo = new THREE.SphereGeometry(radius); let sphereMat = new THREE.MeshNormalMaterial(); let mesh = new THREE.Mesh(sphereGeo, sphereMat); mesh.position.set(0, 30, 70); this.sphere = mesh; } } class LightManager { constructor() { let ambientcolor = "#f4f9f3"; // 环境光 this.ambientLight = new THREE.AmbientLight(); this.ambientLight.color.set(ambientcolor); // 平行光 let color = "#FFFFFF"; let intensity = 1; this.directionalLight = new THREE.DirectionalLight(color, intensity); this.directionalLight.position.set(-15, 80, -15); // 光线从哪个方向来 this.directionalLight.target.position.set(-15, 0, -15); // 射向哪里 // 平行光图例 this.directionalLightHelper = new THREE.DirectionalLightHelper(this.directionalLight); this.directionalLightHelper.lightPlane.scale.set(10, 10, 10); // 光源图例的大小 this.directionalLightHelper.lightPlane.material.color.set(color); // 光源图例的颜色 // 半球环境光 let skyColor = "#ff0000"; let groundColor = "#0000ff"; let iety = 0.8; this.hemiLight = new THREE.HemisphereLight(skyColor, groundColor, iety); this.hemiLight.position.set(-20, 30, -50); // 半球光图例 let size = 10; this.hemiLightHelper = new THREE.HemisphereLightHelper(this.hemiLight, size, groundColor); // 点光源 let pointColor = "#00ccff";// 光线颜色 this.pointLight = new THREE.PointLight(pointColor); this.pointLight.position.set(60, 30, 0);// 位置 this.pointLight.distance = 60;// 照射距离 this.pointLight.intensity = 1; // 强度 默认为1 this.pointLight.visible = true; // 开关,默认开 this.pointLight.shadow.camera.visible = true; // 开启投影 this.pointLight.castShadow = true; // 点光源图例 let sphereSize = 10; this.pointLightHelper = new THREE.PointLightHelper(this.pointLight, sphereSize, pointColor); } } class ViewManager { constructor() { this.canvas = document.getElementById('canvas'); this.view_left = document.getElementById('view_left'); this.view_right = document.getElementById('view_right'); } } class CameraManager { constructor(_view_left, _view_right) { let _camera_right = new THREE.PerspectiveCamera(60, 2, 0.1, 500); _camera_right.position.set(40, 10, 30); _camera_right.lookAt(0, 5, 0); let _controls_right = new THREE.OrbitControls(_camera_right, _view_right); _controls_right.target.set(0, 5, 0); _controls_right.update(); let _camera_left = new THREE.PerspectiveCamera(60, 1, 1, 1500); _camera_left.position.set(0, 10, 20); let _controls_left = new THREE.OrbitControls(_camera_left, _view_left); _controls_left.target.set(0, 5, 0); _controls_left.update(); let _cameraHelper = new THREE.CameraHelper(_camera_left); // 左边加个十字瞄准 this.camera_left = _camera_left; this.camera_right = _camera_right; this.cameraHelper = _cameraHelper; } } class Cinema { constructor() { let viewManager = new ViewManager(); let canvas = viewManager.canvas; this.view_left = viewManager.view_left; this.view_right = viewManager.view_right; let cameraManager = new CameraManager(this.view_left, this.view_right); this.camera_left = cameraManager.camera_left; this.camera_right = cameraManager.camera_right; this.scene = new THREE.Scene(); this.scene.background = new THREE.Color('white'); this.scene.add(cameraManager.cameraHelper); this.scene.add(new PlaneActor().plane); this.scene.add(new BoxActor().box); this.scene.add(new SphereActor().sphere); this.scene.add(new AxesManager().axes); this.scene.add(new Arrow().arrow); let lightManager = new LightManager(); this.scene.add(lightManager.ambientLight); this.scene.add(lightManager.directionalLight); this.scene.add(lightManager.directionalLightHelper); this.scene.add(lightManager.hemiLight); this.scene.add(lightManager.hemiLightHelper); this.scene.add(lightManager.pointLight); this.scene.add(lightManager.pointLightHelper); this.renderer = new THREE.WebGLRenderer({canvas}); this.renderer.setScissorTest(true); // 开启WebGL剪裁区域功能,之后setScissor方法生效 } resizeRendererToDisplaySize() { // 窗口发生变化时,重置画板 let canvas = this.renderer.domElement; let width = canvas.clientWidth; let height = canvas.clientHeight; let needResize = canvas.width !== width || canvas.height !== height; if (needResize) { this.renderer.setSize(width, height, false); } return needResize; } setScissorForElement(camera, viewport, scene_background) { // 按区域渲染 let canvasRect = this.renderer.domElement.getBoundingClientRect(); // 整个画布 let viewportRect = viewport.getBoundingClientRect(); // 左边或右边的视窗区域 // 本次渲染区域的边界 let left = Math.max(0, viewportRect.left - canvasRect.left); let right = Math.min(viewportRect.right, canvasRect.right) - canvasRect.left; let top = Math.max(0, viewportRect.top - canvasRect.top); let bottom = Math.min(viewportRect.bottom, canvasRect.bottom) - canvasRect.top; // 本次渲染区域的宽高 let width = Math.min(canvasRect.width, right - left); let height = Math.min(canvasRect.height, bottom - top); let positiveYUpBottom = canvasRect.height - bottom; // 剪裁x, y, width, height。定义渲染像素覆盖范围 this.renderer.setScissor(left, positiveYUpBottom, width, height); // 影响场景中模型的平移缩放变换 this.renderer.setViewport(left, positiveYUpBottom, width, height); // 刷新相机可视的宽高比例 let _aspect = width / height; camera.aspect = _aspect; camera.updateProjectionMatrix(); // 刷新场景 this.scene.background.set(scene_background); this.renderer.render(this.scene, camera); } render() { this.resizeRendererToDisplaySize(); this.setScissorForElement(this.camera_left, this.view_left, 0x000000); this.setScissorForElement(this.camera_right, this.view_right, 0x000040); requestAnimationFrame(this.render.bind(this)); } } function main() { let cinema = new Cinema(); cinema.render(); } [ /script ] |
- end
声明
本文由崔维友 威格灵 cuiweiyou vigiles cuiweiyou 原创,转载请注明出处:http://www.gaohaiyan.com/3082.html
承接App定制、企业web站点、办公系统软件 设计开发,外包项目,毕设