HTML5怎么制作3D效果_HTML5 3D图形开发入门

<font face="Courier New">
<canvas id="myCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
  renderer.setSize(window.innerWidth, window.innerHeight);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
</script>
</font>

<font face="Courier New">
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
</font>

<font face="Courier New">
const loader = new THREE.GLTFLoader();
loader.load('models/duck.gltf', (gltf) => {
  scene.add(gltf.scene);
});
</font>