20个基于Three.js的代码示例

20个基于Three.js的代码示例

1、基本场景设置 - 创建一个简单的三维场景，包括相机、场景和渲染器。

// 初始化场景
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);

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

2、立方体 - 创建一个简单的立方体。

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

3、光照 - 添加光源到场景中。

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

4、纹理 - 将纹理贴图应用到对象上。

var texture = new THREE.TextureLoader().load('texture.jpg');
var material = new THREE.MeshBasicMaterial({ map: texture });

5、动画 - 使用Tween.js或GSAP等库创建动画效果。

var animate = function () {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
};
animate();

6、鼠标交互 - 实现鼠标控制对象的交互。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        intersects[0].object.scale.set(1.2, 1.2, 1.2);
    }
}
window.addEventListener('mousemove', onMouseMove, false);

7、粒子系统 - 创建一个简单的粒子系统。

var particleCount = 1000;
var particles = new THREE.Geometry();

for (var i = 0; i < particleCount; i++) {
    var particle = new THREE.Vector3(
        Math.random() * 500 - 250,
        Math.random() * 500 - 250,
        Math.random() * 500 - 250
    );
    particles.vertices.push(particle);
}

var particleMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 5 });
var particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

8、地形生成 - 使用Perlin噪声或其他方法生成地形。

var terrainLoader = new THREE.TerrainLoader();
terrainLoader.load('terrain.bin', function (data) {
    var geometry = new THREE.PlaneBufferGeometry(7500, 7500, 256, 256);
    for (var i = 0, l = geometry.vertices.length; i < l; i++) {
        geometry.vertices[i].z = data[i] / 65535 * 1000;
    }
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var terrain = new THREE.Mesh(geometry, material);
    scene.add(terrain);
});

9、基于物理引擎的模拟 - 使用Cannon.js或其他物理引擎创建物理模拟。

var world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
var groundBody = new CANNON.Body({ mass: 0 });
var groundShape = new CANNON.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);

10、声音 - 在场景中添加音频。

var listener = new THREE.AudioListener();
camera.add(listener);
var sound = new THREE.Audio(listener);
var audioLoader = new THREE.AudioLoader();
audioLoader.load('sound.mp3', function (buffer) {
    sound.setBuffer(buffer);
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
});

11、贴花 - 在模型上添加贴花效果。

var decalGeometry = new THREE.DecalGeometry(mesh, decalPosition, decalNormal, new THREE.Vector3(0.1, 0.1, 0.1));
var material = new THREE.MeshPhongMaterial({ map: texture });
var decalMesh = new THREE.Mesh(decalGeometry, material);
scene.add(decalMesh);

12、立方体贴图 - 使用立方体贴图创建环境映射。

var cubeTextureLoader = new THREE.CubeTextureLoader();
var texture = cubeTextureLoader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
var material = new THREE.MeshBasicMaterial({ envMap: texture });

13、后期处理 - 添加后期处理效果，如模糊、色调映射等。

var composer = new THREE.EffectComposer(renderer);
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
var bloomPass = new THREE.BloomPass();
composer.addPass(bloomPass);
var filmPass = new THREE.FilmPass(0.5, 0.1, 256, false);
composer.addPass(filmPass);

14、OBJ加载器 - 加载和显示OBJ模型。

var loader = new THREE.OBJLoader();
loader.load('model.obj', function (object) {
    scene.add(object);
});

15、模型动画 - 在模型上应用骨骼动画或关键帧动画。

var mixer = new THREE.AnimationMixer(model);
var action = mixer.clipAction(animationClip);
action.play();

16、基于文本的几何体 - 创建基于文本的3D几何体。

var loader = new THREE.FontLoader();
loader.load('font.json', function (font) {
    var geometry = new THREE.TextGeometry('Hello Three.js', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    });
    var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    var textMesh = new THREE.Mesh(geometry, material);
    scene.add(textMesh);
});

17、体积渲染 - 使用体积纹理渲染三维数据。

var volume = new THREE.Volume(data, dimensions);
var material = new THREE.VolumeSliceMaterial();
var slice = new THREE.VolumeSlice(volume, material);
scene.add(slice);

18、可视化算法 - 可视化算法，如路径追踪、光线追踪等。

var raycaster = new THREE.Raycaster();
var intersects = raycaster.intersectObjects(scene.children);

19、VR控制器 - 与WebVR或WebXR控制器交互。

var controller = new THREE.XRController(renderer);
controller.addEventListener('selectstart', onSelectStart);
controller.addEventListener('selectend', onSelectEnd);
scene.add(controller);

20、网络连接 - 使用WebRTC或WebSocket等技术建立网络连接。

var socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function (event) {
    console.log('Received message: ' + event.data);
};

这些是一些简单的示例，涵盖了Three.js的基本功能和一些高级功能。你可以根据需要深入研究每个示例，并根据自己的项目需求进行修改和扩展。