HTML5 3D放圖是一種現代設計技術,它能夠在網頁中嵌入三維圖像,并允許用戶自由旋轉和操作圖像。以下是一個示例代碼用法:
<!-- 引入3D庫 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <!-- 創建畫布 --> <canvas id="myCanvas"></canvas> <script> // 初始化場景 var scene = new THREE.Scene(); // 初始化相機 var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; // 初始化渲染器 var renderer = new THREE.WebGLRenderer({ canvas: myCanvas }); renderer.setSize(window.innerWidth, window.innerHeight); // 添加幾何體 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 添加光照 var light = new THREE.AmbientLight(0xffffff); scene.add(light); // 渲染場景 function render() { requestAnimationFrame(render); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } render(); </script>
上面的代碼中,我們首先引入了 Three.js 庫,并指定了一個畫布元素。然后我們創建了場景、相機和渲染器,并添加了一個立方體幾何體。接下來,我們添加了一個環境光源,并通過循環來不斷渲染圖像,同時每次循環中讓立方體旋轉一定角度。最后,我們將場景和相機傳遞給渲染器進行渲染。