Threejs搭建web3D场景

要使用Three.js搭建web 3D场景，可以按照以下步骤：

准备环境：
- 创建一个HTML文件，用于承载你的3D场景。
- 在HTML文件中引入Three.js库，可以通过下载官方库或使用CDN链接。
创建场景：
- 在JavaScript中，创建一个场景对象，用于容纳所有的3D元素。
创建相机：
- 创建一个透视相机或正交相机，用于观察场景中的物体。
创建渲染器：
- 创建一个渲染器对象，将场景和相机渲染到HTML页面上。
添加3D对象：
- 创建和添加3D模型、几何体、灯光等到场景中。
设置交互（可选）：
- 添加交互功能，如鼠标控制、键盘控制等，以改变或操作3D场景。
渲染场景：
- 在循环中渲染场景，通常使用 requestAnimationFrame函数来实现。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web 3D Scene</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      // 创建场景
      var scene = new THREE.Scene();

      // 创建透视相机
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 创建一个立方体
      var geometry = new THREE.BoxGeometry();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 渲染场景
      var animate = function () {
        requestAnimationFrame(animate);

        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

这是一个基本的Three.js 3D场景的示例。你可以根据自己的需求添加更多的3D元素、纹理、光照和交互功能。

trymybug

公告