原文鏈接: threejs 入門 繞定點旋轉和自旋
three用起來和fabric很像, 只不過可以更加細緻的控制繪製
不錯的教程
http://www.yanhuangxueyuan.com/Three.js/
效果, 可以通過拖拽和滾輪控制相機位置和視角
clone倉庫, 或者使用cdn
git clone --depth=1 https://github.com/mrdoob/three.js.git
demo, 最後都是數學問題... 只要能夠算出各個時刻的位置就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene();
const boxGeometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometry
const boxMaterial = new THREE.MeshLambertMaterial({
color: 0x0000ff,
}); //材質對象Material
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial); //網格模型對象Mesh
console.log(boxMesh.position);
scene.add(boxMesh); //網格模型添加到場景中
const sphereGeometry = new THREE.SphereGeometry(60, 40, 40); //創建一個球體幾何對象
const sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x00ffff,
});
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial); //網格模型對象Mesh
console.log(sphereMesh.position);
const radius = 500;
sphereMesh.position.set(0, radius, 0);
scene.add(sphereMesh); //網格模型添加到場景中
//點光源
const point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點光源位置
scene.add(point); //點光源添加到場景中
//環境光
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const width = window.innerWidth; //窗口寬度
const height = window.innerHeight; //窗口高度
const k = width / height; //窗口寬高比
const s = 200; //三維場景顯示範圍控制係數，係數越大，顯示的範圍越大
//創建相機對象
const camera = new THREE.OrthographicCamera(
-s * k,
s * k,
s,
-s,
1,
1000
);
camera.position.set(200, 300, 200); //設置相機位置
camera.lookAt(scene.position); //設置相機方向(指向的場景對象)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //設置渲染區域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
let degree = 0;
function render() {
//執行渲染操作 指定場景、相機作爲參數
const d = (++degree * Math.PI) / 180;
boxMesh.rotation.set(d, 0, 0);
boxMesh.rotation.set(d, 0, 0);
renderer.render(scene, camera); //執行渲染操作
const x = Math.cos(d) * radius;
const y = Math.sin(d) * radius;
sphereMesh.position.set(x, y, 0);
}
setInterval(render, 16);
var controls = new THREE.OrbitControls(camera, renderer.domElement); //創建控件對象
controls.addEventListener("change", render); //監聽鼠標、鍵盤事件
</script>
</body>
</html>