three js 的2d效果
时间: 2023-10-20 09:18:10 浏览: 38
在 Three.js 中实现 2D 效果,我们可以使用 `OrthographicCamera` 代替 `PerspectiveCamera`,因为 `OrthographicCamera` 产生的投影是平行的,不会因为远近而产生透视效果。另外,我们可以使用 `Sprite` 或 `PlaneGeometry` 来创建 2D 元素。
以下是一个基本的 Three.js 2D 效果的代码示例:
```javascript
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.OrthographicCamera( -window.innerWidth/2, window.innerWidth/2, window.innerHeight/2, -window.innerHeight/2, 1, 1000 );
camera.position.z = 5;
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建 2D 元素 - Sprite
var spriteTexture = new THREE.TextureLoader().load( 'path/to/sprite.png' );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteTexture } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.position.set( 0, 0, 0 );
sprite.scale.set( 100, 100, 1 );
scene.add( sprite );
// 创建 2D 元素 - 平面几何体
var geometry = new THREE.PlaneGeometry( 200, 200 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.position.set(0, 0, 0);
scene.add( plane );
// 渲染场景和相机
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
```
在上面的代码中,我们创建了一个 `OrthographicCamera` 并将其放置在场景中。然后,我们创建了一个渲染器并将其添加到页面中。接下来,我们创建了两个 2D 元素,一个是 `Sprite`,一个是平面几何体。最后,我们使用 `requestAnimationFrame` 函数在每一帧中渲染场景和相机。
你可以根据自己的需要修改相机的位置和大小,以及 2D 元素的大小、位置和纹理,来实现不同的 2D 效果。