three.js使用lookAt跟随路径移动相机代码示例

THREE.js move camera along path with lookAt target

three, camera, control

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1586
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.up = new THREE.Vector3(0, 0, 1);

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

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
    color: 0x005E99
});

var cube = new THREE.Mesh(geometry, material);
cube.position.set(1, 10, 1);
scene.add(cube);

camera.position.z = 30;

var curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(-5, -15, 0),
    new THREE.Vector3(20, 15, 0),
    new THREE.Vector3(10, 0, 0)
);

var points = curve.getPoints(50);
var geometry = new THREE.BufferGeometry().setFromPoints(points);

var material = new THREE.LineBasicMaterial({
    color: 0xffffff
});

// Create the final object to add to the scene
var curveObject = new THREE.Line(geometry, material);

scene.add(curveObject);

var clock = new THREE.Clock()
clock.start()

var speed = 0.5

var pathTarget = new THREE.Vector3(0, 0, 0)

var render = function() {
    curve.getPoint((clock.getElapsedTime() * speed) % 1.0, pathTarget)

// cube.position.copy(pathTarget)
    camera.position.copy(pathTarget)
    camera.lookAt(cube.position)

requestAnimationFrame(render);

// cube.rotation.x += 0.1;
    // cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

render();

编译

CSS

HTML

THREE.js move camera along path with lookAt target

three, camera, control

编辑器支持Emmet

快捷键

THREE.js move camera along path with lookAt target

three, camera, control

three.js使用随机噪音实现顶点置换着色器代码示例

three.js使用体像素（voxel）来构建场景代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：