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 |
[canvas id="canvas"][/canvas] [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 Cinema { constructor() { let canvas = document.getElementById("canvas"); // 使用了已有的canvas canvas.width = 600; canvas.height = 200; this.camera = new THREE.PerspectiveCamera(); this.camera.position.set(40, 30, 30); this.camera.lookAt(0, 0, 0); let controls = new THREE.OrbitControls(this.camera, canvas); this.renderer = new THREE.WebGLRenderer({canvas}); this.renderer.setSize(canvas.width, canvas.height); this.renderer.setScissorTest(true); //开启WebGL剪裁测试功能,如果不开启,.setScissor方法设置的范围不起作用 // document.body.appendChild(this.renderer.domElement); // 使用了已有的canvas,不用再添加 var geometry = new THREE.BoxGeometry(10, 10, 10); var material = new THREE.MeshStandardMaterial({color: "#f45f00"}); this.mesh = new THREE.Mesh(geometry, material); let directionalLight = new THREE.DirectionalLight("#ffffff", 1); // 平行光 directionalLight.position.set(-50, 30, 50); directionalLight.target.position.set(0, 0, 0); let ambientLight = new THREE.AmbientLight(); // 环境光 ambientLight.color.set("#000000"); this.scene = new THREE.Scene(); this.scene.add(this.mesh); this.scene.add(directionalLight); this.scene.add(ambientLight); } /** * 区域渲染 * @param x 左上角x * @param y 左上角y * @param width 宽,向右 * @param height 高,向下 * @param color 背景色 */ renderRect(x, y, width, height, color) { this.renderer.setScissor(x, y, width, height); this.renderer.setViewport(x, y, width, height); this.renderer.setClearColor(color); // 渲染区域背景色。不影响光源颜色 this.renderer.render(this.scene, this.camera); } render() { this.renderRect(0, 0, 200, 200, "#feeeed"); this.renderRect(200, 0, 200, 200, "#afdfe4"); this.renderRect(400, 0, 200, 200, "#f2eada"); this.mesh.rotateY(0.01); requestAnimationFrame(this.render.bind(this)); } } function main() { let cinema = new Cinema(); cinema.render(); } [/script] |
- end
声明
本文由崔维友 威格灵 cuiweiyou vigiles cuiweiyou 原创,转载请注明出处:http://www.gaohaiyan.com/3096.html
承接App定制、企业web站点、办公系统软件 设计开发,外包项目,毕设