threejs 学习

创建一项目

创建目录 three 并且 cd 至该目录

执行安装

pnpm add vite three -save

在 package 添加 scripts

{
	"scripts": {
		"dev": "vite"
	},
	"dependencies": {
		"@types/three": "^0.165.0",
		"three": "^0.165.0",
		"vite": "^5.3.1"
	}
}

执行

pnpm dev 或者 npm run dev

根目录添加 index.html 与 main.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { margin: 0; }
    </style>
</head>

<body>
    <script type="module" src="/main.js"></script>
</body>

</html>

import * as THREE from 'three';

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
// 创建一个正方形
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 正方形面上添加颜色
const cube = new THREE.Mesh(geometry, material);

// 把渲染好的正方形添加到场景中
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 重新渲染
    renderer.render(scene, camera);
}

// 执行动画
animate();

至此已经可以看到一个正方形的在旋转了

创建一项目

参与讨论