ThreeJS 入门指南：从零开始打造 3D 交互体验

2024-02-11 01:52:05

ThreeJS 是一个功能强大的 JavaScript 3D 图形库，它可以帮助你轻松创建出令人惊叹的 3D 场景和交互式应用程序。ThreeJS 的入门过程非常简单，即使你没有 3D 图形方面的经验，也可以快速上手。

ThreeJS 入门教程

1. 安装 ThreeJS

首先，你需要安装 ThreeJS 库。你可以从 ThreeJS 官网下载库文件，也可以通过 npm 安装。

npm install three

2. 创建场景

安装好 ThreeJS 后，你可以开始创建一个场景。场景是 3D 世界中的一个空间，你可以在这里放置对象、灯光和摄像机。

var scene = new THREE.Scene();

3. 添加对象

场景中最重要的元素之一就是对象。对象可以是任何东西，比如立方体、球体、圆柱体等等。

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 );

4. 添加灯光

灯光也是场景中必不可少的元素。灯光可以照亮场景中的对象，让它们看起来更加逼真。

var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 10, 10, 10 );
scene.add( light );

5. 添加摄像机

摄像机是用户查看场景的视角。你可以通过摄像机来控制用户看到的场景部分。

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

6. 渲染场景

最后，你需要将场景渲染到屏幕上。你可以使用 ThreeJS 的渲染器来完成这个任务。

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );