three.js加载3d

首先你需要准备好一个3D场景模型，例如一个OBJ或者GLTF文件。然后你需要引入three.js库文件并创建一个场景(Scene)、渲染器(Renderer)、相机(Camera)和光源(Light)等基本元素。

接下来，你需要使用three.js的加载器(Loader)来加载你的3D场景模型。例如，如果你要加载一个OBJ文件，你可以使用OBJLoader加载器。加载完成后，将模型添加到场景中。

最后，你需要在动画循环中(render loop)使用渲染器(Renderer)渲染场景(Scene)。在每一帧中，场景中的3D模型将被渲染到浏览器窗口中。

下面是一个基本的three.js加载3D模型的代码示例：

// 引入three.js库文件
import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加光源
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);

// 创建OBJLoader加载器
const loader = new THREE.OBJLoader();

// 加载OBJ文件
loader.load(
  // 模型文件路径
  'path/to/model.obj',
  // 加载完成后的回调函数
  function (object) {
    // 将模型添加到场景中
    scene.add(object);
  },
  // 加载中的回调函数
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  // 加载失败的回调函数
  function (error) {
    console.log('An error happened');
  }
);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

这是一个简单的示例代码，你可以根据你的需求进行调整和扩展。