平面图两侧边界虚化
平面圖兩側邊界虛化
- 示例
- HTML
- CSS
- JS
更多有趣示例 盡在 知屋安磚社區
示例
HTML
<canvas></canvas>CSS
*, *:before, *:after {margin: 0;padding: 0;box-sizing: border-box; }canvas {width: 100vw;height: 100vh; }JS
// Renderer const canvas = document.querySelector("canvas"); const renderer = new THREE.WebGLRenderer({canvas, antialias: true}); // Camera const fov = 45; const aspect = window.innerWidth / window.innerHeight const near = 0.2; const far = 1000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 50; // Scene const scene = new THREE.Scene(); // Objects const geometry = new THREE.BoxGeometry(10, 5, 10); const material = new THREE.MeshBasicMaterial({color: 0xff00ff}); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // Render renderer.render(scene, camera);總結